TanStack
Chat UI Recipes

Chat UI recipes

Five short examples. Each one adds a single thing to the one before it.

Start with the first if you have not built a chat here yet.

  1. A chat box with no tools. A layout, a message, and a text part. Nothing else.
  2. Make a tool look right. Register one tool and branch on its state, so it never shows raw JSON.
  3. Ask before a tool runs. Gate a tool behind a yes or no, next to the tool or in a list.
  4. Ask the user your own question. Define an interrupt with your own schemas and render it.
  5. Send the current user to the server. Pass a tenant or user id per request, out of the prompt.

The code is React. The Solid, Vue, and Svelte guides use the same option groups and the same component names, so each example maps across with only the framework syntax changing.

For the full component map in one place, see the React guide.