Installation

Install ToonUI based on the level of control you want.

This page is about ToonUI packages.

It is NOT the page where you choose your AI SDK.

The important decision is NOT "what command do I run?"

The real decision is:

do I want the fastest path, or do I want explicit rendering ownership?

Choose your setup

Most teams should start here

pnpm add @toon-ui/core @toon-ui/toon-ui

Use this when you want:

• the simplest correct setup
• the default adapter
• the quickest path from model output to rendered UI

This assumes your React app already has react and react-dom installed.

Use @toon-ui/react when the frontend team wants control

pnpm add @toon-ui/core @toon-ui/react

Use this when you want:

• explicit component ownership
• adapter coverage control
• deeper design-system integration

Add the CLI when you want validation outside runtime

pnpm add -D @toon-ui/cli

Use this when you want:

• fixture validation
• AST inspection
• CI checks
• debugging generated output

Where each package belongs

Minimum install mental model

A correct ToonUI setup usually has two sides:

1. server teaches the model the language
2. client renders the result and captures interactions

That is why most real apps install:

• @toon-ui/core on the server
• @toon-ui/toon-ui or @toon-ui/react on the client

Common mistake

Do NOT think of ToonUI as "just a frontend package".

That is backwards.

The protocol starts on the server, because that is where you teach the model what UI language it can emit.

Monorepo example

pnpm --filter @your-org/server add @toon-ui/core
pnpm --filter @your-org/web add @toon-ui/toon-ui
pnpm --filter @your-org/web add -D @toon-ui/cli

What to do next

After installation:

1. Quickstart
2. Configuration
3. Mental Model
4. Choose Your Integration Path