Configuration

A correct ToonUI setup has three pieces:

1. active standard component catalog
2. server protocol generated from that catalog
3. client runtime registered with matching React components

Active catalog

The catalog is not free-form. Developers select from standard parseable ToonUI components.

const components = ['text', 'card', 'form', 'field', 'button', 'table'] as const;

Do not write domain components like delete_product or invoiceSummary. Business intent belongs in button replies, form submits, tools, and application code.

Each key you add has two consequences:

1. the server prompt will teach the model that component
2. the React runtime must have a registered component for that key

So do not enable chart, dialog, sheet, or table unless your app can actually render them.

For the full official matrix, including required child components, read Catalog.

Server configuration

import { createToonProtocol } from '@toon-ui/core';

const toon = createToonProtocol({ components });

createToonProtocol returns:

Client configuration

import { createToonReactRuntime } from '@toon-ui/react';

const toon = createToonReactRuntime({
  components: {
    text: TextComponent,
    card: CardComponent,
    form: FormComponent,
    field: FieldComponent,
    button: ButtonComponent,
    table: TableComponent,
  },
});

createToonReactRuntime creates a runtime that includes:

• the active catalog derived from registered components
• parser and validator helpers
• message/event helpers from core
• React layout and render context

Adapter configuration

Use an adapter when you want coverage metadata or strict validation.

import { createToonReactAdapter, createToonReactRuntime } from '@toon-ui/react';

const adapter = createToonReactAdapter({
  level: 'strict',
  components: {
    text: TextComponent,
    card: CardComponent,
    form: FormComponent,
    field: FieldComponent,
    button: ButtonComponent,
    table: TableComponent,
  },
});

const toon = createToonReactRuntime({ adapter });

Dependency validation

Some components require child components:

If you enable form without field and button, ToonUI throws early. That is intentional.

Common catalog configurations

These are examples, not presets. ToonUI does not export a default UI catalog.

Next step

Read Catalog, Core package, and React package.