Getting Started
Start Here
The shortest explanation of how ToonUI fits into a real AI chat product.
Start with one rule:
Server teaches the model. Client renders the result.
That means:
@toon-ui/core -> server protocol and prompt
@toon-ui/react -> client rendering and interaction wiringRecommended stack
Use this for the first integration:
- Next.js or React
- Vercel AI SDK
@toon-ui/core@toon-ui/react
You can use another SDK later. Learn the main path first.
What you will configure
A ToonUI app has one important contract: the active component catalog.
const toonComponents = ['text', 'card', 'form', 'field', 'button', 'table'] as const;The server uses that list to generate the prompt. The client registers React implementations for those same standard components.
What success looks like
After the quickstart, you should have:
- a server prompt generated by
@toon-ui/core - an AI SDK route that streams model output
- a React runtime created with
@toon-ui/react - rendered markdown plus
toon-uiblocks - reply and submit events reinserted into the chat loop