Guides
Use Another SDK
Integrate ToonUI with a custom chat loop or a model SDK other than AI SDK.
AI SDK is the recommended path, but ToonUI does not depend on it.
The reusable pieces are:
@toon-ui/corecreates the active prompt and message helpers@toon-ui/reactrenders model output and captures interactions
Server shape
import { createToonProtocol } from '@toon-ui/core';
const toon = createToonProtocol({
components: ['text', 'card', 'form', 'field', 'button'],
});
const system = [toon.prompt, appInstructions].join('\n\n');Send system to your model provider however your SDK expects.
Client shape
import { ToonMessage, createToonReactRuntime } from '@toon-ui/react';
const toon = createToonReactRuntime({ components });
<ToonMessage
content={assistantContent}
runtime={toon}
renderMarkdown={(markdown) => <MessageResponse>{markdown}</MessageResponse>}
onReply={(payload) => sendToYourLoop(toon.messages.toModelMessage(payload))}
onSubmit={(payload) => sendToYourLoop(toon.messages.toModelMessage(payload))}
/>What your host loop owns
Your loop owns:
- message history
- model transport
- tool calling
- persistence
- authorization
- business actions
ToonUI owns only the UI protocol and interaction payload conversion.