![](data:image/svg+xml,<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g filter="url(%23filter0_d_40_365)">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M84.1001 48.5601V173.06L110.8 146.56L136.3 207.56L158.3 197.06L133.8 139.06H172.8L84.1001 48.5601Z" fill="%23000000"/>%0A<path d="M88.0281 44.7102L78.6001 35.0909V48.5601V173.06V186.268L87.9746 176.964L108.876 156.218L131.225 209.681L133.454 215.013L138.669 212.524L160.669 202.024L165.411 199.76L163.366 194.92L142.094 144.56H172.8H185.892L176.728 135.21L88.0281 44.7102Z" stroke="%23FFFFFF" stroke-width="11"/>%0A</g>%0A<defs>%0A<filter id="filter0_d_40_365" x="55.1001" y="13.6218" width="155.883" height="230.843" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">%0A<feFlood flood-opacity="0" result="BackgroundImageFix"/>%0A<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>%0A<feOffset dx="-3" dy="7"/>%0A<feGaussianBlur stdDeviation="7.5"/>%0A<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>%0A<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40_365"/>%0A<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_40_365" result="shape"/>%0A</filter>%0A</defs>%0A</svg>%0A)
1. Server catalog
Generate the prompt from enabled components.
Semantic UI for AI chat. Not frontend generation.
Let AI describe UI. Your app renders it.
ToonUI lets models describe chat UI while your app keeps control of components, actions, validation, and APIs.
Three pieces, one controlled loop
Core creates the rules. The model writes ToonUI. React renders your components.
2. Model output
Semantic UI, not production React.
3. React renderer
Render real components and send structured events.
Catalog-driven safety
The AI only sees the UI vocabulary you enable.
Prompt generated from your active catalog
React renders only registered components
No hidden default UI or surprise components
Your app owns actions, permissions, validation, and APIs
What ToonUI is not
It does not take over your architecture.
Not a agent frameworkNot a tool executorNot a backend workflow engineNot a React generatorNot a v0 replacementNot a design-system replacement
Recommended path
Start with the React stack most teams can copy.
AI SDKAI Elementsshadcn/ui@toon-ui/core on the server@toon-ui/react on the client
Install ToonUI
Install core for the server and react for the client.
Install command
npm install @toon-ui/core@^2.1.7 @toon-ui/react@^2.1.6Current local releases: core 2.1.7 and react 2.1.6.