{"_id":"@an-sdk/react","_rev":"13-c9eeeaf4997e161dc5b70d7280dc47aa","name":"@an-sdk/react","dist-tags":{"latest":"0.1.2"},"versions":{"0.0.2":{"name":"@an-sdk/react","version":"0.0.2","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@an-sdk/react@0.0.2","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://an.dev","bugs":{"url":"https://github.com/21st-dev/an-sdk/issues"},"dist":{"shasum":"b21905be9aa99f8b30fbd84645645a5bab2bfbcc","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.0.2.tgz","fileCount":10,"integrity":"sha512-Dpxae6agaMM2ZzzZIKzKxVh8kBESGeTCdmYtgweguVaMM2Y/NC65JUqWVzwOqF4wjiHAp6Ovk8OE6OrGBhq65w==","signatures":[{"sig":"MEUCIQDNQoo2bpTRdJByOyncU1iQwE6vYqUnrcXQBZhp6wR+PwIgaVL4vYjznN6ZPDNGDpUdLk6HS23EjldglX3Vd8ucx8I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":601289},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"da8537ab44a7a28d10a35a60e07165bd5680abb0","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify"},"_npmUser":{"name":"bunasq","email":"realsergeybunas@gmail.com"},"repository":{"url":"git+https://github.com/21st-dev/an-sdk.git","type":"git"},"_npmVersion":"11.6.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.13.0","dependencies":{"clsx":"^2.1.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.2_1771824146528_0.7963515922538988","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@an-sdk/react","version":"0.0.3","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@an-sdk/react@0.0.3","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://an.dev","dist":{"shasum":"ee006f6c2109841401b0597e53c1718511c3ec5b","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.0.3.tgz","fileCount":10,"integrity":"sha512-m7FixSkBJwgTII5Bfk7Kd0F566RdM3l1mdV721viUMyxwHgRsijKADM84U4kbNTufNa7SIr41FBE8uRRoPnLhg==","signatures":[{"sig":"MEQCIHHZUMy97K4TjwO2sAyI6wARW0FctRSk923Pk46zZhdHAiB4ifQxe7BDHf/BP8kZOd60rCAo2G3ZS9AWftSigYS/vw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":709657},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"6103e729bd08f164e9e89c95f07514c77d601b7c","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify"},"_npmUser":{"name":"bunasq","email":"realsergeybunas@gmail.com"},"_npmVersion":"11.6.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.13.0","dependencies":{"clsx":"^2.1.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.3_1771829982930_0.5935602058827041","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@an-sdk/react","version":"0.0.4","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@an-sdk/react@0.0.4","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"homepage":"https://an.dev","dist":{"shasum":"62df71e7a0933312a0156b9545c396b9281ed082","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.0.4.tgz","fileCount":10,"integrity":"sha512-XnRggPitbAdJcXOQbJK3arNL7U3dR3NpvMPJu3Ddb0rZn8PK8M0hv/xh/3P6rmI6MyawpCflo5sZSrBsq5vGug==","signatures":[{"sig":"MEYCIQDbnYKvvCEuGT3jI8I8xO3WZUUBRb6l40EI+jJPyaM/EQIhAJQdhEpEb3nNwikW2I9bL7eKvCzuixeEYcHlrqy4RLHA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":719538},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"049d710c06e59fb6f207ad19c1a4cce5c9b9303b","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify"},"_npmUser":{"name":"bunasq","email":"realsergeybunas@gmail.com"},"_npmVersion":"11.6.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.13.0","dependencies":{"clsx":"^2.1.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.4_1772170407734_0.6894558281898173","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@an-sdk/react","version":"0.0.5","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@an-sdk/react@0.0.5","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"homepage":"https://an.dev","dist":{"shasum":"ed094e0293f7a8969f6e8b3e4c1b57492bf7e01c","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.0.5.tgz","fileCount":10,"integrity":"sha512-phTd+jC/vXdGxVkhSGBTG0kLfiFr9mjh2YIVxUzHQSCZWd/NUL1jOw+zuPorI91UZHRmCZ6FvERJcaRp4si5ow==","signatures":[{"sig":"MEUCIQD36Qje9VcCGjR4pKq4Qi0wskPPsOIegtj6zt/N4BK0WQIgF20hEqY1HJctx97NyeTO9pKrbhvKe+U1vyEgcV6XVsE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":830406},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"c215fdaca5f6b546b0fe69cfc5e57611f833a48f","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify"},"_npmUser":{"name":"bunasq","email":"realsergeybunas@gmail.com"},"_npmVersion":"11.6.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.13.0","dependencies":{"clsx":"^2.1.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.5_1772237072540_0.03160080469020432","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@an-sdk/react","version":"0.0.6","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@an-sdk/react@0.0.6","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"homepage":"https://an.dev","dist":{"shasum":"72e6b38aaafb0f84b7955a00174e30669cef75a0","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.0.6.tgz","fileCount":53,"integrity":"sha512-r8FpB1cy9GtKoKiZcmbFk+7st344dCNNOqWtCyVhIkvt1JYUbFOItL7I9bIaNsTo1tKDxA6rWMel01Sg4qQMHA==","signatures":[{"sig":"MEYCIQDZr5rx4+mOutOoz0FJnr7dSEzl6k5z3Ol/tBDyPiSK6AIhANtFb/9iYrpeD+pNlTdxr0GMl84kaAlbaa5SBO4OZ90Z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1008581},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"c215fdaca5f6b546b0fe69cfc5e57611f833a48f","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"bunasq","email":"realsergeybunas@gmail.com"},"_npmVersion":"11.6.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"22.13.0","dependencies":{"clsx":"^2.1.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.6_1772238791355_0.8942723524182623","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@an-sdk/react","version":"0.1.2","license":"MIT","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","homepage":"https://an.dev","publishConfig":{"access":"public"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"directories":{"doc":"./docs"},"keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"sideEffects":["./dist/styles.css"],"scripts":{"prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","dev":"tsup --watch","lint":"tsc --noEmit"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","ai":"^5.0.0"},"dependencies":{"motion":"^12.0.0","clsx":"^2.1.0","tailwind-merge":"^2.5.0","react-markdown":"^10.0.0","remark-gfm":"^4.0.0","react-syntax-highlighter":"^15.0.0","lucide-react":"^0.460.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0","react":"^19.0.0","react-dom":"^19.0.0","@ai-sdk/react":"^2.0.0","ai":"^5.0.0","tsup":"^8.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","postcss":"^8.4.0","autoprefixer":"^10.4.0"},"_id":"@an-sdk/react@0.1.2","gitHead":"b98ab5d621c871a7742c4c462dcdd4163d3b3071","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-rHllE13fAtVJKzGOu+CvVWmF6eDmldGtlwovdReSZ62KyBwuwqwXt0CguofswnDzbXlzNpuSjXV2z9gqWO0Msw==","shasum":"5f80dc1d7cee36e8c8dd7e45341b0893996d61aa","tarball":"https://registry.npmjs.org/@an-sdk/react/-/react-0.1.2.tgz","fileCount":76,"unpackedSize":3751478,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDoYB3FcIHa1KaiLP8Q2w7vGtP9YnX6CiC+JR9/PB/w0AiAE0w/H/xCUtyuk3V1lf+r2mJpFXTNynmwKbwshhdnGmw=="}]},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.2_1772571163384_0.34074580258974163"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T02:04:58.545Z","modified":"2026-03-03T20:52:43.754Z","0.0.1":"2026-02-23T02:04:58.770Z","0.1.0":"2026-02-23T04:52:47.723Z","0.1.1":"2026-02-23T05:20:20.995Z","0.0.2":"2026-02-23T05:22:26.690Z","0.0.3":"2026-02-23T06:59:43.119Z","0.0.4":"2026-02-27T05:33:28.003Z","0.0.5":"2026-02-28T00:04:32.715Z","0.0.6":"2026-02-28T00:33:11.599Z","0.1.2":"2026-03-03T20:52:43.617Z"},"license":"MIT","homepage":"https://an.dev","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","maintainers":[{"name":"bunasq","email":"realsergeybunas@gmail.com"},{"name":"danverr","email":"ddmaryakhin@mail.ru"}],"readme":"# @an-sdk/react\n\nReact components for building AI agent chat UIs powered by [AN](https://an.dev). Drop-in chat interface with tool renderers, theming, and full customization.\n\nBuilt on [Vercel AI SDK v5](https://sdk.vercel.ai) — no custom hooks or state management. Just components.\n\n## Install\n\n```bash\nnpm install @an-sdk/react ai @ai-sdk/react\n```\n\n## Quick Start\n\n```tsx\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { AnAgentChat, createAnChat } from \"@an-sdk/react\";\nimport \"@an-sdk/react/styles.css\";\nimport { useMemo } from \"react\";\n\nexport default function Chat() {\n  const chat = useMemo(\n    () =>\n      createAnChat({\n        agent: \"your-agent-slug\",\n        getToken: async () => \"your_an_sk_token\",\n      }),\n    [],\n  );\n\n  const { messages, sendMessage, status, stop, error } = useChat({ chat });\n\n  return (\n    <AnAgentChat\n      messages={messages}\n      onSend={(msg) =>\n        sendMessage({\n          parts: [{ type: \"text\", text: msg.content }],\n        })\n      }\n      status={status}\n      onStop={stop}\n      error={error}\n    />\n  );\n}\n```\n\nThat's it. You get a full chat UI with message rendering, tool visualization, auto-scroll, and streaming — all wired to your AN agent.\n\n## Customization\n\nFour levels of customization, from simple to full control:\n\n### 1. Theme tokens\n\nApply a theme JSON from the [AN Playground](https://an.dev/an/playground):\n\n```tsx\n<AnAgentChat theme={playgroundTheme} colorMode=\"dark\" />\n```\n\n### 2. Class overrides\n\nOverride styles per element:\n\n```tsx\n<AnAgentChat\n  classNames={{\n    root: \"rounded-2xl border\",\n    messageList: \"px-8\",\n    inputBar: \"bg-gray-50\",\n    userMessage: \"bg-blue-100\",\n  }}\n/>\n```\n\n### 3. Slot components\n\nSwap sub-components entirely:\n\n```tsx\n<AnAgentChat\n  slots={{\n    InputBar: MyCustomInput,\n    UserMessage: MyUserBubble,\n    ToolRenderer: MyToolRenderer,\n  }}\n/>\n```\n\n### 4. Individual components\n\nBuild from scratch with individual imports:\n\n```tsx\nimport { MessageList, InputBar, ToolRenderer } from \"@an-sdk/react\";\n```\n\n## CSS\n\nImport the stylesheet once in your app:\n\n```tsx\nimport \"@an-sdk/react/styles.css\";\n```\n\nNo Tailwind peer dependency required — CSS is pre-compiled. All elements have stable `an-*` class names for custom styling:\n\n```css\n.an-root { }\n.an-message-list { }\n.an-user-message { }\n.an-assistant-message { }\n.an-input-bar { }\n.an-send-button { }\n.an-tool-bash { }\n.an-tool-edit { }\n/* ... */\n```\n\n## API Reference\n\n### `createAnChat(options)`\n\nCreates an AI SDK `Chat` instance pointed at the AN Relay API.\n\n```ts\ncreateAnChat({\n  agent: string;           // Agent slug from your dashboard\n  getToken: () => Promise<string>;  // Returns your an_sk_ API key\n  apiUrl?: string;         // Default: \"https://relay.an.dev\"\n  projectId?: string;      // Session persistence key\n  onFinish?: () => void;\n  onError?: (error: Error) => void;\n})\n```\n\nReturns a standard `Chat<UIMessage>` — pass it to `useChat({ chat })`.\n\n### `<AnAgentChat />`\n\nDrop-in chat component.\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `messages` | `UIMessage[]` | From `useChat()` |\n| `onSend` | `(msg) => void` | Send handler |\n| `status` | `ChatStatus` | `\"ready\" \\| \"submitted\" \\| \"streaming\" \\| \"error\"` |\n| `onStop` | `() => void` | Stop generation |\n| `error` | `Error` | Error to display |\n| `theme` | `AnTheme` | Theme from playground |\n| `colorMode` | `\"light\" \\| \"dark\" \\| \"auto\"` | Color mode |\n| `classNames` | `Partial<AnClassNames>` | Per-element CSS overrides |\n| `slots` | `Partial<AnSlots>` | Component swapping |\n| `className` | `string` | Root element class |\n| `style` | `CSSProperties` | Root element style |\n| `modelSelector` | `{ models, activeModelId?, onModelChange? }` | Model picker (for custom backends) |\n| `attachments` | `{ onAttach?, images?, files? }` | File attachment support |\n\n### `applyTheme(element, theme, colorMode?)`\n\nManually inject CSS variables from a playground theme JSON.\n\n### Components\n\n| Component | Description |\n|-----------|-------------|\n| `MessageList` | Auto-scrolling message container with grouping |\n| `UserMessage` | User message bubble |\n| `AssistantMessage` | Assistant response with parts routing |\n| `StreamingMarkdown` | Markdown renderer with syntax highlighting |\n| `InputBar` | Text input with send/stop buttons |\n| `MessageActions` | Copy button |\n| `ToolRenderer` | Routes tool parts to the correct component |\n\n### Tool Components\n\n| Component | Renders |\n|-----------|---------|\n| `BashTool` | Terminal commands with output |\n| `EditTool` | File edits with diff display |\n| `WriteTool` | File creation |\n| `SearchTool` | Web search results |\n| `TodoTool` | Task checklists |\n| `PlanTool` | Step-by-step plans |\n| `TaskTool` | Sub-agent tasks |\n| `McpTool` | MCP protocol calls |\n| `ThinkingTool` | Reasoning/thinking indicator |\n| `GenericTool` | Fallback for unknown tools |\n\n## Theme Type\n\n```ts\ninterface AnTheme {\n  theme: Record<string, string>;  // Shared: font, spacing, accent\n  light: Record<string, string>;  // Light mode CSS vars\n  dark: Record<string, string>;   // Dark mode CSS vars\n}\n```\n\n## Model Selection\n\nThe SDK exports pre-defined model constants for convenience:\n\n```ts\nimport { AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from \"@an-sdk/react\"\nimport type { AnModelOption, AnClaudeModelId } from \"@an-sdk/react\"\n```\n\n> **Note:** When using `createAnChat()` with the AN Relay, the model is set server-side in the agent config. The `modelSelector` prop is for building UIs with custom backends.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}