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.
We've just shipped 4 powerful new agent components that handle complex media workflows. These aren't just basic UI components - they're full-featured interfaces that developers are using in production AI apps.
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
- 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
- TaskQueue - Visualize pending and completed agent tasks
- SystemPrompt - Display and edit system prompts
- MultiAgentView - Coordinate multiple agents
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Build component registry
npm run build:registryWe welcome contributions! Please feel free to submit issues and pull requests.
MIT License - see LICENSE.md for details.
Abhishek Gahlot
Email: [email protected]
Built on top of prompt-kit and shadcn/ui