JSPM

  • Created
  • Published
  • Downloads 14
  • Score
    100M100P100Q58714F
  • License MIT

CLI tool to integrate AI chatbots into existing projects using tokens from AutoChat webapp

Package Exports

  • embedia
  • embedia/bin/autochat-integrator.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (embedia) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Embedia CLI

npm version Node.js Version

A command-line tool to instantly integrate AI chatbots into your existing projects using tokens from the Embedia webapp.

๐ŸŽฏ Version 1.1.0 - Enhanced & Tested

This version includes comprehensive improvements validated by 91+ automated tests with 94.73% code coverage, including real browser automation testing with Puppeteer.

โœจ Features

  • ๐Ÿš€ One-command integration - Add chatbots to any project instantly
  • ๐ŸŽฏ Smart project detection - Automatically detects Next.js, React, and other frameworks
  • ๐Ÿ”ง Intelligent file merging - Safely merges with existing package.json and .env files
  • ๐ŸŽจ Beautiful CLI interface - Colored output with progress indicators
  • ๐Ÿ“ฆ Zero configuration - Generated code works out of the box
  • ๐Ÿ”’ Secure token-based - Uses temporary tokens from AutoChat webapp

๐Ÿš€ Quick Start

1. Generate a Token

Visit the Embedia webapp and:

  1. Enter your project context
  2. Choose your AI provider (OpenAI or Google Gemini)
  3. Generate your chatbot
  4. Copy the generated token (starts with ac_)

2. Install the Chatbot

# In any project directory
npx embedia@latest init --token=ac_your_token_here

3. Set Up Your API Key

Add your AI provider API key to .env.local:

# For OpenAI
OPENAI_API_KEY=sk-your-openai-key

# For Google Gemini  
GEMINI_API_KEY=your-gemini-key

4. Start Your Project

npm install
npm run dev

Your chatbot will appear in the bottom-right corner! ๐ŸŽ‰

๐Ÿ“– Usage

Basic Usage

# Install in current directory
embedia init --token=ac_xyz123

# Or use npx (recommended)
npx embedia@latest init --token=ac_xyz123

Command Options

embedia init [options]

Options:
  -t, --token <token>    Integration token from Embedia webapp (required)
  -h, --help            Display help for command

Getting Help

embedia --help
embedia init --help

๐Ÿ—๏ธ Project Types Supported

Project Type Support Level Description
New/Empty Directory โœ… Full Creates complete Next.js project
Existing Next.js โœ… Full Integrates into existing project
Existing React โš ๏ธ Partial Adapts Next.js components for React
Node.js โš ๏ธ Partial Adds components, manual integration needed
Other โš ๏ธ Manual Creates files, manual integration required

๐Ÿ“ Generated Files

The CLI creates these files in your project:

Core Chatbot Files

src/components/AutoChat/
โ”œโ”€โ”€ Chatbot.tsx          # Main chatbot component
โ”œโ”€โ”€ useChat.ts           # Chat hook for API communication
โ””โ”€โ”€ types.ts             # TypeScript definitions

API Integration

src/app/api/chat/
โ””โ”€โ”€ route.ts             # API route for chat functionality

Configuration Files

.env.local               # Environment variables (merged)
package.json             # Dependencies (merged)

Full Project (New Directory)

โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app/
โ”‚   โ”‚   โ”œโ”€โ”€ layout.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ globals.css
โ”‚   โ”‚   โ””โ”€โ”€ api/chat/route.ts
โ”‚   โ””โ”€โ”€ components/AutoChat/
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ .env.local
โ”œโ”€โ”€ next.config.mjs
โ”œโ”€โ”€ tailwind.config.ts
โ”œโ”€โ”€ postcss.config.mjs
โ””โ”€โ”€ tsconfig.json

๐Ÿ”ง Integration Behavior

New Projects

  • Creates a complete Next.js 14 project
  • Includes all necessary dependencies
  • Ready to run with npm run dev

Existing Next.js Projects

  • Adds chatbot components to your project
  • Merges new dependencies with existing package.json
  • Updates .env.local with new environment variables
  • Backs up existing files before overwriting

Existing React Projects

  • Adapts Next.js components for React
  • You may need to modify API routes for your backend
  • Manual integration of components required

๐Ÿ› ๏ธ Advanced Usage

Environment Variables

Set these environment variables for additional features:

DEBUG=1                  # Enable debug logging

Custom Integration

After running the CLI, you can customize:

  1. Chatbot Appearance: Edit src/components/AutoChat/Chatbot.tsx
  2. Chat Logic: Modify src/components/AutoChat/useChat.ts
  3. API Behavior: Update src/app/api/chat/route.ts
  4. Styling: Customize the CSS variables in globals.css

Manual Integration Steps

For unsupported project types:

  1. Copy the generated components to your project
  2. Install the required dependencies:
    npm install @google/genai  # For Gemini
    # OR
    npm install openai         # For OpenAI
  3. Set up your API routes according to your backend framework
  4. Import and use the chatbot components

๐Ÿ”‘ API Keys

OpenAI Setup

  1. Visit OpenAI Platform
  2. Create an API key
  3. Add to .env.local: OPENAI_API_KEY=sk-your-key

Google Gemini Setup

  1. Visit Google AI Studio
  2. Create an API key
  3. Add to .env.local: GEMINI_API_KEY=your-key

๐Ÿ› Troubleshooting

Common Issues

"Token not found or expired"

  • Tokens expire after 30 minutes
  • Generate a new token from the AutoChat webapp
  • Ensure token starts with ac_

"Permission denied"

  • Check directory write permissions
  • Run with appropriate user permissions
  • Ensure target directory exists

"Package.json merge failed"

  • Backup your package.json manually
  • Run CLI again with --overwrite flag
  • Manually merge dependencies if needed

API Routes Not Working

  • Ensure your API key is correctly set in .env.local
  • Check that the API route file was created
  • Verify your API key has sufficient credits/permissions

Debug Mode

Enable detailed logging:

DEBUG=1 npx embedia@latest init --token=ac_xyz123

Getting Support

  1. Check this README for common solutions
  2. Visit the Embedia webapp for token issues
  3. Create an issue on GitHub

๐Ÿ“„ License

MIT License - see LICENSE file for details.

๐Ÿค Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

๐Ÿงช Testing & Quality

This CLI is thoroughly tested with:

  • 91+ automated tests with 94.73% code coverage
  • Browser automation testing with Puppeteer
  • Cross-platform compatibility (desktop, mobile, different frameworks)
  • Real-world integration validation proving chatbots work on actual websites

Happy chatting! ๐Ÿค– Built with โค๏ธ by the Embedia team.