\n {/* your chat UI here */}\n Hello world\n \n }\n>\n \n\n```\n\n`windowProps` controls the chat window: `title`, `position` (supports `auto`), `width`, `height`, `minWidth`, `minHeight`, `offset`, `zIndex`, `className`, `style`, `headerClassName`, `bodyClassName`, `closeButtonAriaLabel`, `closeOnEscape`, `onClose`, and `draggable` (defaults to `true`). With `position=\"auto\"`, the window positions near the trigger button and stays fully within the viewport.\n\n### Window options (windowProps)\n\n- **title**: Title shown in the window header. Accepts text or a React node.\n- **position**: Where to place the window relative to the trigger.\n - Values: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"auto\"\n - \"auto\" tries to place near the trigger and keeps the window fully in the viewport.\n- **width**: Window width in pixels. Default: 360.\n- **height**: Window height in pixels. Default: 480.\n- **minWidth**: Minimum width in pixels. Default: 280.\n- **minHeight**: Minimum height in pixels. Default: 240.\n- **offset**: Pixel gap from screen edges or the trigger when using auto positioning. Default: 16.\n- **zIndex**: Stacking order. Default: 1000.\n- **className**: CSS class for the outer window container.\n- **style**: Inline styles for the outer window container.\n- **headerClassName**: CSS class for the window header.\n- **bodyClassName**: CSS class for the window body/content area.\n- **closeButtonAriaLabel**: Accessible label for the close button. Default: \"Close\".\n- **closeOnEscape**: Close the window when pressing Escape. Default: true.\n- **onClose()**: Callback fired when the window closes.\n- **draggable**: Allow dragging the window by its header. Default: true.\n\n### Default chatbot (opt-in)\n![](\"assets/default_chatbot.png\")
\n\nUse `DefaultChatbot` by passing it via `windowContent`. This is opt-in and not automatic.\n\n```tsx\nimport { ChatEnabled, DefaultChatbot } from '@ai-hud/chat-enabled';\n\n}\n>\n \n\n```\n\n`DefaultChatbot` features:\n- **message history**, **text input**, **multiple image upload previews**\n- calls OpenAI chat completions with a placeholder key (replace with your own)\n - per-conversation persistence via `conversationId`:\n - pass a custom `conversationId` to persist/reuse a specific thread\n - omit it to auto-generate a new id for each mount\n\nDefaultChatbot props (commonly used):\n- **conversationId?**: string or null; when omitted, a new id is generated per mount\n- **context?**: any JSON-serializable object; included as a system message for additional grounding/context\n- **contextImages?**: string[] of HTTPS or data: URLs; images are sent with the first user message as vision context. Useful for screenshots/plots. When `sendComponentImageAsContext` is enabled on `windowProps`, the captured image is appended to this list.\n- **systemPrompt?**: system instruction string\n- **welcome?**: first assistant message in a new conversation\n- **model?**: OpenAI model id (default: gpt-4o-mini)\n- **placeholderApiKey?**: optionally pass an API key (for quick demos). In production, prefer a server proxy. You can also set a global `OPENAI_API_KEY` (e.g., `window.OPENAI_API_KEY = 'sk-...'`) or define `OPENAI_API_KEY` in process env during build.\n\nYou can programmatically clear conversations:\n\n```ts\nimport { clearConversation, clearAllConversations } from '@ai-hud/chat-enabled';\n\nclearConversation('example-auto');\nclearAllConversations();\n```\n\nNote: If you omit `conversationId`, an anonymous conversation is created and its history is automatically cleared from localStorage when the window closes.\n\n### Send component image as context\n![](\"assets/visual_context_gif.gif\")
\n\nYou can automatically attach a screenshot of the wrapped child as visual context for the chatbot. Enable this by setting an option on `windowProps`.\n\n```tsx\nimport { ChatEnabled, DefaultChatbot } from '@ai-hud/chat-enabled';\n\n\n }\n>\n \n \n 24 and 18 are my favorite numbers.\n \n
\n\n```\n\nHow it works:\n- When the window opens, the child is captured with a lightweight DOM screenshot and injected into the chatbot as `contextImages`.\n- If capture isn’t ready yet, a short placeholder is shown; then the image is attached automatically.\n\nNotes:\n- The capture uses an inline DOM-to-image approach; external images must be CORS-enabled to avoid a tainted canvas.\n- For best OCR, the capture is scaled up to improve legibility.\n- If you already pass `contextImages` to `DefaultChatbot`, the captured image is appended.\n\nYou can also provide `contextImages` directly:\n\n```tsx\n\n }\n>\n \n\n```\n\n### Tool calling (basic example)\n![](\"assets/tools_gif.gif\")
\n\n`DefaultChatbot` can call developer-defined tools (function calling). Provide a list of tools via the `tools` prop; each tool includes an OpenAI-style JSON schema and an `execute` function that runs in your app.\n\n```tsx\nimport { ChatEnabled, DefaultChatbot } from '@ai-hud/chat-enabled';\n\n\n }\n>\n \n\n```\n\nNotes:\n- The model chooses when to call tools based on the schema you provide. Return strings (or JSON-serializable data) from `execute`.\n- For production, run tool code on a server when needed; the example above runs in-browser for simplicity.\n\n### Tool calling (multiple tools)\n\nYou can expose multiple tools. The model decides which to call (and in what order) based on your instructions and the tool schemas.\n\n```tsx\nimport { ChatEnabled, DefaultChatbot } from '@ai-hud/chat-enabled';\n\n\n }\n>\n \n\n```\n\nTip:\n- Encourage the model via `systemPrompt`/user prompt to compute counts with the calculator tool and then apply the result to how it uses other tools or structures its response.\n\n### Local development\n\nThis repo includes a minimal Vite example for development:\n\n```bash\n# in repo root\nnpm install\nnpm run build\n\n# run the example app\ncd examples/basic\nnpm install\nnpm run dev\n```\n\nThe example uses a path alias to the local `src/` for instant iteration. To test the built package instead, run `npm pack` in the root and install the generated tarball in the example.\n\n### License\n\nEPL-2.0 license\n\n\n ![\"Buy](\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\")
\n","readmeFilename":"README.md"}![\"Product\"](\"/product.png\")
\n ![](\"assets/json_context_gif.gif\")
\n\nPass (more) context as a screenshot of the component\n\n![](\"assets/chat_button.png\")
\n\n```tsx\nimport { ChatEnabled } from '@ai-hud/chat-enabled';\n\nexport default function Example() {\n return (\n ![](\"assets/floating_window.png\")
\n\n`ChatEnabled` can open a clean floating window on click. Pass `windowContent` for dynamic content and `windowProps` to control size/position.\n\n```tsx\n