UI componentsfor AI Agents

Free to use UI components

UI components

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

[](https://www.aicss.dev/components/thinking-state)

Thinking + ReasoningThinking & Reasoning

[](https://www.aicss.dev/components/thinking-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

[](https://www.aicss.dev/components/web-search)

src/auth.ts+4\-1

1212`export 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

[](https://www.aicss.dev/components/file-diff)

1024 × 1024

Generating image“a calm mountain lake at dawn”

Image GenerationTool & Action States

[](https://www.aicss.dev/components/image-generation)

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

[](https://www.aicss.dev/components/text-response)

Streaming TextText Outputs

[](https://www.aicss.dev/components/streaming-text)

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

Inline CitationsText Outputs

[](https://www.aicss.dev/components/inline-citations)

utils.tsCopy

1`export const sum = (a: number, b: number) =>`

2` a + b;`

3` `

4`export const clamp = (n: number, min: number, max: number) =>`

5` Math.min(Math.max(n, min), max);`

Code BlockText Outputs

[](https://www.aicss.dev/components/code-block)

Structured Outputs

3 components

To-dos0/5

• Scaffold the project structure
• Build the component registry
• Implement entitlement gating
• Wire up Stripe checkout
• Polish the landing page

To-do ListStructured Outputs

[](https://www.aicss.dev/components/task-list)

Model

Context

$/1M in

gpt-4o

128k

$5.00

claude-3.5

200k

$3.00

llama-3.1

128k

$0.90

Data TableStructured Outputs

[](https://www.aicss.dev/components/data-table)

Feature

Personal

Enterprise

Unlimited projects

✓

✓

All components

✓

✓

Team-wide usage

—

✓

Priority support

—

✓

Comparison TableStructured Outputs

[](https://www.aicss.dev/components/comparison-table)