AI chat UI, prompts and agents

Chats, prompts, agents and answers with sources.

3 components · 16 variants

Switch category

Interfaces for products with AI

Products with AI need interfaces that show plainly what the model did, where an answer comes from and where a person decides. The three components here cover the conversation, the input and the agent that acts on its own, and every reply streams in without moving the rest of the page.

AI chat has the chat window, a composer, a history, answers with numbered sources and a voice widget. Prompt input is the field itself in five versions, with attachments and upload limits, slash commands, context added with @, modes with time and cost, and dictation that marks unsure words. Agent run shows a live run with a stop button, every tool call with input and output, a queue of actions that wait for approval and the history of runs.

Label AI output as AI output, every variant has a place for it. Show sources next to the claim they support. Put a person in front of every action that cannot be undone, the approval queue exists for that. The components draw the interface, you connect your own model or API through props.

AI chat

Chats, prompts, agents and answers with sources. Replies stream in, everything works with the keyboard.

Chat window
Prompt composer
Agent steps
With chat history
Answer with sources
Voice widget

Props and details

Chat window

A complete conversation with streaming, message actions and quick replies.

Installv1.0.1

aiw add @ai-website/ai-chat

Brings along utils, kit, button, icon

Usage

<AiChat variant="chat-window" assistant={{ name, model }} messages={[…]} respond={async (prompt) => …} />

Source

Prompt composer

A large composer with model, web search, attachments and suggestion cards.

Installv1.0.1

aiw add @ai-website/ai-chat

Brings along utils, kit, button, icon

Usage

<AiChat variant="prompt-composer" title="…" suggestions={[{ label, prompt, icon }]} models={[…]} />

Source

Agent steps

A task in steps with tools, live progress, details to open and an approval before anything is sent.

Installv1.0.1

aiw add @ai-website/ai-chat

Brings along utils, kit, button, icon

Usage

<AiChat variant="agent-steps" task={{ title, started, files }} steps={[{ title, tool, status, output }]} />

Source

With chat history

Chats grouped by day with search and a new chat button. Phones open the list as a sheet.

Installv1.0.1

aiw add @ai-website/ai-chat

Brings along utils, kit, button, icon

Usage

<AiChat variant="history-sidebar" history={[{ id, title, group, active }]} messages={[…]} />

Source

Answer with sources

Sources first, then an answer whose citations light up their source. Related questions follow.

Installv1.0.1

aiw add @ai-website/ai-chat

Brings along utils, kit, button, icon

Usage

<AiChat variant="answer-with-sources" question="…" sources={[{ id, title, site, href }]} answer={[{ text, cites: [1, 3] }]} />

Source

Voice widget

A compact assistant in the corner with a microphone, a live waveform, quick replies and text as fallback.

agent-run

Agent run

Screens for AI agents that act on their own. A live run with stop, every tool call with input and output, a queue of actions waiting for a person, a plan to check before the start and the history of runs.

Live run
Tool calls
Approval queue
Plan review
Run history

Props and details

Live run

The run plays as it scrolls into view. Logs write themselves, steps tick off, spend counts up and the agent stops for approval. Stop ends it at once.

Open in Studio

Installv1.0.0

aiw add @ai-website/agent-run

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="live-run" goal="…" agent={{ name }} elapsed={74} budget={{ used, limit, unit }} steps={[{ id, title, tool, status, log }]} />

Source

Tool calls

Every call of a run with status, duration and retries. Desktop shows input and output beside the list, phones open each call in place.

Open in Studio

Installv1.0.0

aiw add @ai-website/agent-run

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="tool-calls" steps={[{ id, title, tool, status, duration, retries, input, output }]} />

Source

Approval queue

Actions from several agents that wait for a person, each with reason, risk and the exact changes. Decisions slide out and can be undone.

Open in Studio

Installv1.0.0

aiw add @ai-website/agent-run

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="approval-queue" approvals={[{ id, agent, run, action, risk, reason, changes, requested }]} />

Source

Plan review

The plan before the start. Steps reorder with a glide, can be removed, added or marked to ask first, and switches decide what the agent may do alone.

Open in Studio

Installv1.0.0

aiw add @ai-website/agent-run

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="plan-review" goal="…" plan={[{ id, title, tool, ask }]} permissions={[{ id, label, description, on }]} />

Source

Run history

Success rate with its trend, totals and every run with trigger, steps, duration and spend. Filters reorder with a glide, a row opens its summary.

Open in Studio

Installv1.0.0

aiw add @ai-website/agent-run

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="run-history" runs={[{ id, title, trigger, status, started, duration, cost, steps, summary }]} trend={[…]} stats={{ period, duration, spend }} />

Source

prompt-input

Prompt input

The input of an AI product with one feature per variant. Files with upload state and limits, slash commands, context added with @ and a meter, modes with time and cost, and dictation that marks unsure words.

With attachments
Slash commands
Context with @
Modes with estimates
Voice dictation

Props and details

With attachments

Files by drag and drop or picker, each with type, size and upload progress, a clear message when a file is too large and the limits in view.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-input

Brings along utils, kit, icon, reveal

Usage

<PromptInput variant="attachments" attachments={[{ id, name, size, kind, progress }]} maxFiles={10} maxSizeMb={25} onSubmit={…} />

Source

Slash commands

A slash opens the commands by group, arrows choose, Enter turns one into a chip at the start of the message.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-input

Brings along utils, kit, icon, reveal

Usage

<PromptInput variant="slash-commands" commands={[{ id, label, description, icon, group }]} defaultValue="/" />

Source

Context with @

Documents, projects and people added with @ or a picker, each with its size, and a meter that warns before the context runs full.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-input

Brings along utils, kit, icon, reveal

Usage

<PromptInput variant="context-mentions" contexts={[{ id, label, kind, detail, tokens }]} selected={["c1"]} contextLimit={128000} />

Source

Modes with estimates

Quick answer, research or writing as a segmented choice with a gliding marker, each with its own hint, time and cost, plus web and longer thinking.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-input

Brings along utils, kit, icon, reveal

Usage

<PromptInput variant="modes" modes={[{ id, label, icon, description, placeholder, time, cost }]} defaultMode="research" />

Source

Voice dictation

Dictate instead of typing, with a live waveform, timer and transcript. Words that were hard to hear are underlined while you speak and listed under the field until you send.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-input

Brings along utils, kit, icon, reveal

Usage

<PromptInput variant="voice-dictation" onListen={(push) => { /* speech to text */ return stop }} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to AI and chat on a page.

Interfaces for products with AI

On this page

Chat window

Prompt composer

Agent steps

With chat history

Answer with sources

Voice widget

Live run

Tool calls

Approval queue

Plan review

Run history

With attachments

Slash commands

Context with @

Modes with estimates

Voice dictation

Similar components, Often combined with

Similar components

Often combined with