A plug-and-play AI chatbot widget that you can easily integrate into any website. Powered by OpenRouter's API, this kit allows you to create a custom AI assistant with your own knowledge base and branding.
This is our official website here.
- Easy Integration: Add to any website with a single script tag
- Customizable: Configure appearance, behavior, and knowledge base
- Multiple Models: Support for various AI models via OpenRouter
- RAG Support: Include custom knowledge for context-aware responses
- Lightweight: Minimal footprint, no external dependencies in production
- Node.js (v14 or higher)
- An OpenRouter API key (get one here)
-
Clone the repository:
git clone https://github.com/JithunMethusahan/AI-Kit.git cd AI-Kit -
Install dependencies:
npm install
-
Configure your bot: Create a
.envfile in the root directory:API_KEY=your_openrouter_api_key_hereEdit
config.yamlfor other settings like model and appearance. -
Add your knowledge base (optional): Edit
knowledge.txtwith context information for your bot. -
Build the widget:
npm run build
Add the generated script to your website:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<script src="dist/chatbot.bundle.js"></script>
</body>
</html>- API Key: Set
API_KEYin.envfile (get from OpenRouter) - Other Settings: Edit
config.yamlto customize model, appearance, and behavior
Available free models include:
deepseek/deepseek-r1-0528:freemistralai/devstral-2512:free- And many more (see OpenRouter models)
Use the included test files:
dist/debug.html: Test API connection (generated during build)test.html: Preview the widget
├── src/
│ ├── widget.js # Main widget logic
│ └── style.css # Widget styles
├── .env # API key (not committed)
├── config.yaml # Configuration settings
├── knowledge.txt # Knowledge base
├── build.js # Build script
├── debug.html # Debug template (processed during build)
├── test.html # Widget preview
└── dist/ # Built output (generated)
├── chatbot.bundle.js
└── debug.html
We welcome contributions! Please see CONTRIBUTING.md for guidelines.
This project is licensed under the MIT License - see the LICENSE file for details.
- Powered by OpenRouter
"Failed to fetch" Error? If testing on your local computer, you must use a Local Server.
VS Code: Right-click your HTML file -> "Open with Live Server". Python: Run python -m http.server.
Do not just double-click the HTML file. Bot gives generic answers?
Now, your folder looks like this:
/My-Chatbot-Kit
├── node_modules/ <-- (You can delete this before sharing to save space)
├── src/ <-- (Source code)
├── config.yaml <-- (Default Template)
├── knowledge.txt <-- (Default Template)
├── build.js
└── README.md
## Connection Debugger (If things go wrong)
If you have built the bot but it says "Error" or "Failed to fetch", use the included Debug Tool to find the problem.
1. Open `debug.html` in a code editor (VS Code, Notepad).
2. Look for the line: `const API_KEY = "PASTE_KEY_HERE";`
3. Paste your OpenRouter API Key there and save.
4. Run `debug.html` (Use "Live Server" or Python server).
5. Click **"TEST CONNECTION NOW"**.
**What the logs mean:**
- **Status 401:** Your API Key is wrong.
- **Status 402:** You need to add credits to your OpenRouter account.
- **Status 404:** The Model name is wrong.
- **Failed to Fetch:** You are likely blocking the connection (Turn off AdBlockers) or not using a Local Server.