- Follows your Mantine theme
- Colors, radius, fonts and color scheme come from the theme you already have.
- Tree-shakable
- Import one component and ship only that. The Wizard adds about 4 KB.
- Tested
- Storybook interaction tests and visual regression checks on every change.
Every surface an agent needs.
Each module works alone or inside AgentChat. These are the real components, rendered live.
Streaming markdown, tool cards, plans and questions.
Unified and split diffs, per-file decisions.
History, background jobs and progress.
Connect, authorize and inspect servers.
Approvals, modes and saved rules.
Accent, radius and density controls.
Set up with your agent.
Paste the prompt into your coding agent inside your project. It reads the docs, installs the kit and connects AgentChat to the chat state you already have.
Set up AI UI Kit (@sinups/ai-kit) in this project.
1. Read https://sinups.github.io/ai-kit/llms.txt. For props and examples read https://sinups.github.io/ai-kit/llms-full.txt, and use only the components, props and exports listed there.
2. Install the package and its peers with the project's package manager (npm: `npm install @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react`). Peer ranges: @mantine/core ^9.4.0, @mantine/hooks ^9.4.0, @tabler/icons-react ^3.0.0, react ^19.2.0, react-dom ^19.2.0. If an installed peer is older, ask before upgrading it.
3. Import the stylesheets once at the app root: `@mantine/core/styles.css`, then `@sinups/ai-kit/styles.css`.
4. Render the kit inside `MantineProvider`, reusing the app's provider if it has one. Wrap the chat in `AiKitProvider` to apply the kit theme; without it the kit follows the Mantine theme.
5. Render `AgentChat` on the chat screen and connect it to the chat state the project already has: `messages`, `status` (`'submitted' | 'streaming' | 'ready' | 'error'`), `onSend` and `onStop`. The kit makes no network requests, so keep the existing transport. With the AI SDK, pass `messages` and `status` from `useChat()` as they are and map `onSend` to `({ content }) => sendMessage({ text: content })`.
6. Run the project's type check and build, and fix what they report.