{"slug": "i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here", "title": "I built a drop-in AI chatbot widget for React that works with any provider — here's why", "summary": "A developer built react-agent-widget, an open-source React chatbot widget that works with any LLM provider including OpenAI, Anthropic, AWS Bedrock, and Azure OpenAI. The widget features streaming responses, full theming, generative UI, headless mode, and TypeScript support, with all API keys kept server-side for security. It is available as an npm package and aims to solve the vendor lock-in problem common with existing chatbot SDKs.", "body_md": "Every time I wanted to bolt an AI chatbot onto a React app, I hit the same wall: either I locked myself into one vendor's SDK (OpenAI's widget, Anthropic's whatever-they-ship), or I built the streaming UI, the theming, the floating launcher button, and the SSE parsing *again*, from scratch, for the third time this year.\n\nSo I built ** react-agent-widget** — a chat widget that doesn't care which LLM is on the other end.\n\n```\nnpm install react-agent-widget\njs\nimport { AgentWidget, createHttpAdapter } from 'react-agent-widget'\n\nconst adapter = createHttpAdapter({ url: '/api/chat' })\n\nexport default function App() {\n  return (\n    <AgentWidget\n      adapter={adapter}\n      welcomeMessage=\"Hi! How can I help you today?\"\n    />\n  )\n}\n```\n\nThat's it. A floating chat button shows up bottom-right, streaming responses token by token, no extra CSS files, no config.\n\nMost chatbot widgets I found were tied to one API. The moment you want to switch from OpenAI to Claude, or move to Bedrock because your infra team lives on AWS, you're rewriting the integration layer. `react-agent-widget`\n\nships adapters for the providers people actually use:\n\n```\n// OpenAI\ncreateOpenAIAdapter({ proxyUrl: '/api/openai', model: 'gpt-4o' })\n\n// Anthropic Claude\ncreateAnthropicAdapter({ proxyUrl: '/api/anthropic', model: 'claude-3-5-sonnet-20241022' })\n\n// AWS Bedrock\ncreateBedrockAdapter({ proxyUrl: '/api/bedrock', model: 'anthropic.claude-3-5-sonnet-20241022-v2:0' })\n\n// Azure OpenAI\ncreateAzureOpenAIAdapter({ proxyUrl: '/api/azure', deploymentName: 'gpt-4o' })\n```\n\nEvery adapter points at a proxy endpoint *you* control — your server attaches the API key, the SigV4 signature, or the managed identity. **No credentials ever ship to the browser.** That's a deliberate design choice, not an afterthought — I've seen too many \"quick\" chatbot integrations leak keys in client bundles.\n\n| Feature | Why it matters |\n|---|---|\n| Streaming responses | Built-in SSE parser, token-by-token rendering — no janky \"wait for the whole reply\" UX |\n| Fully themeable | CSS custom properties — every color, radius, shadow, and font is overridable, no CSS-in-JS runtime |\n| Generative UI | The agent can render actual React components (cards, forms, charts) inside the chat, not just text |\n| Headless mode | Don't like the default UI? Use the state/streaming hooks and build your own |\n| TypeScript-first | Full type safety across the public API |\n| SSR-safe | No `window` access at render time — works cleanly with Next.js App Router |\n| Lightweight | ~44KB minified ESM, zero mandatory runtime deps beyond React 18 |\n\nEverything is scoped behind a `raw-`\n\nclass prefix, so it won't collide with your existing styles, and it's themed entirely through CSS variables:\n\n```\n:root {\n  --raw-primary-color: #6366f1;\n  --raw-border-radius: 12px;\n  --raw-font-family: 'Inter', sans-serif;\n}\n```\n\nNo runtime style injection, no specificity wars.\n\nThere's a live [CodeSandbox demo](https://codesandbox.io/s/dxsrth) — no API key needed, just open it and click around.\n\nThis is a fresh `0.1.x`\n\nrelease, so I'm actively hardening it — better test coverage, more generative UI examples, and I'm looking at a React Native port next since I'm already deep in that ecosystem for another project. If you try it and hit something rough, [open an issue](https://github.com/TilangaPramith/react-agent-widget/issues) — I'm reading all of them.\n\nIf you're building anything that needs an AI chat surface in a React app and don't want to be married to one vendor's SDK, give it a spin:\n\n```\nnpm install react-agent-widget\n```\n\nWould genuinely love feedback — especially from anyone who's fighting the same \"chatbot per vendor\" problem.", "url": "https://wpnews.pro/news/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here", "canonical_source": "https://dev.to/pramith_vidusara_6c6880ec/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-heres-why-2dl5", "published_at": "2026-07-01 09:56:12+00:00", "updated_at": "2026-07-01 10:19:28.989988+00:00", "lang": "en", "topics": ["developer-tools", "large-language-models", "ai-tools", "generative-ai"], "entities": ["react-agent-widget", "OpenAI", "Anthropic", "AWS Bedrock", "Azure OpenAI", "React", "Next.js", "CodeSandbox"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here", "markdown": "https://wpnews.pro/news/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here.md", "text": "https://wpnews.pro/news/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here.txt", "jsonld": "https://wpnews.pro/news/i-built-a-drop-in-ai-chatbot-widget-for-react-that-works-with-any-provider-here.jsonld"}}