Start Here

If you feel lost, start HERE.

This is the recommended ToonUI learning path from beginning to end.

The right order

Follow these pages in this exact sequence:

1. Overview — understand what ToonUI is and what it is NOT
2. Choose Your Integration Path — decide package path, framework path, and AI loop
3. Installation — choose the correct package path
4. Quickstart — make ToonUI work end to end
5. Configuration — understand the main moving parts
6. Mental Model — learn the architecture boundary
7. Syntax — learn the core writing rules
8. Node Reference — understand when to use each node
9. AI Authoring Rules — learn how models should behave
10. Complete Syntax Reference — use as deep reference, not as first reading

What to read first vs later

The correct mindset

Do NOT start with:

• full syntax reference
• prompt internals
• low-level reference pages
• every package page at once

Start with the flow that gets ToonUI working first.

Then deepen your understanding.

If you are in a hurry

Use this minimal path:

1. Choose Your Integration Path
2. Installation
3. Quickstart
4. Configuration
5. Syntax

If you want to truly understand ToonUI

Use this full path:

1. Overview
2. Choose Your Integration Path
3. Mental Model
4. Boundaries
5. Installation
6. Quickstart
7. Configuration
8. Syntax
9. Node Reference
10. AI Authoring Rules

What comes after this path

After the core learning path, choose based on your goal:

• Need package decisions? → @toon-ui/core, @toon-ui/toon-ui, @toon-ui/react
• Need a real end-to-end example? → Build a Real ToonUI Flow
• Need your own chat loop? → Custom Host Loop
• Need a Vercel-specific integration? → Vercel AI SDK guide
• Need a custom React UI layer? → Custom Adapter
• Need help choosing the right nodes? → UI Patterns
• Need debugging help? → Debug Invalid ToonUI
• Need deep reference? → Reference

Next step

Go to Choose Your Integration Path.