/projects/nexui
NexUI Agentic UI Components
A ShadCN-compatible component library for agentic products: chat interfaces, tool-call status, artifact panels, orchestration views, streaming UI, and MCP-aware interaction patterns.
NexUI Agentic UI Components
Component system for agent pipelines, chat, and artifacts
07
Project context05
Problem
Agent products repeatedly rebuild the same UI patterns: chat composers, tool status, approval controls, artifact panels, pipeline stages, and orchestration graphs.
Solution
NexUI packages agentic UI components for ShadCN-style apps, giving teams reusable primitives for chat, tools, artifacts, approvals, streaming state, and MCP-aware workflows.
Challenges
Agent UI has to expose enough state to be trustworthy without becoming a raw log viewer. It also needs compact controls that work across repeated operational workflows.
Innovation
The library treats agent state as a design-system concern. Tool calls, approvals, artifacts, and pipelines become reusable interface components rather than one-off screens.
Domain expertise
This highlights Stefan's product-design fluency for agent systems: dense interfaces, artifact UX, streaming states, human-in-the-loop controls, and componentized workflow views.
Case study evidence11
Outcomes
- Speeds up the creation of polished agent products.
- Makes tool calls, approvals, and artifacts visible without overwhelming users.
- Creates a reusable UI vocabulary for AI agent workflows.
Architecture decisions
- Design tokens and primitives support consistent dense workflow surfaces.
- AI SDK and MCP integration lanes connect components to live agent state.
- Artifact and pipeline views keep multi-step work inspectable.
Domain expertise signals
Agent UIShadCNArtifactsHITL controlsStreaming UX
Technical deep dive09
NexUI treats agent UX as a reusable system. Chat, tool calls, approvals, artifacts, pipelines, and orchestration maps are recurring product surfaces that deserve components, not one-off screens.
Agent state as UI
Users need to understand what an agent is doing without reading raw traces. Tool status, approvals, and progress components translate runtime state into product state.
Artifacts beside chat
Serious agent products create durable outputs. Keeping artifacts visible beside the conversation lets users inspect results while asking follow-up questions.
Workflow density
Agent products are often operational tools, not marketing pages. The component system supports dense, scannable, repeated workflows such as pipeline steps and orchestration graphs.
Integration posture
AI SDK and MCP affordances connect UI primitives to live streams and external tool ecosystems, which keeps frontend design aligned with the agent runtime.
What this proves
- Reusable chat and artifact primitives
- Tool-call status and approval controls
- Pipeline and orchestration views
- AI SDK and MCP oriented UI states
5surface families
1agent UI system
Ncomponents
2integration lanes
100%icon-first controls
0blank agent states
Technology stack06
TypeScript
Agent UI state is complex enough that typed props and variants matter.
React
Fits composable chat, artifact, pipeline, and control surfaces.
Next.js
Targets modern app-router agent products and server-backed streams.
Tailwind CSS
Keeps the component library easy to theme inside ShadCN-compatible apps.
ShadCN
Provides a familiar copy-in component pattern for production apps.
AI SDK
Aligns UI states with standard streaming and tool-call protocols.
Tools implemented08
Chat composer
Handles message input, attachments, and mode controls for agent products.
Thread renderer
Displays streamed assistant output and rich inline content.
Tool status components
Expose progress without leaking raw tool internals.
Approval controls
Support human-in-the-loop UX for sensitive actions.
Artifact side panel
Keeps generated outputs visible while the user continues the conversation.
Pipeline view
Shows multi-step and multi-agent execution as a readable workflow.
Orchestration graph
Maps dependencies and tool calls for complex agent systems.
MCP affordances
Gives connector and tool ecosystems visible product states.