|
| 1 | +# Defining Your Own Catalog |
| 2 | + |
| 3 | +While the [Basic Catalog](../specification/v0_9/json/basic_catalog.json) is useful for starting out and bootstrapping an application, most production applications will define their own catalog to reflect their specific design system. |
| 4 | + |
| 5 | +By defining your own catalog, you restrict the agent to using exactly the components and visual language that exist in your application, rather than generic inputs or buttons. |
| 6 | + |
| 7 | +## Why Define Your Own Catalog? |
| 8 | + |
| 9 | +Every A2UI surface is driven by a **Catalog**. A catalog is simply a JSON Schema file that tells the agent which components, functions, and themes are available for it to use. |
| 10 | + |
| 11 | +- **Design System Alignment**: Restrict the agent to using exactly the components and visual language that exist in your application. |
| 12 | +- **Security and Type Safety**: You register entire catalogs with your client application, ensuring that only trusted components are rendered. |
| 13 | +- **No Mappers Needed**: We recommend building catalogs that directly reflect your client's design system rather than trying to map a generic catalog (like the Basic Catalog) to it through an adapter. |
| 14 | + |
| 15 | +The Basic Catalog is just one example and is intentionally sparse to remain easily implementable by different renderers. |
| 16 | + |
| 17 | +## How It Works |
| 18 | + |
| 19 | +1. **Define the Catalog**: Create a catalog definition (JSON Schema) listing the components, functions, and styles your application supports. |
| 20 | +2. **Register the Catalog**: Register the catalog and its corresponding component implementations (renderers) with your client application. |
| 21 | +3. **Announce Support**: The client informs the agent which catalogs it supports (via `supportedCatalogIds`). |
| 22 | +4. **Agent Selects Catalog**: The agent chooses a catalog for a given UI surface (via `catalogId` inside the creation message, like `createSurface`). |
| 23 | +5. **Agent Generates UI**: The agent generates component messages using the components defined in that catalog by name. |
| 24 | + |
| 25 | +## Implementation Guide |
| 26 | + |
| 27 | +We recommend creating catalogs that directly map to your existing component library. |
| 28 | + |
| 29 | +=== "Web (Lit / Angular / React)" |
| 30 | + |
| 31 | + To implement your own catalog on the web: |
| 32 | + - Create a JSON Schema containing your component definitions. |
| 33 | + - Register your components with the `@a2ui/web` client. |
| 34 | + - Provide the schema or reference ID to the agent. |
| 35 | + |
| 36 | + *Detailed guides for each framework coming soon.* |
| 37 | + |
| 38 | +=== "Flutter" |
| 39 | + |
| 40 | + To implement your own catalog in Flutter: |
| 41 | + - Define a JSON Schema describing your widget properties. |
| 42 | + - Map the schema to Flutter widgets using a custom renderer. |
| 43 | + |
| 44 | + *Detailed Flutter integration guide coming soon.* |
| 45 | + |
| 46 | +## Security Considerations |
| 47 | + |
| 48 | +When defining and registering catalogs: |
| 49 | + |
| 50 | +1. **Allowlist components**: Only register components you trust in your catalog definition. Don't expose components that offer dangerous capabilities (e.g., executing arbitrary scripts) unless strictly controlled. |
| 51 | +2. **Validate properties**: Always validate component properties from agent messages to ensure they match expected type constraints. |
| 52 | +3. **Sanitize text**: Avoid rendering un-sanitized content provided by the agent unless safe bounds are established. |
| 53 | + |
| 54 | +## Next Steps |
| 55 | + |
| 56 | +- **[Theming & Styling](theming.md)**: Customize the look and feel of components. |
| 57 | +- **[Component Reference](../reference/components.md)**: Explore standard types that might be available for reuse. |
| 58 | +- **[Agent Development](agent-development.md)**: Build agents that interact with your Catalog. |
0 commit comments