agent-ui-kit · components

<AgentStatus />

Run state in one pill, announced through a live region.

Thinking

Workingread_file3.42s

Waiting for approvalrun_command

Done21.8s

Rate limited by provider

<ToolCallTimeline />

Every tool state with durations, a waterfall, and expandable input and output.

ENOENT: no such file or directory, open 'middleware.ts'
!

<ApprovalCard />

Human-in-the-loop approval with risk, preview and Y / N shortcuts.

Approval required

High risk

Run command

Installs a package from the npm registry and updates package.json and pnpm-lock.yaml.

~/acme/chat-app

pnpm add @upstash/ratelimit

Keyboard: press Y to approve, N to deny, or Ctrl Enter to approve.

<DiffReview />

Accept or reject agent edits hunk by hunk, unified or split.

Review changes

2 files · 4 hunks · +21 −1

lib/ratelimit.ts+10 −0

@@ -1,0 +1,10 @@accepted

import { Ratelimit } from '@upstash/ratelimit';

import { redis } from '@/lib/redis';

/** 10 requests per 10 seconds per key, sliding window. */

export const ratelimit = new Ratelimit({

redis,

limiter: Ratelimit.slidingWindow(10, '10 s'),

prefix: 'ratelimit:chat',

analytics: true,

});

app/api/chat/route.ts+11 −1

@@ -1,6 +1,7 @@

import { convertToModelMessages, streamText, type UIMessage } from 'ai';

import { openai } from '@ai-sdk/openai';

import { tools } from '@/lib/tools';

import { ratelimit } from '@/lib/ratelimit';

export const maxDuration = 30;

@@ -11,6 +12,15 @@

].join(' ');

export async function POST(req: Request) {

const ip = req.headers.get('x-forwarded-for') ?? 'anonymous';

const { success, reset } = await ratelimit.limit(ip);

if (!success) {

return new Response('Too many requests', {

status: 429,

headers: { 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)) },

});

}

const { messages }: { messages: UIMessage[] } = await req.json();

if (messages.length === 0) return new Response('Empty conversation', { status: 400 });

const modelMessages = convertToModelMessages(messages);

@@ -18,7 +28,7 @@rejected

console.info('chat', { turns: messages.length, last: lastUserMessage?.id });

const result = streamText({

model: openai('gpt-4o'),

model: openai('gpt-4.1-mini'),

system: SYSTEM,

messages: modelMessages,

tools,

2/4 reviewed · unreviewed hunks are skipped

<RunMeter />

Tokens, estimated cost and latency; compact for headers, expanded for panels.

variant="expanded"

Run

mock-agent-1

Tokens: 41.1k
Est. cost: $0.056

Input 38.7k(28.8k cached)
Output 2.41k(96 reasoning)

TTFT: 684ms
Total: 21.8s
Cache hit: 74%

$0.032 input · $0.024 output · $2.5/$10 per 1M

variant="compact"

Pass totalUsage from streamText through message metadata, and timing from useRunTiming(status). Cost is an estimate from the pricing you supply.

<Sources />

Citations as compact chips or cards; inline [n] markers link to them.

Sources · 3

<Theming />

Every color, radius and font is a CSS variable. Light is the default, .dark switches, and any subtree can override tokens.

Dark

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

Light

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

Custom tokens

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

<AgentMessage />

A whole assistant UIMessage: reasoning, streaming markdown, grouped tool calls and sources.

I’ll check the route handler and confirm the limiter API first.

A sliding window smooths bursts better than a fixed window 1, and the check belongs at the top of the handler 3.

Sources · 3

Components

<AgentStatus />

<ToolCallTimeline />

<ApprovalCard />

Run command

<DiffReview />

Review changes

<RunMeter />

Run

<Sources />

<Theming />

<AgentMessage />