Installation

AI UI Kit is a regular npm package. Install it next to @mantine/core, import the stylesheet once, and every component is available from the package root.

Prerequisites
  • Node 18+
  • React 19.2+
  • Mantine 9.4+ (@mantine/core and @mantine/hooks)
  • @tabler/icons-react 3

No Tailwind, no shadcn, no path aliases. If your app already uses Mantine you are ready to go.

Install the package

One package contains the whole library: chat surface, composer, tool cards and streaming states. Tree-shaking keeps only what you import.

$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Styles and provider

Import the Mantine stylesheet and the package stylesheet at the root of your application:

import "@mantine/core/styles.css";
import "@sinups/ai-kit/styles.css";

If you use a few components, import only their styles instead, the same way as @mantine/core/styles/Button.css. styles/base.css holds the --ae-* tokens and is required once. Each component file already includes the styles of the components it renders, so one import per component you use is enough:

import "@mantine/core/styles.css";
import "@sinups/ai-kit/styles/base.css";
import "@sinups/ai-kit/styles/Wizard.css";
import "@sinups/ai-kit/styles/ChatLauncher.css";

With cascade layers, import styles.layer.css, which puts everything inside @layer mantine, or put per-component files into a layer yourself: @import "@sinups/ai-kit/styles/Wizard.css" layer(ai-kit);. Sizes of JavaScript and styles per component are on Bundle size.

Components render inside MantineProvider and follow its color scheme. Light and dark mode work out of the box:

import { MantineProvider } from "@mantine/core";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
}

All colors, radii and sizes derive from Mantine CSS variables. Override the --ae-* custom properties on any ancestor to restyle a chat instance.

To give the stock Mantine components inside kit screens the kit look, and to offer accent, radius and density settings, wrap those screens in AiKitProvider inside your MantineProvider. See Theming.

Usage

Import components from the package root:

"use client";

import { AgentChat } from "@sinups/ai-kit";
import type { ChatMessage } from "@sinups/ai-kit";

const messages: ChatMessage[] = [
  {
    id: "msg-1",
    role: "assistant",
    parts: [{ type: "text", text: "Welcome to AI UI Kit." }],
  },
];

export default function App() {
  return (
    <div style={{ height: 600 }}>
      <AgentChat
        messages={messages}
        status="ready"
        onSend={() => {}}
        onStop={() => {}}
      />
    </div>
  );
}

Messages are structurally compatible with UIMessage from the Vercel AI SDK, so useChat output can be passed as is:

"use client";

import { AgentChat } from "@sinups/ai-kit";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, status, sendMessage, stop } = useChat();

  return (
    <AgentChat
      messages={messages}
      status={status}
      onSend={({ content }) => sendMessage({ text: content })}
      onStop={stop}
    />
  );
}

Head to AgentChat for the full prop reference, or pick individual pieces from the sidebar.