simple-aisimple-ai
GitHubGitHub

Installation

Add simple-ai to a shadcn project.

Prerequisites

Start from a shadcn/ui project with the Base UI style. Then add examples. The source is yours.

CLI

npx shadcn@latest add @simple-ai/chat-page

chat-page is the complete chat. The CLI also pulls in the chat input, tool rows, thinking, and the work fold, plus the page layout. It also installs shadcn sidebar, message, bubble, attachment, and message-scroller.

The page UI lands at src/features/assistant/page.tsx (or features/assistant/page.tsx if the app has no src). Wire a route to it:

// Next.js App Router — app/assistant/page.tsx
export { default } from "@/features/assistant/page";
// TanStack Start — src/routes/assistant.tsx
import { createFileRoute } from "@tanstack/react-router";
import ChatPage from "@/features/assistant/page";

export const Route = createFileRoute("/assistant")({
  component: ChatPage,
});

chat-page ships a mocked transport, so the gallery and a fresh install work without a model. Point a live transport at your own API when you have one.

Pieces

If you only want a piece, add chat input, tool, or the work fold:

npx shadcn@latest add @simple-ai/chat-input
npx shadcn@latest add @simple-ai/tool
npx shadcn@latest add @simple-ai/worked

Hosted registry

If @simple-ai is not in the public directory yet, add this to components.json:

{
  "registries": {
    "@simple-ai": "https://www.simple-ai.dev/r/{name}.json"
  }
}