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
2 components
Thinking
Thinking StateThinking & Reasoning
Thinking + ReasoningThinking & Reasoning
Tool & Action States
3 components
Searching “JWT auth vulnerabilities and middleware security best practices”
JWT verification best practices·auth0.com/blog/jwt-security-best-practices
Node.js authentication security guide·owasp.org/www-project-nodejs-goat
JWT attacks · Web Security Academy·portswigger.net/web-security/jwt
Web SearchTool & Action States
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
1024 × 1024
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
Transformers scale well with data and compute1, though attention is quadratic in sequence length2.
Inline CitationsText 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
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