Ship your agent UI in a day, not a month.

Pre-built React components for chat threads, tool traces, approval flows, and session history. Stop rebuilding from scratch.

$ npm install @agentinterface/core
Get early access
Summarize last quarter's revenue by segment
AI
Agent 3 tools used
Revenue grew 23% YoY to $4.2M. Enterprise led at $2.1M (+41%), followed by SMB at $1.4M (+12%). Q4 was your strongest quarter at $1.3M β€” driven by the December campaign.
βœ“
fetch_revenue_data
warehouse.query Β· 2,847 rows returned
84ms
βœ“
calculate_yoy_growth
math.aggregate Β· delta: +23.4%
12ms
↻
generate_narrative
llm.complete Β· streaming…
β€”
Β·
format_response
waiting
β€”
⚠ Needs Approval
Send campaign email to 2,400 customers
segment: churned-q3 Β· template: winback-v3 Β· send_at: tomorrow 9am PST
Revenue analysis Β· Q4 2025
Today, 2:14pm Β· 6 messages
Active
Churn cohort breakdown
Yesterday Β· 12 messages
Ended
Campaign draft β€” win-back
May 2 Β· 4 messages
Ended

Every AI team reinvents the same UI

Chat box. Trace viewer. Thumbs up/down. None of it is the hard part. All of it takes weeks. And it always looks worse than it should.

3–6 wks

To build a decent chat UI

Message threading, streaming, feedback capture, mobile layout β€” before you've touched any product logic.

Γ—4 teams

Rebuilding the same thing

Every AI startup building a chat agent invents the same approval flow. Every trace viewer looks like the last one. It's waste, compounded.

No design system

For agent-powered products

shadcn gives you buttons. Tailwind gives you utilities. Neither gives you a ToolCallTrace component. Agent Interface does.

Everything a production agent UI needs

Six focused components. Drop them in. Customize with props. Ship.

πŸ’¬

ChatThread

Streaming messages, markdown rendering, citations, feedback capture. Works with any LLM provider.

<ChatThread />
πŸ”

ToolTrace

Expandable tool call tree with timing, inputs, outputs, and error states. Users see exactly what your agent did.

<ToolTrace />
βœ…

ApprovalFlow

Human-in-the-loop approval cards with context, justification, and one-click approve/reject. Auditable by design.

<ApprovalFlow />
πŸ‘

FeedbackCapture

Thumbs, star ratings, freeform comments. Hooks directly into your evaluation pipeline or RLHF workflow.

<FeedbackCapture />
πŸ•’

SessionHistory

Searchable session list with metadata, pinning, and branching. Persists across page loads.

<SessionHistory />
πŸ–₯️

AgentShell

The hosted UI container that wraps everything. Auth, routing, responsive layout β€” delivered as a managed shell.

<AgentShell />

From install to production in hours

Designed for React and Next.js. Vue support in beta.

1

Install the package

One package, zero peer dependencies beyond React. Tree-shakeable. Works with your existing component library.

$ npm install @agentinterface/core
2

Drop in components

Import what you need. Pass your data model. Customize with props or override styles β€” no breaking out of a black box.

import { ChatThread, ToolTrace }
  from '@agentinterface/core'
3

Ship to users

Your agent logic, your backend, your data. Agent Interface handles the UI primitives so you can focus on what actually matters.

<ChatThread
  messages={messages}
  onFeedback={handleFeedback}
/>

Core components are free. Forever.

MIT-licensed, open source. Pay for the hosted shell and managed infrastructure when you need it.

OSS
$0
forever, MIT license
All six core components. Self-hosted. Full source access.
  • ChatThread, ToolTrace, ApprovalFlow
  • FeedbackCapture, SessionHistory
  • React + Next.js support
  • MIT license
  • Community support
View on GitHub
Enterprise
Custom
 
White-label, SSO, dedicated support, SLA, on-prem option.
  • Everything in Pro
  • White-label branding
  • SSO / SAML
  • 99.9% SLA
  • Dedicated CSM
  • On-prem / VPC option
Talk to us
See full pricing details β†’

The craft of agent UI design

Ship your agent UI today.

Open source core. Pro hosted shell. No chat widget rebuilds, ever again.

$ npm install @agentinterface/core