Agentic UI Trends — Living Document

Generative UI

Components that materialize mid-conversation

Vercel's AI SDK pushed streamUI() and createStreamableUI() into production. The idea: the LLM doesn't just return text, it returns React components directly into the chat stream. You ask about weather, you get a live weather card. The conversation becomes the application.

What's the weather in Chennai?

Checking live data...

Chennai, IN

Feels like 37°C · Humid

High 39° · Low 31°

Components render in-stream. The reply isn't text - it's a live weather card.

Source: Vercel AI SDK

Reasoning UI

Showing the work

OpenAI's o3/o4-mini and Anthropic's extended thinking output reasoning chains before final answers. The UI pattern: a collapsible 'Thinking' block nested under the assistant bubble, streaming token-by-token in muted gray. Not a debug feature — a trust feature.

Is this stock a buy at $180?

Thinking (12s)

Checking P/E against industry... 24.3 vs avg 21.5 · slightly high.
Revenue growth: 18% YoY. Margin expansion: +210bps.
Competitor A trades at 22x. But revenue growth is slower.
Risk: tariff exposure on semiconductor supply chain.
...

At $180 it's fairly valued. Buy on any dip below $170 where margin of safety opens up.

The reasoning chain streams before the answer. Users expand to audit, collapse to skip ahead.

Source: Anthropic

Tool-Use Cards

Making the invisible visible

Anthropic's MCP and Claude Code expose tool calls as inline cards. The agent calls a file search, a card appears with a spinner. When done, the card flips to show results. Destructive actions trigger a permission toast. Before this, tool calls were invisible — the agent would pause mysteriously, then return.

Find all TODO comments in the auth module.

Searching auth/ for TODO...

✓

3 found in auth/session.py line 42, 58, 61

Found 3 TODOs. Two of them are about the same broken retry logic.

Tool calls become visible cards. The user knows what the agent is doing instead of watching a cursor blink.

Source: Anthropic

Permission Modes

A dial, not a switch

Claude Code offers three tiers: Ask (every tool needs approval), Auto-edit (file writes ok, shell commands ask), and Auto (full autonomy with audit log). Autonomy isn't binary. Full auto without rewind is reckless — the UI needs a time-travel panel with one-click undo.

Permission mode:

Ask me Auto-edit Full auto

Auto-edit — Edits need approval. Shell commands ask.

Recent edits:

+ auth/session.py · retryCount raised to 5 - auth/session.py · removed dead fallback

Autonomy as a dial, not a switch. Rollback for every session protects users from full-auto disasters.

Source: Claude Code

Multi-Agent Orchestration

When one brain isn't enough

Anthropic's multi-agent research system uses a lead orchestrator that spawns parallel subagents. The UI shows a tree with status badges (running / done / failed) and token burn per branch. Single-context agents choke on breadth-first tasks. The dashboard makes parallel execution legible.

Lead Agent — research query: "Agentic UI trends" Running

Sub 01 — scrape latest docs (Vercel, Anthropic) Done

Sub 02 — analyze community sentiment (Reddit, HN) Running

Sub 03 — verify design system compatibility Done

Sub 04 — extract code patterns (GitHub) Running

Tokens: 12.4K Time: 3m 12s 3 active / 1 queued

A tree makes parallel agent execution legible. Status, token burn, and time visible at every node.

Source: Anthropic

Workflow Visualization

Code as a map

Vercel's AI SDK supports directed graphs for agent logic. The emerging pattern: node-edge canvases where each node is an LLM call or tool. When an agent takes a wrong turn, the map shows exactly where the decision happened. It's the stack trace for agent logic.

parse request

→

search files

→

classify intent

→

deploy to Vercel

→

return result

Node #2 failed: fileSearch returned 0 results for "auth/session.py" — likely outdated path.

Click any node to inspect input/output payload.

Agent logic as a directed graph. Errors trace to the exact node that failed, with payloads inspectable inline.

Source: Vercel AI SDK

Agentic Infrastructure Observability

Monitoring agents like services

Vercel's Agentic Infrastructure describes dashboards for agent workloads: traces of model calls, tool invocations, retries. Cost and token-burn graphs per deployment. The shift: agents aren't just users of infrastructure, they're creators of it. The platform becomes a human-in-the-loop agent itself.

Requests / min

142K

Tokens burned

$0.43

Cost / hr

23ms

Avg latency

Trace health (last hour)

■ 78% OK ■ 18% Retry ■ 4% Fail

Dashboard for agent workloads. Traces, retries, token burn, cost — agents treated like actual services.

Source: Vercel

Suggestion Chips

Steering without typing

When agents hit ambiguity, the UI surfaces quick-reply actions: 'Compare plans', 'Show pricing', 'Talk to sales.' This reduces cognitive load. The design risk: too many chips feel like a 2005 decision tree. Good implementations show 2-3 contextually relevant options.

What plan should I pick for 50 employees?

For 50 employees, the Business plan at $299/mo covers everything. Need to compare?

Compare with Enterprise Show pricing table Talk to sales

Compare with Enterprise

Contextual quick-replies steer the conversation without typing. Too many chips feels like a decision tree — 2 or 3 is the sweet spot.

Context Source Indicators

What the agent actually knows

MCP-connected agents pull from files, APIs, and databases. The UI needs to show which sources are loaded. A subtle indicator — 'Reading from 3 files' with an expandable list — tells the user whether the answer is grounded in actual data or hallucinated from training. This is the citation bar for the agentic era.

What are our top SKUs by revenue this week?

● Reading from 3 sources | ▼

● orders.db (live) ● pricing_api_v2.json (cached 2m) ● product_catalog.csv (stale, 6h)

Top 3 SKUs: PRO-3000 ($48K), LITE-1200 ($31K), DEV-500 ($19K). Catalog data is 6h old, so check inventory before finalizing.

The citation bar for agents. Green = live, yellow = stale. Tells the user whether the answer is grounded in data or training.

Declarative Agent Builder

No-code agent creation

Microsoft's Copilot Studio lets non-developers build agents via form UIs: pick knowledge sources, define trigger phrases, set conversational topics. The agent compiles to a JSON manifest. This democratizes agent creation but creates governance problems: who approves the HR bot with payroll access?

Build an agent — 4 steps

1. Name it

Payroll Helper

2. Add knowledge

intranet://payroll-guide.pdf, intranet://leave-policy-2026.docx

3. Set triggers

"Check my paystub", "Submit leave request", "Tax withholding"

4. Permissions

■ Read-only access to payroll records
■ Cannot edit or approve

Manifest: On publish, compiles to agent.json. Deployed to Teams. Governance review pending.

Form-based agent builder. Non-devs create agents, but permissions and governance remain the bottleneck.

Source: Microsoft

Live Source Check

What this means for designers

The agentic era isn't just chatbots with better CSS. It's a new interaction paradigm where conversations generate interfaces, trust requires transparency, autonomy needs guardrails, parallel work needs visualization, and debugging needs maps.

The designers who get this aren't the ones adding AI sparkle to existing UIs. They're the ones rethinking what a user interface is when the software thinks for itself.