# AI UI Kit

> AI UI Kit is an open-source UI kit for agent products built on Mantine: the chat, tool cards and composer, and the screens around them (settings, MCP servers, agents, skills, permissions, hooks, memory, sessions, background tasks, diff review), plus a theme provider and an embeddable launcher.

- Package: `@sinups/ai-kit` 0.2.0
- Install: `npm install @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react`
- Peer dependencies: `@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
- Styles: import `@mantine/core/styles.css` and `@sinups/ai-kit/styles.css` once at the app root.
- Full docs in one file: https://sinups.github.io/ai-kit/llms-full.txt

## Getting Started

- [Introduction](https://sinups.github.io/ai-kit/docs): AI UI Kit is an open-source UI kit for agent products built on Mantine: the chat, tool cards and composer, and the screens around them (settings, MCP servers, agents, skills, permissions, hooks, memory, sessions, background tasks, diff review), plus a theme provider and an embeddable launcher.
- [Installation](https://sinups.github.io/ai-kit/docs/installation): Install AI UI Kit from npm. Prerequisites, stylesheet and provider setup, and your first usage snippet.
- [Architecture](https://sinups.github.io/ai-kit/docs/architecture): How AI UI Kit is organized: layers, the controlled component contract, async actions, data states, width-adaptive layout, and the primitives every domain module is built from.
- [Use cases](https://sinups.github.io/ai-kit/docs/use-cases): Realistic agent scenarios built with AI UI Kit: coding-agent-style coding agents with plans and diffs, internal support workflows that issue refunds, lightweight support chat widgets, and engineering rollout plans with tool calls.
- [MCP](https://sinups.github.io/ai-kit/docs/mcp): Use AI UI Kit docs from your AI assistant via the Model Context Protocol. Configure any MCP client to read the component catalog and examples.
- [Skills](https://sinups.github.io/ai-kit/docs/skills): Give AI coding assistants project-aware context about AI UI Kit so they install, compose, and customise components using the right APIs and patterns.

## Guides

- [What you can build](https://sinups.github.io/ai-kit/docs/what-you-can-build): Live recipes built from AI UI Kit components: full-page chat, chat with a history sidebar, chat with an inspector, a settings screen, an embedded widget and an onboarding wizard.
- [Theming](https://sinups.github.io/ai-kit/docs/theming): Theme the kit with AiKitProvider: accent, radius, density and color scheme settings, a customizer panel, --ae-* tokens and nesting inside a host MantineProvider.
- [Layouts](https://sinups.github.io/ai-kit/docs/layouts): Compose full-page chat, chat with a history sidebar, chat with an inspector, settings pages and an embedded widget from kit components.
- [Embedding the launcher](https://sinups.github.io/ai-kit/docs/launcher): Embed a floating chat launcher in a React app or on any page with mountChatLauncher and Shadow DOM isolation.
- [Bundle size](https://sinups.github.io/ai-kit/docs/bundle-size): How much JavaScript and CSS each AI UI Kit component adds to your app, gzip, with per-component stylesheets and tree-shaking.
- [What's new](https://sinups.github.io/ai-kit/docs/whats-new): Components, props, theming and testing infrastructure added in this release, and the deprecated AgentChat emptySuggestionsPosition prop.

## Chat

- [AgentChat](https://sinups.github.io/ai-kit/docs/agent-chat): Create a full chat surface with messages, status, and send/stop handlers.
- [MessageList](https://sinups.github.io/ai-kit/docs/message-list): Render the full transcript from ChatMessage[].
- [UserMessage](https://sinups.github.io/ai-kit/docs/user-message): Render a single user bubble.
- [ErrorMessage](https://sinups.github.io/ai-kit/docs/error-message): Render a failed assistant turn.
- [Markdown](https://sinups.github.io/ai-kit/docs/markdown): Render streaming markdown with headings, lists, tables, blockquotes, and code fences.
- [CodeBlock](https://sinups.github.io/ai-kit/docs/code-block): A code block with a header (the `title`, or the language), a copy button, optional line numbers and optional collapsing.
- [ImageLightbox](https://sinups.github.io/ai-kit/docs/image-lightbox): A fullscreen image viewer rendered into `document.body`.
- [TextShimmer](https://sinups.github.io/ai-kit/docs/text-shimmer): Render shimmering status text.
- [SpiralLoader](https://sinups.github.io/ai-kit/docs/spiral-loader): Render the spiral loader.
- [AgentStatus](https://sinups.github.io/ai-kit/docs/agent-status): Show that the agent is working: a shimmering label, live elapsed time and received tokens.
- [ContextUsage](https://sinups.github.io/ai-kit/docs/context-usage): Show how full the context window is.
- [ContextBreakdown](https://sinups.github.io/ai-kit/docs/context-breakdown): Show what fills the context window, group by group: a stacked usage bar, one row per group with tokens and percent, and optional suggestions to free space.
- [CompactBoundary](https://sinups.github.io/ai-kit/docs/compact-boundary): Mark the place where earlier history was replaced by a summary.
- [TurnSummary](https://sinups.github.io/ai-kit/docs/turn-summary): Close a turn with one muted line: how long the agent worked, tokens used (against a budget when `tokenBudget` is set) and how many background tasks are still running.
- [ContextEventRow](https://sinups.github.io/ai-kit/docs/context-event-row): Record something the agent pulled into its context: a file it read, a directory it listed, a memory file, an MCP resource, a skill, or diagnostics.
- [HookActivity](https://sinups.github.io/ai-kit/docs/hook-activity): Show the hooks that ran for an event, such as `PreToolUse`, `PostToolUse` or `Stop`.
- [TranscriptSearch](https://sinups.github.io/ai-kit/docs/transcript-search): A find bar for a conversation: query input, a `3/12` counter, previous and next buttons and close.
- [IdleReturnPrompt](https://sinups.github.io/ai-kit/docs/idle-return-prompt): Ask a user who comes back to a long conversation whether to continue it or start fresh: `Welcome back, 3h since your last message.
- [SpendThresholdNotice](https://sinups.github.io/ai-kit/docs/spend-threshold-notice): Tell the user that spending in the session passed a threshold: `You've spent $20.40 in this session.
- [MessageActions](https://sinups.github.io/ai-kit/docs/message-actions): Add a toolbar under chat messages: copy for every message, edit and rewind for user messages, retry, branch and thumbs up or down for assistant messages.
- [EditMessageComposer](https://sinups.github.io/ai-kit/docs/edit-message-composer): Edit a sent user message in place.
- [FeedbackForm](https://sinups.github.io/ai-kit/docs/feedback-form): Collect details for a rating.
- [PlanApproval](https://sinups.github.io/ai-kit/docs/plan-approval): Review a plan before the agent starts working, for example after plan mode.
- [RewindDialog](https://sinups.github.io/ai-kit/docs/rewind-dialog): Return the conversation to an earlier user message.
- [ToolResultNotice](https://sinups.github.io/ai-kit/docs/tool-result-notice): Leave a compact trace of a tool call that did not complete: rejected by the user, cancelled, failed or interrupted.
- [MemoryNotice](https://sinups.github.io/ai-kit/docs/memory-notice): Tell the user that the agent saved something to memory.
- [CommandChip](https://sinups.github.io/ai-kit/docs/command-chip): Show a slash command invocation as a badge followed by its arguments, with the description in a tooltip.

## Tools

- [ToolRenderer](https://sinups.github.io/ai-kit/docs/tool-renderer): Render one tool part (AI SDK v5 shape: `{ type, toolCallId, state, input, output }`) with the matching card: `tool-Bash` → BashTool, `tool-Edit` and `tool-Write` → EditTool, `tool-Grep`, `tool-Glob` and `tool-WebSearch` → SearchTool, `tool-TodoWrite` → TodoTool, `tool-PlanWrite` → PlanTool, `tool-Question` → QuestionTool, `tool-Task` and `tool-Agent` → ToolGroup with `nestedTools`, `tool-Thinking` → ThinkingTool, `tool-mcp__<server>__<tool>` → McpTool.
- [BashTool](https://sinups.github.io/ai-kit/docs/bash-tool): Render a command tool card.
- [EditTool](https://sinups.github.io/ai-kit/docs/edit-tool): Render a diff card for file edits.
- [SearchTool](https://sinups.github.io/ai-kit/docs/search-tool): Render grouped search results.
- [TodoTool](https://sinups.github.io/ai-kit/docs/todo-tool): Render task list changes from input.todos, optionally diffed against output.oldTodos.
- [PlanTool](https://sinups.github.io/ai-kit/docs/plan-tool): Display a plan title and summary with expand/collapse.
- [ToolGroup](https://sinups.github.io/ai-kit/docs/tool-group): Summarize task runs with optional nested tools.
- [SubagentTool](https://sinups.github.io/ai-kit/docs/subagent-tool): Render a task with nested tool calls.
- [QuestionTool](https://sinups.github.io/ai-kit/docs/question-tool): Support single, multi, and free-text questions.
- [McpTool](https://sinups.github.io/ai-kit/docs/mcp-tool): Render MCP tool calls with expandable output.
- [ThinkingTool](https://sinups.github.io/ai-kit/docs/thinking-tool): Render assistant reasoning in a collapsible row.
- [GenericTool](https://sinups.github.io/ai-kit/docs/generic-tool): Render a simple tool row for custom tools.
- [ToolApprovalFooter](https://sinups.github.io/ai-kit/docs/tool-approval-footer): Ask the user to confirm a tool call.
- [ElicitationForm](https://sinups.github.io/ai-kit/docs/elicitation-form): Answer MCP elicitation requests.
- [ShellOutput](https://sinups.github.io/ai-kit/docs/shell-output): Terminal output as a log: ANSI colors and styles, clickable links, pretty-printed JSON (when the whole output is a JSON object or array and has no ANSI codes), a copy button that strips ANSI codes, and a meta line with exit code (green for 0, red otherwise), duration, timeout and size.
- [DiffView](https://sinups.github.io/ai-kit/docs/diff-view): A unified line diff of two strings with line numbers, add and remove gutter markers and, for replaced lines, highlighted changed words (`wordHighlight`, off by default).
- [ActionRow](https://sinups.github.io/ai-kit/docs/action-row): A row for scripted timelines rather than live tool parts.
- [ToolRowBase](https://sinups.github.io/ai-kit/docs/tool-row-base): The single-line row most tool cards are built on: a 12px icon, a label that shimmers while `isAnimating` (`shimmerLabel`) and settles to `completeLabel`, a muted truncated `detail`, and optional `trailingContent` such as elapsed time.
- [FileExtIcon](https://sinups.github.io/ai-kit/docs/file-ext-icon): Small language icons for file names: TypeScript (`ts`, `tsx`), JavaScript (`js`, `jsx`, `mjs`, `cjs`) and JSON (`json`, `jsonc`).

## Input

- [InputBar](https://sinups.github.io/ai-kit/docs/input-bar): Collect prompts and attachments in the composer.
- [Suggestions](https://sinups.github.io/ai-kit/docs/suggestions): Show quick prompt chips and write the selected suggestion into InputBar for fast message drafting.
- [ModelPicker](https://sinups.github.io/ai-kit/docs/model-picker): Standalone model picker.
- [ModeSelector](https://sinups.github.io/ai-kit/docs/mode-selector): Standalone mode selector: agent mode, plan mode, or any custom set.
- [SendButton](https://sinups.github.io/ai-kit/docs/send-button): Render the send/stop control.
- [AttachmentButton](https://sinups.github.io/ai-kit/docs/attachment-button): Render the round plus attachment trigger used by InputBar.
- [FileAttachment](https://sinups.github.io/ai-kit/docs/file-attachment): Render a file/image chip.
- [PastedTextAttachment](https://sinups.github.io/ai-kit/docs/pasted-text-attachment): A chip for a large paste that was collapsed out of the composer.
- [PromptHistorySearch](https://sinups.github.io/ai-kit/docs/prompt-history-search): A fuzzy search dialog over prompts the user already sent.
- [InputPopover](https://sinups.github.io/ai-kit/docs/input-popover): A thin wrapper over Mantine Popover with the dropdown look of the composer pickers (ModelPicker, ModeSelector).
- [QuestionPrompt](https://sinups.github.io/ai-kit/docs/question-prompt): The form for one question the agent asks the user.

## Primitives

- [Wizard](https://sinups.github.io/ai-kit/docs/wizard): Use Wizard for multi-step flows: adding a server, creating a rule, configuring an agent.
- [ConfirmDialog](https://sinups.github.io/ai-kit/docs/confirm-dialog): Ask for confirmation before a destructive or irreversible action.
- [SettingsLayout](https://sinups.github.io/ai-kit/docs/settings-layout): Build a settings screen from three pieces.
- [SettingsModal](https://sinups.github.io/ai-kit/docs/settings-modal): Use SettingsModal when settings open over the current screen instead of on their own route.
- [MasterDetail](https://sinups.github.io/ai-kit/docs/master-detail): Show a list and the details of the selected item.
- [EntityList](https://sinups.github.io/ai-kit/docs/entity-list): Render any collection of entities (servers, agents, skills, sessions) with the four data states: `loading` skeleton rows, `error` alert with retry, `empty` state with a call to action, and data.
- [CommandPalette](https://sinups.github.io/ai-kit/docs/command-palette): Give power users one place to run commands.
- [StatusBadge](https://sinups.github.io/ai-kit/docs/status-badge): Show the state of a server, agent, task or tool with one shared vocabulary: `idle`, `pending`, `running`, `success`, `warning`, `error`, `disabled` and `needs-auth`.
- [ShortcutHint](https://sinups.github.io/ai-kit/docs/shortcut-hint): Render a keyboard shortcut with Mantine `Kbd`.
- [KeyValueEditor](https://sinups.github.io/ai-kit/docs/key-value-editor): Edit environment variables or HTTP headers.
- [SchemaView](https://sinups.github.io/ai-kit/docs/schema-view): Show a JSON Schema, such as an MCP tool `inputSchema`, as a parameter reference.
- [ValidationErrorsList](https://sinups.github.io/ai-kit/docs/validation-errors-list): Show the problems found while validating settings files.
- [InvalidSettingsNotice](https://sinups.github.io/ai-kit/docs/invalid-settings-notice): Tell the user that a settings file failed validation and is ignored, and offer a way out.

## Agents & skills

- [AgentsSettingsPanel](https://sinups.github.io/ai-kit/docs/agents-settings-panel): Drop in a complete subagent settings screen built on `MasterDetail`: `AgentList` beside `AgentDetail` from 720px of width, one pane with back navigation below.
- [AgentList](https://sinups.github.io/ai-kit/docs/agent-list): List subagent definitions with avatar, description and model, grouped by source (built-in, user, project, plugin) unless `groupBySource` is false.
- [AgentDetail](https://sinups.github.io/ai-kit/docs/agent-detail): Show one subagent: avatar, name, source and when to use it, the configuration (model, max turns, tools with a summary that expands into the list, disallowed tools, skills, last update) and the system prompt rendered as Markdown.
- [AgentEditor](https://sinups.github.io/ai-kit/docs/agent-editor): Edit or create a subagent in one form: identity (display name, name, when to use), instructions (system prompt), tools and disallowed tools with `ToolSelector`, and model and appearance (model, max turns, skills, color).
- [AgentCreateWizard](https://sinups.github.io/ai-kit/docs/agent-create-wizard): Create a subagent step by step in a modal: Method, Identity, Prompt, Tools and Model, then a review.
- [AgentIdentityFields](https://sinups.github.io/ai-kit/docs/agent-identity-fields): The field groups that AgentEditor and AgentCreateWizard are built from, exported for your own agent forms.
- [ToolSelector](https://sinups.github.io/ai-kit/docs/tool-selector): Pick the tools an agent may call.
- [AgentAvatar](https://sinups.github.io/ai-kit/docs/agent-avatar): Show an agent in lists, headers and chat.
- [SkillsSettingsPanel](https://sinups.github.io/ai-kit/docs/skills-settings-panel): Manage agent skills in one screen built on `MasterDetail`: `SkillCatalog` beside `SkillDetail` from 720px of width, one pane with a back button below.
- [SkillCatalog](https://sinups.github.io/ai-kit/docs/skill-catalog): Browse skills with search and a source filter.
- [SkillDetail](https://sinups.github.io/ai-kit/docs/skill-detail): Show one skill: status, description, source, version, author, path, update date and usage count, the tools it may use without asking, and its Markdown instructions.
- [SkillEditor](https://sinups.github.io/ai-kit/docs/skill-editor): Create or edit a skill: a slug name checked against `existingNames`, description, tags, allowed tools and Markdown instructions with Write and Preview tabs.
- [SkillPicker](https://sinups.github.io/ai-kit/docs/skill-picker): Pick several skills by id in a form, for example the skills loaded for an agent.

## MCP

- [McpSettingsPanel](https://sinups.github.io/ai-kit/docs/mcp-settings-panel): Drop in a complete MCP settings screen.
- [McpServerList](https://sinups.github.io/ai-kit/docs/mcp-server-list): List configured MCP servers with their transport, status, command or URL, connection error and tool count.
- [McpServerDetail](https://sinups.github.io/ai-kit/docs/mcp-server-detail): Show one MCP server: name, transport, scope, version and status with Authenticate, Reconnect and Enable/Disable buttons that show pending state.
- [McpToolDetail](https://sinups.github.io/ai-kit/docs/mcp-tool-detail): Document one MCP tool from `tools/list`: title and name, description, behavior annotations with explanations, and `SchemaView` tables for `inputSchema` and `outputSchema`.
- [McpServerWizard](https://sinups.github.io/ai-kit/docs/mcp-server-wizard): Add or edit an MCP server in four steps: Basics (unique name, scope, transport), Connection (command and arguments for stdio, validated URL for HTTP and SSE), Environment or Headers with secrets, and Review.
- [McpImportDialog](https://sinups.github.io/ai-kit/docs/mcp-import-dialog): Import MCP servers found in another client's configuration.
- [McpDiscoveredServers](https://sinups.github.io/ai-kit/docs/mcp-discovered-servers): Ask the user to approve MCP servers that a project configuration adds, before any of them runs.
- [McpConfigWarnings](https://sinups.github.io/ai-kit/docs/mcp-config-warnings): List problems found while reading MCP configuration files, usually above McpServerList.
- [McpToolAnnotationBadges](https://sinups.github.io/ai-kit/docs/mcp-tool-annotation-badges): Show the behavior hints an MCP server declares for a tool: read-only (teal), destructive (red), idempotent (gray) and open world (blue), mapped from `readOnlyHint`, `destructiveHint`, `idempotentHint` and `openWorldHint`.
- [McpTransportIcon](https://sinups.github.io/ai-kit/docs/mcp-transport-icon): Icon for an MCP transport: a terminal for `stdio`, a globe for `http` and a broadcast icon for `sse`.

## Permissions & hooks

- [PermissionRulesPanel](https://sinups.github.io/ai-kit/docs/permission-rules-panel): Manage tool permission rules like `Bash(npm run test:*)`.
- [AddPermissionRuleWizard](https://sinups.github.io/ai-kit/docs/add-permission-rule-wizard): Create or edit one permission rule in a modal: behavior, the rule itself with tool suggestions and examples, and the scope it is stored in.
- [PermissionRuleInput](https://sinups.github.io/ai-kit/docs/permission-rule-input): Type a permission rule in the `Tool(specifier)` syntax.
- [PermissionModeSelector](https://sinups.github.io/ai-kit/docs/permission-mode-selector): Switch the agent permission mode: Default, Accept edits, Plan or Bypass.
- [HooksPanel](https://sinups.github.io/ai-kit/docs/hooks-panel): Configure lifecycle hooks such as PreToolUse, PostToolUse, SessionStart or Stop.
- [HookWizard](https://sinups.github.io/ai-kit/docs/hook-wizard): Create or edit a hook in a modal: pick the event, a tool matcher for tool events, a shell command or an LLM prompt with a timeout, and the scope.

## Sessions & tasks

- [SessionList](https://sinups.github.io/ai-kit/docs/session-list): List past conversations for a history sidebar or page.
- [SessionPreview](https://sinups.github.io/ai-kit/docs/session-preview): Preview a past conversation before resuming it: the header shows the title, relative time, model, branch, token count and cost when present, followed by the first `maxMessages` messages (6 by default).
- [ExportDialog](https://sinups.github.io/ai-kit/docs/export-dialog): Export a conversation as Markdown, JSON or plain text.
- [BackgroundTasksPanel](https://sinups.github.io/ai-kit/docs/background-tasks-panel): Monitor background work of an agent session: shell commands, subagents, remote jobs and workflows.
- [TaskList](https://sinups.github.io/ai-kit/docs/task-list): List background tasks grouped into Running, Queued and Finished, with kind icon, status, live elapsed time, last activity, progress and subtask count.
- [TaskDetail](https://sinups.github.io/ai-kit/docs/task-detail): Show one background task: header with kind, status, elapsed time, tokens and tool uses, progress, the failure message, and tabs for the output log and subtasks.
- [AgentTree](https://sinups.github.io/ai-kit/docs/agent-tree): Show an agent and the subagents and commands it started as a tree, with status, last activity and live elapsed time on every node.
- [TaskStatusPill](https://sinups.github.io/ai-kit/docs/task-status-pill): Summarize background tasks in a status bar or header, for example `2 running · 1 failed`.
- [TaskElapsed](https://sinups.github.io/ai-kit/docs/task-elapsed): Small pieces of task metadata for your own task rows.
- [AgentMessage](https://sinups.github.io/ai-kit/docs/agent-message): Show a message that one agent sent to another in a multi-agent run, for example in TaskDetail or in a team activity feed.

## Diff

- [DiffReview](https://sinups.github.io/ai-kit/docs/diff-review): Review the files an agent changed before applying them.
- [DiffFileList](https://sinups.github.io/ai-kit/docs/diff-file-list): List changed files with their status (added, modified, deleted, renamed), added and removed line counts, a viewed check and the accept or reject decision.
- [DiffFileView](https://sinups.github.io/ai-kit/docs/diff-file-view): Show the diff of one file as unified or split rows with word-level highlights of what changed inside a line.
- [DiffStats](https://sinups.github.io/ai-kit/docs/diff-stats): Building blocks of the diff file rows, exported for summaries outside DiffReview, such as a turn summary or a commit dialog.

## Settings

- [ModelSettingsPanel](https://sinups.github.io/ai-kit/docs/model-settings-panel): Assemble a model settings screen in `SettingsLayout`: Model (model select and `EffortSelector`), Output style (`OutputStylePicker`), Usage (`UsagePanel`) and Status (`StatusPanel`).
- [EffortSelector](https://sinups.github.io/ai-kit/docs/effort-selector): Pick the reasoning effort: Low, Medium, High or Max by default, or your own `levels`.
- [OutputStylePicker](https://sinups.github.io/ai-kit/docs/output-style-picker): Choose how the agent writes its answers.
- [UsagePanel](https://sinups.github.io/ai-kit/docs/usage-panel): Show token and cost usage for a day, week or month: period totals, plan limits with progress bars and reset countdowns, usage split by model and usage per day.
- [StatusPanel](https://sinups.github.io/ai-kit/docs/status-panel): Summarize the agent environment, like a `/status` command: version, model, account and organization, working directory, MCP servers counted by status, loaded memory files and context window usage with `ContextUsage`.
- [MemoryPanel](https://sinups.github.io/ai-kit/docs/memory-panel): Let the user read and edit the instruction files the agent loads as memory.
- [MemoryFileDetail](https://sinups.github.io/ai-kit/docs/memory-file-detail): One memory file on its own: file name, scope badge, path, relative update time and the content rendered as Markdown.
- [CommandsHelp](https://sinups.github.io/ai-kit/docs/commands-help): Show a reference of slash commands and keyboard shortcuts with fuzzy search and groups.
- [AiKitProvider](https://sinups.github.io/ai-kit/docs/ai-kit-provider): Apply the kit theme to a subtree.
- [AiKitThemeCustomizer](https://sinups.github.io/ai-kit/docs/ai-kit-theme-customizer): Appearance settings for end users: Color (accent swatches), Radius, Density and Mode (light, dark, auto), plus a Reset button.
- [ChatLauncher](https://sinups.github.io/ai-kit/docs/chat-launcher): A floating chat button in a corner of the page that opens a chat panel.

## Utilities

- [Hooks and utilities](https://sinups.github.io/ai-kit/docs/utilities): Every hook and pure function exported by @sinups/ai-kit, grouped by module, with signatures.

## Source

- npm: https://www.npmjs.com/package/@sinups/ai-kit
- Repository: https://github.com/sinups/ai-kit
- A fork of Agent Elements by 21st.dev (MIT).