Quick Start

Get started with UICP in minutes. This guide will walk you through setting up a basic implementation with a few example components.

Prerequisites

Node.js 18+ installed
npm or yarn package manager
Basic knowledge of React and TypeScript

Step 1: Install Packages

bash

npm install @uicp/parser @uicp/tools
# or
yarn add @uicp/parser @uicp/tools

Step 2: Create a Component

Define a simple UI component with a Zod schema:

typescript

import { z } from 'zod'

// Define the schema
export const UserCardSchema = z.object({
  name: z.string(),
  email: z.string().email(),
  avatar: z.string().url().optional(),
})

// Create the component
export function UserCard({ name, email, avatar }: z.infer<typeof UserCardSchema>) {
  return (
    <div className="border rounded-lg p-4">
      {avatar && <img src={avatar || "/placeholder.svg"} alt={name} className="w-16 h-16 rounded-full" />}
      <h3 className="font-semibold">{name}</h3>
      <p className="text-sm text-gray-600">{email}</p>
    </div>
  )
}

Step 3: Register the Component

Add your component to the registry:

typescript

import { ComponentRegistry } from '@uicp/tools'
import { UserCard, UserCardSchema } from './components/UserCard'

const registry = new ComponentRegistry()

registry.register({
  name: 'UserCard',
  component: UserCard,
  schema: UserCardSchema,
  description: 'Display user information in a card format',
})

Step 4: Parse and Render

Use the parser to validate and render AI-generated component definitions:

typescript

import { parseUICP } from '@uicp/parser'

// AI-generated UICP block
const uicpBlock = `
<uicp>
  <component name="UserCard">
    <props>
      <prop name="name">John Doe</prop>
      <prop name="email">john@example.com</prop>
    </props>
  </component>
</uicp>
`

// Parse and render
const result = parseUICP(uicpBlock, registry)

if (result.success) {
  const Component = result.component
  return <Component {...result.props} />
}

Step 5: Integrate with AI

Provide the UI Bridge API to your AI agent:

typescript

import { createUIBridge } from '@uicp/tools'

const bridge = createUIBridge(registry)

// Send to AI as a tool/function
const tools = [
  {
    name: 'list_ui_components',
    description: 'Get available UI components',
    function: bridge.listComponents,
  },
  {
    name: 'get_component_schema',
    description: 'Get schema for a specific component',
    function: bridge.getComponentSchema,
  },
]

Success! You now have a working UICP implementation. Check out the Examples section for more advanced use cases.