UI Options Tooling

The @uicp/tools package provides utilities for managing component registries and integrating with AI agents through the UI Bridge API.

Component Registry

The ComponentRegistry class is the central hub for managing your UI components.

Creating a Registry

import { ComponentRegistry } from '@uicp/tools'

const registry = new ComponentRegistry()

// Register multiple components
registry.register({
  name: 'UserCard',
  component: UserCard,
  schema: UserCardSchema,
  description: 'Display user information',
})

registry.register({
  name: 'Chart',
  component: Chart,
  schema: ChartSchema,
  description: 'Data visualization component',
  category: 'analytics',
})

Registry Methods

`register(config)`

Add a component to the registry with its schema and metadata.

registry.register({
  name: string,
  component: ComponentType,
  schema: ZodSchema,
  description: string,
  category?: string,
  examples?: Example[],
})

`get(name)`

Retrieve a registered component by name.

const config = registry.get('UserCard')

`list()`

Get an array of all registered component names.

const components = registry.list() // ['UserCard', 'Chart', ...]

`getSchema(name)`

Get the Zod schema for a specific component.

const schema = registry.getSchema('UserCard')

UI Bridge API

The UI Bridge provides a standardized interface for AI agents to discover and use components.

Creating the Bridge

import { createUIBridge } from '@uicp/tools'

const bridge = createUIBridge(registry)

// Use with your AI SDK
const tools = [
  {
    name: 'list_ui_components',
    description: 'List all available UI components',
    parameters: {},
    function: bridge.listComponents,
  },
  {
    name: 'get_component_schema',
    description: 'Get the schema for a specific component',
    parameters: {
      type: 'object',
      properties: {
        name: { type: 'string', description: 'Component name' },
      },
      required: ['name'],
    },
    function: bridge.getComponentSchema,
  },
]

Bridge Methods

`listComponents()`

Returns an array of available components with descriptions.

const components = bridge.listComponents()
// [
//   { name: 'UserCard', description: '...', category: 'user' },
//   { name: 'Chart', description: '...', category: 'analytics' },
// ]

`getComponentSchema(name)`

Returns the JSON Schema representation of a component's props.

const schema = bridge.getComponentSchema('UserCard')
// {
//   type: 'object',
//   properties: {
//     name: { type: 'string' },
//     email: { type: 'string', format: 'email' },
//   },
//   required: ['name', 'email'],
// }

`getExamples(name)`

Get usage examples for a specific component.

const examples = bridge.getExamples('Chart')

Integration Example

Complete example with OpenAI:

import OpenAI from 'openai'
import { createUIBridge } from '@uicp/tools'

const openai = new OpenAI()
const bridge = createUIBridge(registry)

const response = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [{ role: 'user', content: 'Show me user data' }],
  tools: [
    {
      type: 'function',
      function: {
        name: 'list_ui_components',
        description: 'List available UI components',
        parameters: { type: 'object', properties: {} },
      },
    },
    {
      type: 'function',
      function: {
        name: 'get_component_schema',
        description: 'Get component schema',
        parameters: {
          type: 'object',
          properties: {
            name: { type: 'string' },
          },
          required: ['name'],
        },
      },
    },
  ],
})

Next: Learn about the UI Bridge API in detail.