ToonUI
API Reference

Protocol and Types

Reference for the core ToonUI protocol contracts and message types.

ToonProtocol

Returned by createToonProtocol(options).

const toon = createToonProtocol({ components });
PropertyTypeMeaning
promptstringsystem prompt fragment generated from the active catalog
rulesToonRulesenabled components and variants
catalogToonActiveCatalogactive standard component catalog
eventsToonEventsApipayload factories
messagesToonMessagesApipayload-to-message converters

ToonRules

Contains:

  • components
  • buttonVariants
  • badgeVariants
  • alertVariants
  • confirmVariants
  • fieldTypes
  • chartTypes

ToonActiveCatalog

The subset of standard ToonUI components enabled for this app.

It drives prompt generation and validation.

ReplyPayload

type ReplyPayload = {
  kind: 'ui_reply';
  eventId: string;
  source: 'button';
  component: 'button';
  value: string;
  line?: number;
  context?: Record<string, SubmitValue>;
};

SubmitPayload

type SubmitPayload = {
  kind: 'ui_submit';
  eventId: string;
  source: 'form';
  intent: string;
  formTitle: string;
  values: Record<string, SubmitValue>;
  line?: number;
};

Message conversion

APIUse when
toon.messages.toContent(payload)you need the compact serialized protocol text
toon.messages.toModelMessage(payload)the next step goes to the model loop
toon.messages.toUIMessage(payload)your chat state stores UI-message-shaped objects

On this page