Advanced UI components for building AI agent interfaces.
Build sophisticated agent experiences, autonomous assistants, and multi-agent systems with beautiful, customizable components.
agents-ui-kit extends the excellent prompt-kit library with additional components specifically designed for AI agent interfaces. This library includes all the original prompt-kit components plus new agent-focused components.
This project is built on top of prompt-kit. We maintain all original components and functionality while adding new agent-specific features.
First, you'll need to install and configure shadcn/ui in your project.
Follow the installation guide in the shadcn/ui documentation.
Once shadcn/ui is set up, you can install components using the shadcn CLI:
npx shadcn@latest add agents-ui-kit/prompt-kit/[component]
npx shadcn@latest add agents-ui-kit/agents-ui/[component]
After installation, import and start using the components in your project:
// Original prompt-kit components
import { PromptInput } from "@/components/prompt-kit/prompt-input"
import { Message } from "@/components/prompt-kit/message"
// New agent-specific components
import { AgentCard } from "@/components/agents-ui/agent-card"
import { TaskQueue } from "@/components/agents-ui/task-queue"
The Agent Card displays agent information with real-time status, capabilities, and interactive controls.
The sidebar clearly separates agents-ui components from the original prompt-kit components.
A growing library of 30+ specialized agent components covering orchestration, human-in-the-loop workflows, analytics dashboards, research tools, and media generation interfaces.
Handle AI-generated images with proper variation management, export controls, and editing workflows. Supports multiple formats and real-time preview updates.
Professional video editing interface with timeline visualization, clip management, and export controls. Perfect for AI video generation workflows.
Complete audio synthesis interface with waveform visualization, voice controls, and real-time playback. Handles voice selection, speed control, and multiple export formats.
Smart text analysis with categorized suggestions, issue detection, and correction workflows. Shows readability scores and handles bulk text improvements.
All original prompt-kit components are preserved:
- Message - Display chat messages with avatars and actions
- PromptInput - Enhanced input for prompts
- ResponseStream - Streaming text responses
- CodeBlock - Syntax-highlighted code display
- Markdown - Rich markdown rendering
- ChatContainer - Full chat interface
- Loader - Loading states
- ScrollButton - Scroll controls
- And more...
Specialized components for agent workflows:
- AgentCard - Display agent information, capabilities, and status
- AgentResponse - Handle agent messages with tool integration
- AgentPromptComposer - Advanced prompt building interface
- AgentChatHistory - Conversation history management
- AgentStatusPanel - Real-time agent status monitoring
- AgentToolPalette - Tool selection and management
- AgentFeedback - User satisfaction collection
- AgentOpsMonitor - Live signal dashboard with metrics, incidents, and escalation controls
- AgentTaskQueue - Orchestrate multi-step workflows with progress, priorities, and metrics
- AgentWorkflowPlanner - Guided checkpoint planner with playbooks and handoff queues
- AgentRevenueInsights - Scenario planning surface with ARR forecasts and opportunity insights
- AgentAnalyticsPulse - Growth analytics overview with segment switching and highlights
- AgentDataAnalysis - Bento grid analytics dashboard with sparklines, donut charts, and distribution bars
- AgentOrchestrator - Multi-agent coordination dashboard with communication logs and per-agent metrics
- AgentParallelProcessor - Fan-out/fan-in pipeline visualization with SVG connection lines and ring progress
- AgentSequentialWorkflow - Metro/subway map pipeline with station nodes and animated data flow
- AgentRoutingHub - Hub-and-spoke query routing with classification ticker and confidence gauge
- AgentEvaluator - Quality assurance dashboard with radial gauge, convergence charts, and iteration timeline
- AgentToolApproval - Tool execution approval flow with risk banners, parameter display, and history timeline
- AgentPlanBuilder - Kanban-style plan review board with per-step approval and confidence gauge
- AgentInquiry - Conversational decision interface with chat bubbles, pill selections, and star ratings
- AgentSourcesCitations - Magazine-style citation layout with masonry grid and source verification
- AgentCompetitorResearch - Business intelligence view with radar chart, SWOT matrix, and dot matrix comparison
- AgentArtifact - IDE-style artifact viewer with macOS chrome, syntax highlighting, and version timeline
- AgentFormGenerator - Drag-drop form builder aesthetic with field palette and live preview
- AgentCodeExecutor - Terminal/console emulator with split panes, line numbers, and status bar
- AgentImageEditor - AI image editing with variation management and export controls
- AgentVideoEditor - Professional video editing with timeline and playback controls
- AgentAudioGenerator - Voice synthesis with waveform visualization and voice controls
- AgentGrammarChecker - Smart text analysis with categorized suggestions and corrections
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Build component registry
npm run build:registry
We welcome contributions! Please feel free to submit issues and pull requests.
This project is distributed under a non-commercial license. You may remix and use the components for personal or internal evaluation, but commercial usage requires written permission.
For commercial licenses, contact me@abhishek.it. See LICENSE.md for the full terms.
Abhishek Gahlot
Email: me@abhishek.it
Built on top of prompt-kit and shadcn/ui