U
UI Polish
/
blocks
Files
Code
Info
Agent console
agent-console
A working console for running AI agents, for the Next.js App Router: emailed-code sign-in, a sidebar with workspaces, live runs with their full traces, an approvals inbox that pauses a run until someone decides, a knowledge base the agents search, per-agent model, tools, permissions and limits, usage against a monthly limit, and workspace settings. Runs come from a mock runner until a model is set (Anthropic, OpenAI or any OpenAI-compatible API), or until you plug yours in; the runner, auth and storage each sit behind one small file you swap. (UI Polish Pro: needs a license key.)
Agent task
agent-task
The live view of an agent doing a multi-step task: a phase whose color runs through the card, a checklist, a panel that shows what it's reading, searching, weighing, writing or revising, the tool in use, the model, and tokens, cost and time that never shift. Pause, stop, and run again. (UI Polish Pro: needs a license key.)
Agent workspace
agent-workspace
A working Next.js app for coding with agents, in three calm panes: a sidebar with workspaces, pinned and recent sessions (shared ones with their faces) and the team's presence; open sessions as tabs over a conversation whose tool calls fold to one line, with the files each turn changed as chips; and a changes pane with the pull request's merge status, all files, changes with diff stats, checks, review and a run panel. A scripted mock agent edits, tests, opens the pull request and runs its checks until you connect a model (Anthropic, OpenAI or any OpenAI-compatible API) or your own agent; the agent, sign-in and storage each sit behind one small file. (UI Polish Pro: needs a license key.)
Chat app
ai-chat-app
A working AI chat app for the Next.js App Router: sign-in with an emailed code, a sidebar with workspaces and chat history, chats that stream from Claude, OpenAI or any OpenAI-compatible API (or a mock until one is set) with reasoning, tool steps and sources, and settings for the assistant, billing and members. Auth, storage and the model each sit behind one small file you swap. (UI Polish Pro: needs a license key.)
Approvals inbox
approvals-inbox
A review queue for anything that needs a sign-off: expenses, time off, discounts, access, refunds, payments, posts and config changes, asked for by people or by agents. A list on the left, filtered by status and searchable, optionally grouped by requester or due date; the request in full on the right, drawn as the payment, message, post, diff, deletion, key/value change or code it is (or your own preview), with the requester's note and who it reaches. Approve, decline with a note, or edit then approve, from the keyboard too, with due dates, bulk approve and an undo window before anything is sent. (UI Polish Pro: needs a license key.)
Billing
The billing settings page of a SaaS product: current plan, usage meters that warn at 80% and say what to do at 100%, plan changes with proration and what a downgrade loses, payment method, billing details, invoices and cancel. Trial, past-due and canceled states included. (UI Polish Pro: needs a license key.)
Knowledge base
knowledge-base
The screen where a team gives its AI agent documents to answer from: upload files, add a site or sitemap, or connect Google Drive, Notion or Dropbox; watch each source move through reading, chunking and indexing with counts that never shift; retry failures, re-sync, remove, see usage against the plan, and test which passages a question retrieves. (UI Polish Pro: needs a license key.)
Onboarding
The first-run setup for an AI product, in four steps: the workspace, the tools the agent may use (each with its own consent and a connect that can fail or stall), what the agent may do without asking, and a first task it streams in front of you. The panel's height glides between steps, steps slide the way you're going, and every answer is handed back to save and resume. (UI Polish Pro: needs a license key.)
Pricing
The public pricing page of an AI SaaS product: a monthly/yearly switch with the saving said quietly, plan cards whose prices roll between the two without moving anything, per-seat and usage-based notes ("then $4 per 1,000 credits"), one featured plan, an Enterprise row, a full comparison table with a sticky plan header and a plan picker on phones, and questions in an accordion. Choosing a plan waits on your async callback and says what went wrong if it fails. (UI Polish Pro: needs a license key.)
Run history
run-history
The screen where a team inspects past AI agent runs: a filterable, paged table of runs with live ones counting up in place, and a run's trace as a calm waterfall of model and tool calls, with retries and the failing step called out, collapsed long outputs, a token and cost breakdown, the final output, and Re-run, Copy ID and Share link. (UI Polish Pro: needs a license key.)
Settings
The settings screen of an AI product's workspace: name, URL, logo, time zone and deleting the workspace; API keys with scopes and expiry, the secret shown once, revoke and flags for expired or unused keys; the default model, per-feature models, a monthly spend limit with an alert threshold, rate limits and usage against them; and notification switches per channel with a test send. One save bar holds unsaved changes, with inline validation, optimistic saves that roll back, a leave guard, a read-only viewer state and loading skeletons. (UI Polish Pro: needs a license key.)
Sign in
sign-in
A passwordless sign-in and sign-up screen: work email, then a one-time code with a resend countdown, plus optional OAuth providers and SSO by work domain. Wrong, expired and rate-limited codes, blocked domains and failed providers each say what to do next.
Team members
team-members
The members section of a workspace's settings: everyone's role and last activity, invites by pasting a list of addresses with seat limits enforced, pending invites to resend or revoke, and guards so the last owner can't be removed. Optimistic role changes roll back with an inline error. (UI Polish Pro: needs a license key.)
Voice session
voice-session
A live voice call with an AI agent: a calm visual of who's speaking, a state label that morphs in place, a transcript where the agent's words appear as they're said and lookups show inline, mute, device and captions controls, and a summary of what was decided when you hang up. Covers a blocked or missing mic, slow connections, network drops and agent errors. (UI Polish Pro: needs a license key.)
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Agent console
agent-console
A working console for running AI agents, for the Next.js App Router: emailed-code sign-in, a sidebar with workspaces, live runs with their full traces, an approvals inbox that pauses a run until someone decides, a knowledge base the agents search, per-agent model, tools, permissions and limits, usage against a monthly limit, and workspace settings. Runs come from a mock runner until a model is set (Anthropic, OpenAI or any OpenAI-compatible API), or until you plug yours in; the runner, auth and storage each sit behind one small file you swap. (UI Polish Pro: needs a license key.)
Agent task
agent-task
The live view of an agent doing a multi-step task: a phase whose color runs through the card, a checklist, a panel that shows what it's reading, searching, weighing, writing or revising, the tool in use, the model, and tokens, cost and time that never shift. Pause, stop, and run again. (UI Polish Pro: needs a license key.)
Agent workspace
agent-workspace
A working Next.js app for coding with agents, in three calm panes: a sidebar with workspaces, pinned and recent sessions (shared ones with their faces) and the team's presence; open sessions as tabs over a conversation whose tool calls fold to one line, with the files each turn changed as chips; and a changes pane with the pull request's merge status, all files, changes with diff stats, checks, review and a run panel. A scripted mock agent edits, tests, opens the pull request and runs its checks until you connect a model (Anthropic, OpenAI or any OpenAI-compatible API) or your own agent; the agent, sign-in and storage each sit behind one small file. (UI Polish Pro: needs a license key.)
Chat app
ai-chat-app
A working AI chat app for the Next.js App Router: sign-in with an emailed code, a sidebar with workspaces and chat history, chats that stream from Claude, OpenAI or any OpenAI-compatible API (or a mock until one is set) with reasoning, tool steps and sources, and settings for the assistant, billing and members. Auth, storage and the model each sit behind one small file you swap. (UI Polish Pro: needs a license key.)
Approvals inbox
approvals-inbox
A review queue for anything that needs a sign-off: expenses, time off, discounts, access, refunds, payments, posts and config changes, asked for by people or by agents. A list on the left, filtered by status and searchable, optionally grouped by requester or due date; the request in full on the right, drawn as the payment, message, post, diff, deletion, key/value change or code it is (or your own preview), with the requester's note and who it reaches. Approve, decline with a note, or edit then approve, from the keyboard too, with due dates, bulk approve and an undo window before anything is sent. (UI Polish Pro: needs a license key.)
Billing
The billing settings page of a SaaS product: current plan, usage meters that warn at 80% and say what to do at 100%, plan changes with proration and what a downgrade loses, payment method, billing details, invoices and cancel. Trial, past-due and canceled states included. (UI Polish Pro: needs a license key.)
Knowledge base
knowledge-base
The screen where a team gives its AI agent documents to answer from: upload files, add a site or sitemap, or connect Google Drive, Notion or Dropbox; watch each source move through reading, chunking and indexing with counts that never shift; retry failures, re-sync, remove, see usage against the plan, and test which passages a question retrieves. (UI Polish Pro: needs a license key.)
Onboarding
The first-run setup for an AI product, in four steps: the workspace, the tools the agent may use (each with its own consent and a connect that can fail or stall), what the agent may do without asking, and a first task it streams in front of you. The panel's height glides between steps, steps slide the way you're going, and every answer is handed back to save and resume. (UI Polish Pro: needs a license key.)
Pricing
The public pricing page of an AI SaaS product: a monthly/yearly switch with the saving said quietly, plan cards whose prices roll between the two without moving anything, per-seat and usage-based notes ("then $4 per 1,000 credits"), one featured plan, an Enterprise row, a full comparison table with a sticky plan header and a plan picker on phones, and questions in an accordion. Choosing a plan waits on your async callback and says what went wrong if it fails. (UI Polish Pro: needs a license key.)
Run history
run-history
The screen where a team inspects past AI agent runs: a filterable, paged table of runs with live ones counting up in place, and a run's trace as a calm waterfall of model and tool calls, with retries and the failing step called out, collapsed long outputs, a token and cost breakdown, the final output, and Re-run, Copy ID and Share link. (UI Polish Pro: needs a license key.)
Settings
The settings screen of an AI product's workspace: name, URL, logo, time zone and deleting the workspace; API keys with scopes and expiry, the secret shown once, revoke and flags for expired or unused keys; the default model, per-feature models, a monthly spend limit with an alert threshold, rate limits and usage against them; and notification switches per channel with a test send. One save bar holds unsaved changes, with inline validation, optimistic saves that roll back, a leave guard, a read-only viewer state and loading skeletons. (UI Polish Pro: needs a license key.)
Sign in
sign-in
A passwordless sign-in and sign-up screen: work email, then a one-time code with a resend countdown, plus optional OAuth providers and SSO by work domain. Wrong, expired and rate-limited codes, blocked domains and failed providers each say what to do next.
Team members
team-members
The members section of a workspace's settings: everyone's role and last activity, invites by pasting a list of addresses with seat limits enforced, pending invites to resend or revoke, and guards so the last owner can't be removed. Optimistic role changes roll back with an inline error. (UI Polish Pro: needs a license key.)
Voice session
voice-session
A live voice call with an AI agent: a calm visual of who's speaking, a state label that morphs in place, a transcript where the agent's words appear as they're said and lookups show inline, mute, device and captions controls, and a summary of what was decided when you hang up. Covers a blocked or missing mic, slow connections, network drops and agent errors. (UI Polish Pro: needs a license key.)
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information