ToonUI
Getting Started

Choose Your Integration Path

Use AI SDK by default, or bring another model loop while keeping the same ToonUI core/react boundary.

There is one recommended path and one advanced path.

Recommended: React + AI SDK

Choose this when:

  • you use React or Next.js
  • you want the most documented path
  • you want useChat, streaming, and model transport handled by AI SDK

Use:

  • @toon-ui/core on the server
  • @toon-ui/react on the client
  • ai and @ai-sdk/react for the chat loop

Next: Vercel AI SDK guide

Advanced: another SDK or custom loop

Choose this when:

  • your app already owns message state
  • you call the model directly
  • you use another provider SDK

Keep:

  • @toon-ui/core to generate the prompt and convert UI interactions into messages
  • @toon-ui/react to render generated blocks

Replace only:

  • model transport
  • message persistence
  • tool execution

Next: Custom Host Loop

Configuration

Configure ToonUI correctly: one active catalog, one server prompt, one React runtime.

Vercel AI SDK

The recommended ToonUI integration path for React and Next.js apps.

On this page

Recommended: React + AI SDKAdvanced: another SDK or custom loop