Loading repository data…
devtony42 / repository
Drop-in AI chatbot widget with multi-provider support (OpenAI, Anthropic, Gemini). One script tag. Streaming. Production ready.
Drop-in AI chatbot widget with multi-provider support. Embed in any website in under 5 minutes.
📖 Documentation · 🎮 Live Demo · ⬇️ Download WP Plugin
<script> tag. No build step. Fully customizable CSS.# Clone
git clone https://github.com/devtony42/chatbot-drop.git
cd agentic-chatbot-starter
# Install
npm install
# Configure
cp .env.example .env
# Edit .env with your API key(s)
# Run
npm run dev
Open http://localhost:3000 to see the demo page with the embedded chat widget.
src/
├── types/ # TypeScript interfaces and Zod schemas
├── providers/ # AI provider implementations (OpenAI, Anthropic, Google)
├── services/ # Business logic (ProviderRegistry, ChatService)
├── controllers/ # HTTP request handlers
├── routes/ # Express route definitions
├── middleware/ # Rate limiting, validation, error handling
├── config.ts # Environment variable loader
├── app.ts # Express app factory
└── index.ts # Entry point
public/
├── index.html # Demo page
├── css/widget.css # Widget styles
└── js/widget.js # Embeddable widget (vanilla JS)
test/
├── unit/ # Unit tests
└── integration/ # API integration tests
Install the Chatbot Drop plugin to embed the widget on any page or post with a shortcode.
Download: Latest release → chatbot-drop-wp-<version>.zip
Install:
chatbot-drop-wp-<version>.zip → Install Now → Activate[chatbotdrop] to any page or postBuild the zip yourself:
./scripts/package-wp-plugin.sh
# Output: dist/chatbot-drop-wp-<version>.zip
See chatbot-drop-wp/README.md for the full shortcode reference.
POST /api/chatSend a message and receive a complete response.
Request:
{
"messages": [
{ "role": "user", "content": "What is TypeScript?" }
],
"provider": "openai"
}
Response:
{
"content": "TypeScript is a typed superset of JavaScript...",
"provider": "openai",
"model": "gpt-4o-mini",
"usage": {
"promptTokens": 12,
"completionTokens": 45,
"totalTokens": 57
}
}
POST /api/chat/streamSame request format as /api/chat, returns Server-Sent Events:
data: {"content":"Type","done":false}
data: {"content":"Script","done":false}
data: {"content":"","done":true}
GET /api/chat/providersList configured providers.
{ "providers": ["openai", "anthropic", "google"] }
GET /api/healthHealth check with provider status.
{
"status": "ok",
"timestamp": "2026-03-10T14:00:00.000Z",
"providers": ["openai"]
}
Add this to any HTML page:
<script src="https://your-server.com/js/widget.js"
data-server="https://your-server.com"
data-title="Chat with us"
data-greeting="Hi! How can I help?"
data-stream="true"
data-color="#7c3aed"
data-radius="8px"
data-font-size="13px">
</script>
| Attribute | Default | Description |
|---|---|---|
data-server | "" (same origin) | Backend server URL |
data-title | "Chat" | Header title text |
data-greeting | "Hi! How can I help you today?" | Initial greeting message |
data-stream | "true" | Enable streaming responses |
data-api-key | "" | Tenant API key |
data-color | "#2563eb" | Primary brand colour (hex) — auto-derives hover shade |
data-radius | "12px" | Border radius for panels and message bubbles |
data-font-size | "14px" | Base font size for messages and input field |
Theme attributes (data-color, data-radius, data-font-size) are the fastest way to match your brand — no CSS required. They set scoped CSS custom properties on .acw-container, which cascade into all widget rules.
For deeper customization, override the CSS vars directly in your stylesheet:
.acw-container {
--acw-primary: #7c3aed;
--acw-primary-hover: #6d28d9;
--acw-bg-message: #f3f0ff;
--acw-radius: 8px;
--acw-font-size: 13px;
}
⚠️ HTTPS required in production. API keys are sent as request headers and must be protected by TLS. Render and Railway handle this automatically. If self-hosting, put the server behind a reverse proxy (nginx, Caddy) with a valid certificate.
All configuration via environment variables (see .env.example):
| Variable | Default | Description |
|---|---|---|
PORT | 3000 | Server port |
HOST | 0.0.0.0 | Server host |
CORS_ORIGINS | * | Comma-separated allowed origins |
DEFAULT_PROVIDER | openai | Default AI provider |
OPENAI_API_KEY | — | OpenAI API key |
ANTHROPIC_API_KEY | — | Anthropic API key |
GOOGLE_API_KEY | — | Google Gemini API key |
SYSTEM_PROMPT | "You are a helpful assistant..." | System prompt for all conversations |
MAX_TOKENS | 1024 | Maximum response tokens |
TEMPERATURE | 0.7 | Response randomness (0-2) |
RATE_LIMIT_MAX | 20 | Max requests per window |
RATE_LIMIT_WINDOW_MS | 60000 | Rate limit window (ms) |
src/providers/your-provider.ts implementing the ChatProvider interfacesrc/services/provider-registry.tssrc/types/config.tssrc/config.ts and .env.exampletest/unit/npm test # Run all tests
npm run test:watch # Watch mode
npm run test:coverage # With coverage report
MIT — use it however you want.
Tony Goggin — tonygoggin.com
Selected from shared topics, language and repository description—not editorial ratings.
agents-io /
Drop-in AI chatbot SDK + React widget. 3 lines to integrate. 11 LLM providers with auto-failover. 13 URL-only adapters (Stripe, Calendly, PayPal...). Markdown knowledge. Apache 2.0.