agent-ui / showcase
All

Showcase / host composition

Chain of thought.

chain-of-thought-primitive.tsx: stacked reasoning + tool-call + answer. No new MVP component — host groups parts in order.

chain-of-thought-primitive.tsxcomposehost-chrome
composereasoning · tool · answer
Reasoning

The user wants the current weather in Tokyo. I should call the weather tool first.

get_weather success
{ "city": "Tokyo" }

{ "temp": "22C", "condition": "Partly cloudy" }

Reasoning

Got the weather result. I can now answer the user directly.

It's currently 22C and partly cloudy in Tokyo.

Deferred: part-grouping runtime, streaming CoT animation. Escape all tool args/results as text.

Install
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/tool-call/tool-call.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-extracts.css">