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.
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 { CodingAssistant } from "@/components/miyuki-ui/coding-assistant";
import { people } from "@/registry/lib/data";
const yuna = people[2];
export default function CodingAssistantDemo() {
return <CodingAssistant user={{ name: yuna.name, email: yuna.email, avatar: yuna.avatar }} />;
}Install
npx shadcn@latest add @miyuki-ui/coding-assistantThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
CodingAssistant
Prop
Type
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.
Field journal
An editorial journal with a masthead, a front page of one lead story, four smaller stories and an archive, and an article view with a post-town rail, margin notes, brush annotations, a pull quote and an image pair.