Build AI Agent Interfaces Faster with agents-ui-kit

agents-ui-kit is a component library designed for building sophisticated interfaces for AI agents, autonomous assistants, and multi-agent systems. Built on top of prompt-kit and shadcn/ui, it integrates essential chat functionality—such as message threads, prompt inputs, streaming responses, and chat containers—with a specialized suite of components tailored for agent-driven workflows.

While standard chat UIs focus on simple message exchange, agents-ui-kit addresses the specific requirements of agentic systems. For example, AgentCard defines an agent's identity and capabilities, while TaskQueue visualizes the status of pending and completed tasks. ToolCall provides transparency by highlighting which functions or APIs an agent is invoking. The library also includes AgentConversation for complex agent-to-agent or human-in-the-loop threads, SystemPrompt for managing core instructions, AgentStatus for real-time state monitoring, and MultiAgentView for coordinating multiple agents within a single interface.

Components at a Glance

The library is organized into two primary categories:

Core prompt-kit components

• Message: Chat messages featuring avatars and action buttons.
• PromptInput: An enhanced input field for user prompts.
• ResponseStream: Handles real-time streaming text output.
• CodeBlock: Syntax-highlighted code displays.
• Markdown: Support for rich text rendering.
• ChatContainer: A layout for full chat interfaces.
• Loader & ScrollButton: Utilities for loading states and scroll management.

Agentic extensions

• AgentCard: Displays agent profiles, skill sets, and current state.
• TaskQueue: A visual timeline of pending and completed agent tasks.
• ToolCall: Reveals the specific tools or functions currently in use.
• AgentConversation: A specialized view for handling deep agent interactions.
• SystemPrompt: An interface for viewing and editing system-level instructions.
• AgentStatus: Live indicators for agent activity and availability.
• MultiAgentView: A dashboard for orchestrating several agents simultaneously.

Agent Toolkit Features

The Agent Toolkit offers a unified interface for managing the tools and functions available to your agents.

• Tool categorization: Organize tools by type, such as Data, Creative, Utility, or Communication.
• Search and filter: Quickly locate specific tools using text search or category filters.
• Usage tracking: Monitor invocation counts and "last-used" timestamps.
• Access control: Easily toggle individual tools on or off.
• Flexible layouts: Choose between grid and list views based on your UI needs.
• Parameter inspection: Review required inputs and JSON schemas for each tool.
• Automated iconography: Icons are assigned dynamically based on the tool’s function.

Installing agents-ui-kit

1. Install shadcn/ui

Ensure your project is configured with shadcn/ui. If not, follow the official shadcn/ui installation guide.

2. Add the components

Once shadcn/ui is ready, use the CLI to add the desired components to your project.

• To add core prompt-kit components: npx shadcn@latest add agents-ui-kit/prompt-kit/[component-name]

• To add agent-specific components: npx shadcn@latest add agents-ui-kit/agents-ui/[component-name]

Usage

After installation, you can import and use the components as needed:

// Core prompt-kit components
import { PromptInput } from "@/components/prompt-kit/prompt-input"
import { Message } from "@/components/prompt-kit/message"

// Agent-specific components
import { AgentCard } from "@/components/agents-ui/agent-card"
import { TaskQueue } from "@/components/agents-ui/task-queue"

Common commands

• Install dependencies: npm install
• Start development server: npm run dev
• Build for production: npm run build
• Build component registry: npm run build:registry