Welcome to UICP

UICP (User Interface Context Protocol) enables LLM-based agents to describe and render UI components dynamically in chat interfaces. Instead of only returning text, AI agents can discover, create, and render rich UI components like cards, tables, charts, and custom interfaces.

What is UICP?

UICP is a protocol and set of tools that bridges the gap between AI text generation and rich user interfaces. It allows AI agents to:

• 🔍 Discover available UI components and their schemas
• 🎨 Create structured component blocks that render as rich UI
• ⚡ Render these components inline with text responses
• 🔧 Validate component data against defined schemas

Why UICP?

Traditional AI chat interfaces are limited to text and markdown. UICP unlocks:

• Richer User Experiences: Display data in cards, tables, charts, forms, and custom UI
• Better Information Presentation: Structure complex information in appropriate UI components
• Interactive Elements: Enable user interactions beyond simple text input
• Consistent Design: Components follow your design system automatically
• Type Safety: Full TypeScript support with runtime validation

Getting Started

Architecture

┌─────────────────┐
│   AI Agent      │
│  (OpenAI, etc)  │
└────────┬────────┘
         │
         │ Uses Tools
         ▼
┌─────────────────┐ ┌──────────────────┐
│  @uicp/tools    │─▶│ definitions.json │
│   (Backend)     │ │ Component Specs  │
└────────┬────────┘ └──────────────────┘
         │
         │ Returns UICP Blocks
         ▼
┌─────────────────┐
│ Chat Response   │
│ (Text + UICP)   │
└────────┬────────┘
         │
         │ Parse & Render
         ▼
┌─────────────────┐ ┌──────────────────┐
│  @uicp/parser   │─▶│ React Components │
│   (Frontend)    │ │  Your UI Library │
└─────────────────┘ └──────────────────┘

Use Cases

• Data Visualization: Tables, charts, and graphs for data analysis
• E-commerce: Product cards, pricing tables, shopping carts
• Documentation: Code examples, API references, interactive tutorials
• Dashboards: Metrics, KPIs, status indicators
• Forms: Dynamic form generation and validation
• Notifications: Alerts, warnings, success messages
• Content Cards: News articles, blog posts, media galleries