Introduction

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 that bridges the gap between AI agents and user interfaces. It provides a standardized way for LLMs to understand available UI components, generate appropriate component definitions, and render them in real-time within chat applications.

Core Features

  • Component Discovery: AI agents can query available UI components and their schemas
  • Dynamic Rendering: Generate and render components on-the-fly based on context
  • Type Safety: Full TypeScript support with Zod schema validation
  • Framework Agnostic: Works with React, Vue, and other frameworks
  • Extensible: Easily add custom components to your registry

Use Cases

  • Analytics Dashboards: Generate charts and data visualizations based on queries
  • Form Generation: Create dynamic forms with validation
  • Data Tables: Display complex datasets with sorting and filtering
  • Custom Interfaces: Build specialized UI components for specific domains

How It Works

  1. 1. Registration: Components are registered with schemas defining their props
  2. 2. Discovery: AI agent queries available components via UI Bridge API
  3. 3. Generation: Agent generates component definitions based on context
  4. 4. Parsing: Parser validates and processes the component definition
  5. 5. Rendering: Component is rendered in the chat interface

Architecture Overview

UICP consists of three main packages:

  • @uicp/parser: Core parsing and validation engine
  • @uicp/tools: UI Bridge API and component registry
  • Examples: Reference implementations (Next.js, React)

Next Steps: Continue to the Quick Start guide to get UICP running in your project, or explore Key Concepts for a deeper understanding.