Templates
Chat Shell
The simplest working chat shell: a sidebar, an API key empty state with three steps, a composer and replies that stream in word by word.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { ChatShell } from "@/components/miyuki-ui/chat-shell";
import { people } from "@/registry/lib/data";
const aiko = people[0];
export default function ChatShellDemo() {
return <ChatShell user={{ name: aiko.name, email: aiko.email, avatar: aiko.avatar }} />;
}Install
npx shadcn@latest add @miyuki-ui/chat-shellThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
ChatShell
Prop
Type
Avalanche centre
A regional avalanche bulletin site: region tabs, today's danger level with its rose and problems, a map of zones tinted by level, a seven-day history and a searchable archive.
Coding Assistant
A chat workspace for a coding assistant, with threads grouped by day, a pinned composer and a side panel that reviews changed files.