v0.5 preview

Start here

Give this to your agent.

agent-ui is source-first. Almost every setup is an AI agent reading three files, then copying the starter.

1. Give this to your agent

Copy the prompt. Point the agent at these three files — that is the whole setup path.

setup-prompt.txt
Build this agentic interface with agent-ui source files. First read docs/catalog.json and choose the smallest matching recipe or component. Copy tokens.css, the recipe stylesheets[] (including host-chrome.css when listed), and only the required component markup. Use semantic HTML, native forms, the shared data-au-* vocabulary, and the documented data-au-state values. Keep the host responsible for execution, authorization, persistence, validation, and state transitions. Treat model output, tool arguments, and tool output as untrusted text and escape it before insertion. Keep the no-JS path usable. Do not add React, Tailwind, a bundler, external assets, fonts, analytics, or runtime network requests. Exclude setup.docs_only_assets. After implementation, run node scripts/check-all.js and, when a browser is available, node scripts/check-browser.js.

Also: llms.txt · AI setup · then node scripts/check-all.js

2. Do it yourself

Open the chat-tools starter, copy the Install panel (canonical list from the catalog), and paste into your app. Optional runtime: agent-ui.js for dialog open/close only.

head.html · chat-tools
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="themes.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/chat-input/chat-input-features.css">
<link rel="stylesheet" href="components/loading-state/loading-state.css">
<link rel="stylesheet" href="components/reasoning/reasoning.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">
Open starter Open catalog

Guides (not setup steps): Patterns · Surfaces · Mobile · Distribution · Why HTML