@toon-ui/toon-ui

@toon-ui/toon-ui is the easiest way to adopt ToonUI on the client.

It is the package most teams should start with.

Why use `@toon-ui/toon-ui`?

Use it when you want:

the shortest path to production
the default adapter included
a clean public entry point
the option to customize later without starting from scratch

What it gives you

createToonClient()
createToonAdapter()
ToonMessage
ToonRenderer
extractToonMarkdown()
re-exports from @toon-ui/core
re-exports from @toon-ui/react

The happy path

import { ToonMessage, createToonClient } from '@toon-ui/toon-ui';

const toon = createToonClient();

That one call gives you a working runtime with the default adapter.

What `createToonClient()` really means

It is a convenience entry point over the React runtime.

It lets you:

render mixed assistant content
parse and validate blocks
handle reply and submit payloads
start simple before moving to deeper customization

Best rendering component for most apps

Use ToonMessage when your assistant returns:

normal prose
markdown
toon-ui blocks

<ToonMessage
  content={assistantContent}
  runtime={toon}
  onReply={(payload) => append(toon.messages.toUIMessage(payload))}
  onSubmit={(payload) => append(toon.messages.toUIMessage(payload))}
/>

When to use `ToonRenderer`

Use ToonRenderer when you want lower-level control over where structured UI renders.

That is useful when:

prose renders elsewhere
the ToonUI block belongs in a dedicated panel
you want more layout control

When to customize the adapter

You can stay on @toon-ui/toon-ui and still override selected components.

import {
  createToonAdapter,
  createToonClient,
  getToonButtonProps,
  type ToonButtonComponentProps,
} from '@toon-ui/toon-ui';

function MyButton(props: ToonButtonComponentProps) {
  return <button {...getToonButtonProps(props)}>{props.node.label}</button>;
}

const adapter = createToonAdapter({
  level: 'default',
  components: {
    button: MyButton,
  },
});

const toon = createToonClient({ adapter });

When NOT to use this package

Move to @toon-ui/react when you need:

explicit adapter ownership
full control over component coverage
stricter design-system guarantees

Decision rule

Choose @toon-ui/toon-ui if your priority is:

speed first
low setup friction
safe defaults