agent-ui / showcase
All

Showcase / 01

Review today's release notes.

The host renders every state. Components never execute tools or invent success.

chat-threadthinkingtool-callapprovalquestion
live-run / release noteswaiting for approval
Human

Prepare release notes from the latest changes, but show me the file before you write it.

Agent

I will inspect the repository first, then prepare a bounded file proposal.

Agent is thinking
Read the repository
Prepare release notes
readsuccess · 0.4s
{"path":"CHANGELOG.md","offset":0,"limit":30}

3 headings found. No file changed.

approval required

Write release-notes.md?

⌘↵ Approve waiting

write-file · release-notes.md · actionId=write-release-notes-01 · exact action shown

needs your input

Which release channel should the agent target?

Release channel

Approve the write, then choose a channel. Forms stay usable without this script.

Install
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/thinking-indicator/thinking-indicator.css">
<link rel="stylesheet" href="components/thinking-steps/thinking-steps.css">
<link rel="stylesheet" href="components/tool-call/tool-call.css">
<link rel="stylesheet" href="components/approval-gate/approval-gate.css">
<link rel="stylesheet" href="components/ask-user-question/ask-user-question.css">
<link rel="stylesheet" href="host-chrome.css">

Canonical full-run composition. Exclude showcase.css / showcase.js when pasting into a host app.