{"id":30901898,"url":"https://github.com/beyondsimulations/web-embedded-chat","last_synced_at":"2025-09-09T07:10:28.142Z","repository":{"id":310234836,"uuid":"1038932706","full_name":"beyondsimulations/web-embedded-chat","owner":"beyondsimulations","description":"Chat Widget that works with Cloudflare Workers as Proxy and can be used with any OpenAI compatible Endpoint such as Mistral or Open WebUI. To see and test it in action, just follow the link below to a lecture of mine.","archived":false,"fork":false,"pushed_at":"2025-08-22T07:25:38.000Z","size":201,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-31T18:49:03.673Z","etag":null,"topics":["chat","chatbot","cloudflare-worker","embedded","large-language-models"],"latest_commit_sha":null,"homepage":"https://beyondsimulations.github.io/Applied-Optimization/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondsimulations.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-16T05:37:52.000Z","updated_at":"2025-08-22T07:25:41.000Z","dependencies_parsed_at":"2025-08-18T09:13:33.203Z","dependency_job_id":null,"html_url":"https://github.com/beyondsimulations/web-embedded-chat","commit_stats":null,"previous_names":["beyondsimulations/open-webui-embedded-chat","beyondsimulations/web-embedded-chat"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beyondsimulations/web-embedded-chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondsimulations%2Fweb-embedded-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondsimulations%2Fweb-embedded-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondsimulations%2Fweb-embedded-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondsimulations%2Fweb-embedded-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondsimulations","download_url":"https://codeload.github.com/beyondsimulations/web-embedded-chat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondsimulations%2Fweb-embedded-chat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274260806,"owners_count":25251941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chatbot","cloudflare-worker","embedded","large-language-models"],"created_at":"2025-09-09T07:10:26.648Z","updated_at":"2025-09-09T07:10:28.127Z","avatar_url":"https://github.com/beyondsimulations.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Universal AI Chat Widget\n\nA simple floating chat widget that works with any OpenAI-compatible API. Add AI assistance to your website with minimal setup.\n\n## Features\n\n- **Universal API Support**: Works with Mistral, OpenAI, OpenWebUI, and more\n- **Easy Setup**: Just two files and minimal configuration\n- **Advanced Citation Support**: Clickable citations with source references and metadata\n- **LaTeX Math Rendering**: Automatic KaTeX integration for mathematical expressions\n- **Code Highlighting**: Syntax highlighting with copy-to-clipboard functionality\n- **Highly Customizable**: Extensive color, opacity, positioning, and behavior options\n- **Security Features**: Domain validation, rate limiting, input sanitization\n- **Responsive Design**: Works seamlessly on desktop and mobile devices\n- **Session Persistence**: Maintains chat history across page reloads\n\n## Quick Start\n\n### 1. Deploy Cloudflare Worker\n\n1. Go to [Cloudflare Workers](https://workers.cloudflare.com/)\n2. Create a new Worker and paste `cloudflare-worker.js`\n3. Set environment variables:\n   ```\n   # Required: The API endpoint for the LLM provider\n   API_ENDPOINT=https://api.mistral.ai/v1/chat/completions\n   # Required: The API key for authenticating with the LLM provider\n   API_KEY=your-mistral-api-key\n   # Optional: The system prompt to guide the LLM's behavior\n   SYSTEM_PROMPT=You are a helpful assistant.\n\n   # Optional: Rate Limiting Configuration\n   RATE_LIMIT_REQUESTS=10          # Requests per window (default: 10)\n   RATE_LIMIT_WINDOW=60            # Time window in seconds (default: 60)\n   RATE_LIMIT_BURST=3              # Burst allowance (default: 3)\n\n   # Required: Set to \"development\" or \"production\" to control logging and behavior\n   ENVIRONMENT=development         # Enables debug logging\n\n   # Optional: Specify the AI provider (e.g., openai, anthropic). If not set, it will be derived from the API endpoint.\n   AI_PROVIDER=openai\n\n   # Optional: PostHog configuration for analytics\n   POSTHOG_API_KEY=your-posthog-api-key\n   POSTHOG_ENDPOINT=https://eu.i.posthog.com/i/v0/e/\n   ```\n4. Configure allowed domains and paths in the worker:\n\n- Add your allowed domains as a comma-separated list in the `ALLOWED_DOMAINS` environment variable (e.g., `beyondsimulations.github.io,yourdomain.com`).\n- The worker will automatically restrict requests to the `/api` path and validate the origin against the allowed domains.\n\n5. Deploy and note your Worker URL\n\n### 2. Add to Website\n\nYou can either download `floating-chat.js` or load it directly from CDN:\n\n**Option A: Load from CDN**\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eYour Page\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Your content --\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/beyondsimulations/web-embedded-chat@latest/floating-chat.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        new UniversalChatWidget({\n            title: 'AI Assistant',\n            subtitle: 'Ask me anything!',\n            primaryColor: '#ff7000',\n            apiEndpoint: 'https://your-worker.workers.dev/api'\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Option B: Self-hosted**\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eYour Page\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Your content --\u003e\n    \u003cscript src=\"floating-chat.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        new UniversalChatWidget({\n            title: 'AI Assistant',\n            subtitle: 'Ask me anything!',\n            primaryColor: '#ff7000',\n            apiEndpoint: 'https://your-worker.workers.dev/api'\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Configuration Options\n\nThe widget supports extensive customization options:\n\n```javascript\nnew UniversalChatWidget({\n    // Basic Configuration\n    title: 'AI Assistant',\n    welcomeMessage: 'Hello! How can I help you today?',\n    placeholder: 'Type your question...',\n    position: 'bottom-right',       // bottom-left, top-right, top-left\n\n    // API Configuration\n    apiEndpoint: 'https://your-worker.workers.dev',\n    model: 'gpt-3.5-turbo',\n\n    // Header Colors\n    titleBackgroundColor: '#2c3532',\n    titleFontColor: '#ffffff',\n\n    // Message Colors \u0026 Opacity\n    assistantColor: '#fdcd9a',\n    assistantFontColor: '#2c3532',\n    assistantMessageOpacity: 1.0,   // 0.0 to 1.0\n    userColor: '#99bfbb',\n    userFontColor: '#2c3532',\n    userMessageOpacity: 1.0,        // 0.0 to 1.0\n\n    // Interface Colors\n    chatBackground: '#ffffff',\n    stampColor: '#df7d7d',          // Timestamps and badges\n    borderColor: '#2c3532',\n    buttonIconColor: '#ffffff',\n    scrollbarColor: '#d1d5db',\n    inputTextColor: '#1f2937',\n\n    // Code Block Styling\n    codeBackgroundColor: '#f3f4f6',\n    codeOpacity: 0.8,               // 0.0 to 1.0\n    codeTextColor: '#2c3532',\n\n    // Behavior Options\n    startOpen: false,\n    buttonSize: 60,\n    windowWidth: 450,\n    windowHeight: 600,\n    showModelInfo: false,\n    debug: false                    // Enable for development\n});\n```\n\n## API Providers\n\n### Mistral\n```\nAPI_ENDPOINT=https://api.mistral.ai/v1/chat/completions\nAPI_KEY=your-mistral-key\nMODEL=mistral-small-latest\n```\n\n### OpenAI\n```\nAPI_ENDPOINT=https://api.openai.com/v1/chat/completions\nAPI_KEY=sk-your-openai-key\nMODEL=gpt-3.5-turbo\n```\n\n### OpenWebUI\n```\nAPI_ENDPOINT=https://your-openwebui.com/api/chat/completions\nAPI_KEY=your-key\nMODEL=llama3.2:latest\n```\n\n## Advanced Features\n\n### Citation Support\n\nThe widget automatically renders citations from API responses. When your AI model returns responses with structured source data, citations appear as clickable links `[1]`, `[2]`, etc., with a references section at the bottom of messages.\n\n**Supported Citation Formats:**\n- Structured sources in API response: `data.sources`, `data.source.sources`, `data.context.sources`\n- Citation metadata including document headings and snippets\n- Automatic citation link generation and reference scrolling\n\n### LaTeX Math Rendering\n\nMathematical expressions are automatically rendered using KaTeX:\n\n**Supported Delimiters:**\n- Display math: `$$...$$` or `\\[...\\]`\n- Inline math: `$...$` or `\\(...\\)`\n\n**Example:**\n```\nThe quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$\n\nFor display math:\n$$\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$$\n```\n\n### Code Highlighting\n\nCode blocks automatically include copy-to-clipboard functionality:\n\n**Markdown Support:**\n- Inline code: `` `code` ``\n- Code blocks: ``` ```code``` ```\n- Headers: `# ## ###`\n- Bold/italic: `**bold**` `*italic*`\n\n## Troubleshooting\n\n**Widget doesn't appear**: Check browser console for JavaScript errors\n\n**API errors**:\n1. Test your endpoint with curl first:\n   ```bash\n   curl -X POST \"https://api.mistral.ai/v1/chat/completions\" \\\n     -H \"Authorization: Bearer your-key\" \\\n     -H \"Content-Type: application/json\" \\\n     -d '{\"model\":\"mistral-small-latest\",\"messages\":[{\"role\":\"user\",\"content\":\"test\"}],\"max_tokens\":10}'\n   ```\n2. Verify required environment variables in the Cloudflare Workers dashboard:\n   - `API_ENDPOINT`\n   - `API_KEY`\n   - `ENVIRONMENT`\n3. If using PostHog, ensure `POSTHOG_API_KEY` and `POSTHOG_ENDPOINT` are set.\n4. Check worker logs for detailed error messages.\n\n**CORS issues**: Ensure your domain is added to the `ALLOWED_DOMAINS` environment variable (comma-separated) in the Cloudflare Worker configuration. Also, confirm that requests are made to `/api` as other paths are restricted.\n\n**Rate limiting**: Check worker logs for rate limit messages. Adjust `RATE_LIMIT_*` environment variables if needed. Ensure `ENVIRONMENT` is set to `development` for detailed logs.\n\n**Common fixes**:\n- Remove trailing slashes from API_ENDPOINT\n- Verify API key has sufficient credits\n- Check model name spelling\n- For development, set `ENVIRONMENT=development` to enable debug logging\n- Citations require structured source data in API responses\n- LaTeX rendering requires internet connection for KaTeX CDN\n\n## Security Features\n\nThe Cloudflare Worker includes comprehensive security measures:\n\n- **Domain Validation**: Strict CORS policy with exact domain matching (configured via the `ALLOWED_DOMAINS` environment variable, supporting comma-separated domains) and path restriction to `/api`\n- **Rate Limiting**: Configurable request limits with burst allowance\n- **Input Sanitization**: Model name validation and message length limits\n- **Secure Logging**: Prevents sensitive data exposure in production while logging operational details for debugging\n- **HTTPS Enforcement**: Automatic protocol validation\n- **Development Mode**: Separate security policies for development vs production\n\n## Files\n\n```\n├── floating-chat.js          # Main widget with citation \u0026 LaTeX support\n├── cloudflare-worker.js      # Secure API proxy with rate limiting\n├── index.qmd                # Demo page\n└── README.md                # This documentation\n```\n\n## License\n\nMIT License - use this in your projects!\n\n---\n\n**Questions?** Check the troubleshooting section or open an issue on GitHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondsimulations%2Fweb-embedded-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondsimulations%2Fweb-embedded-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondsimulations%2Fweb-embedded-chat/lists"}