Migrate from prompt-kit

prompt-kit and chatcn are both shadcn registries, so the move is mostly a rename. chatcn files install under components/ui/chatcn/, which means both kits can share a project while you replace one screen at a time. The larger differences are behavioral: chatcn components handle tool states and approvals, read AI SDK message parts directly, and keep motion to a short, written list.

How they differ

• Base UI and Radix. chatcn serves both from the same URL through the {style} placeholder in components.json, so a Base UI project does not ship a second primitive layer.
• Message parts in, components out. Pass AI SDK UIMessage parts to MessageParts, or map one tool part with toolCallPropsFromPart. Approvals, denials, errors and cancelled calls each have a designed state.
• No typewriter or bouncing dots. Streaming text appears as it arrives. Markdown has an optional cadence that evens out bursts without per word effects, and pending states use a delayed Thinking label instead of a dots loader.
• Composer details built in. PromptInput never sends while an IME is composing, turns Send into Stop in the same footprint, and takes files from paste, drop and the attach button.

Component map

Blocks

A message, rewritten

A typical prompt-kit message maps text parts to Markdown and tool parts to Tool. In chatcn, MessageParts walks the parts for you, in order, with reasoning, sources, files and the thinking gap between steps.

import type { UIMessage } from "ai"
import { Markdown } from "@/components/ui/chatcn/markdown"
import { Message, MessageContent } from "@/components/ui/chatcn/message"
import { MessageActionCopy, MessageActions } from "@/components/ui/chatcn/message-actions"
import { MessageParts } from "@/components/ui/chatcn/message-parts"
import { toChatcnMessages } from "@/lib/chatcn-ai-sdk"
import type { ChatcnActions, ChatcnMessage, ChatcnTextPart } from "@/lib/chatcn-types"

const textOf = (m: ChatcnMessage) =>
  m.parts.map((p) => (p.type === "text" ? (p as ChatcnTextPart).text : "")).join("")

export function ChatMessage({
  message,
  streaming,
  actions,
}: {
  message: UIMessage
  streaming: boolean
  actions: ChatcnActions
}) {
  const [chatcn] = toChatcnMessages([message])
  if (!chatcn) return null
  return (
    <Message from={chatcn.role} state={streaming ? "streaming" : "done"}>
      <MessageContent>
        <MessageParts
          message={chatcn}
          streaming={streaming}
          renderText={(text, ctx) => <Markdown streaming={ctx.streaming}>{text}</Markdown>}
          toolProps={() => ({
            onApprove: (id, scope) => actions.approve?.(id, { scope }),
            onDeny: (id, reason) => actions.deny?.(id, reason),
          })}
        />
      </MessageContent>
      <MessageActions>
        <MessageActionCopy value={() => textOf(chatcn)} />
      </MessageActions>
    </Message>
  )
}

Then remove the prompt-kit files you no longer import. The chatcn tokens are namespaced, so removing prompt-kit never changes chatcn's colors.