Beta V1.2
GitHubShare
Free to use UI components

UI components
for AI Agents

Beautifully crafted, copy-paste blocks for everything an agent shows mid-conversation: thinking states, tool calls, streaming text, tables and more.

Browse components

Thinking & Reasoning

3 components
Thinking
Thinking StateThinking & Reasoning
Thinking + ReasoningThinking & Reasoning
OrbsThinking & Reasoning

Tool & Action States

2 components
src/auth.ts+4-1
1212export function getToken() {
13- return localStorage.token;
13+ const t = cookies.get("session");
14+ if (!t) throw new Error("no session");
15+ return t;
1416}
File DiffTool & Action States
Generating image“a calm mountain lake at dawn”
Image GenerationTool & Action States

Text Outputs

4 components

Here's a quick summary. The migration touches three modules and is safe to run incrementally.

I'd recommend starting with the auth service, then rolling out the rest behind a feature flag.

Text ResponseText Outputs

Streaming TextText Outputs
utils.ts
1export const sum = (a: number, b: number) =>
2 a + b;
3 
4export const clamp = (n: number, min: number, max: number) =>
5 Math.min(Math.max(n, min), max);
Code BlockText Outputs

Transformers scale well with data and compute1, though attention is quadratic in sequence length2.

1Attention Is All You Need·arxiv.org2Efficient Transformers: A Survey·arxiv.org
Inline CitationsText Outputs

Structured Outputs

3 components
  • Scaffold the project structure
  • Build the component registry
  • Implement entitlement gating
  • Wire up Stripe checkout
  • Polish the landing page
To-do ListStructured Outputs
Model
Context
$/1M in
gpt-4o
128k
$5.00
claude-3.5
200k
$3.00
llama-3.1
128k
$0.90
Data TableStructured Outputs
Feature
Personal
Enterprise
Unlimited projects
✓
✓
All components
✓
✓
Team-wide usage
—
✓
Priority support
—
✓
Comparison TableStructured Outputs

Rich & Interactive

2 components
AI Agent InputRich & Interactive
Questions
Which auth approach should we use?
1 / 3
Approval CardRich & Interactive