Components · signoff-ui

<DiffReview />

Accept or reject agent edits hunk by hunk or file by file, comment on lines, and send the agent what you applied, rejected and said. Large files are diffed in a worker and render only what is near the screen.

Docs and props

Review changes

4 files · 4 hunks · +21 −1

lib/ratelimit.ts+10 −0Viewed

@@ -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'),

Comment On line 7

Read the window from an env var, so staging can use a longer one.

prefix: 'ratelimit:chat',

analytics: true,

});

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

@@ -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;

4 unchanged lines

@@ -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);

1 unchanged line

@@ -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,

4 unchanged lines

docs/rate-limiting.mddocs/guides/rate-limiting.mdViewed

Renamed from docs/rate-limiting.md, without changes.

public/errors/429.pngViewed

Binary file, not shown.

2/6 reviewed · 0 of 4 files viewed · 1 comment · unreviewed hunks are skipped

npm i signoff-ui ai

import { DiffReview, reviewToolOutput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/diff-review.json

import { DiffReview } from '@/components/signoff-ui/diff-review';

useDiffReview(options)

The same review in markup of its own: this list uses the site’s classes and none of the kit’s, and the hook brings the keyboard, decisions, comments and the result.

Docs and props

@@ -1,6 +1,7 @@not decided

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

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

+   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)) },
+     });
+   }
+

@@ -18,7 +28,7 @@not decided

-     model: openai('gpt-4o'),
+     model: openai('gpt-4.1-mini'),

J and K move, A and R decide, C writes a note.

npm i signoff-ui ai

import { useDiffReview, reviewToolOutput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/use-diff-review.json

import { useDiffReview } from '@/components/signoff-ui/use-diff-review';

<ApprovalCard />

Approve or deny a tool call once, for the session or always, with what will run, its risk, the arguments editable first, a reason and a key for each choice.

Docs and props

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

Remembered for run_command calls where:

command matches

Any arguments

* matches any text but shell operators (; & | > < and backticks); ** matches anything.

Keyboard: press Y to approve, S to approve for this session, A to always approve, N to deny, Shift N to always deny, or Ctrl Enter to approve.

npm i signoff-ui ai

import { ApprovalCard, ToolApprovalCard, ToolApprovalBatch } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/approval-card.json

import { ApprovalCard, ToolApprovalCard, ToolApprovalBatch } from '@/components/signoff-ui/approval-card';

useApprovalPolicy()

Approval rules: answer once, for this session or always, by tool and argument pattern. The next call a rule covers is answered without asking, and every decision goes to the audit trail.

Docs and props

The agent asks to run

Pick a command above to see its approval.

npm i signoff-ui ai

import { useApprovalPolicy, webStorageRules, setToolInput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/use-approval-policy.json

import { useApprovalPolicy, webStorageRules } from '@/components/signoff-ui/use-approval-policy';

<ToolCallTimeline />

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

Docs and props

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

npm i signoff-ui ai

import { ToolCallTimeline } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/tool-call-timeline.json

import { ToolCallTimeline } from '@/components/signoff-ui/tool-call-timeline';

<AgentStatus />

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

Docs and props

Thinking

Workingread_file3.42s

Waiting for approvalrun_command

Done21.8s

Stopped6.24s

Rate limited by provider

npm i signoff-ui ai

import { AgentStatus, deriveAgentState } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/agent-status.json

import { AgentStatus } from '@/components/signoff-ui/agent-status';
import { deriveAgentState } from '@/components/signoff-ui/lib/ai';

<RunMeter />

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

Docs and props

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, messages). Cost is an estimate from the pricing you supply.

npm i signoff-ui ai

import { RunMeter, useRunTiming } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/run-meter.json

import { RunMeter } from '@/components/signoff-ui/run-meter';
import { useRunTiming } from '@/components/signoff-ui/lib/hooks';

<Sources />

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

Docs and props

Sources · 3

npm i signoff-ui ai

import { Sources, getSourceParts } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/sources.json

import { Sources } from '@/components/signoff-ui/sources';
import { getSourceParts } from '@/components/signoff-ui/lib/ai';

Theming

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

Theming docs

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'

Labels

Every word the components show or announce is a label. Here the approval and the review are in Portuguese, from one SignoffLabelsProvider.

Labels docs

Aprovação necessária

Risco alto

Executar comando

Instala um pacote do registo npm e atualiza o package.json.

~/acme/chat-app

pnpm add @upstash/ratelimit

Fica memorizado para run_command quando:

command corresponde a

Quaisquer argumentos

* corresponde a qualquer texto exceto operadores da shell (; & | > < e acentos graves); ** a tudo.

Teclado: prima Y para aprovar, S para aprovar nesta sessão, A para aprovar sempre, N para recusar, Shift N para recusar sempre, ou Ctrl Enter para aprovar.

Rever alterações

1 ficheiro · 3 blocos · +11 −1

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

@@ -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;

4 linhas inalteradas

@@ -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);

1 linha inalterada

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

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,

4 linhas inalteradas

0/3 revistos

<AgentMessage />

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

Docs and props

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

npm i signoff-ui ai

import { AgentMessage } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/agent-message.json

import { AgentMessage } from '@/components/signoff-ui/agent-message';

<Markdown />

Streaming-safe markdown: syntax that hasn’t closed yet never flashes raw, and no raw HTML.

Docs and props

The limiter belongs at the top of the handler, before streamText opens the stream:

Read the client's IP from x-forwarded-for.
Call ratelimit.limit(ip) and return a 429 when it fails.

Window	Requests	Burst
Sliding, 10 s	10	smoothed
Fixed, 10 s	10	up to 20 at the edge

ts

const { success } = await limit(ip);if (!success) return tooMany();

npm i signoff-ui ai

import { Markdown } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/markdown.json

import { Markdown } from '@/components/signoff-ui/markdown';

<Reasoning />

Open while the model thinks, then one line: “Thought for 1.7s”.

Docs and props

npm i signoff-ui ai

import { Reasoning } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/reasoning.json

import { Reasoning } from '@/components/signoff-ui/reasoning';

useAgUiAgent(agent)

AG-UI agents (LangGraph, CrewAI, Mastra, Pydantic AI) through the same components. This one is a real @ag-ui/client agent replaying a LangGraph-style run: steps, streamed tool arguments, and an interrupt that resumes the run when you answer it.

Docs and props

npm i signoff-ui ai @ag-ui/client

import { useAgUiAgent } from 'signoff-ui/ag-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/ag-ui.json
npm i @ag-ui/client

import { useAgUiAgent } from '@/components/signoff-ui/use-ag-ui-agent';

Agent Client Protocol

An ACP prompt turn through the same components, with signoff-ui/acp: a scripted agent sends its session updates and asks permission to edit a file, whose diff the card shows, and to run the tests. The card offers the options the agent sent.

ACP docs

Idle