Skip to content

Commit 34664df

Browse files
committed
update docs to reflect new catalog guidance where we got rid of concepts of custom/extended catalog, renamed standard catalog to basic catalog and made clear its just an implementation of a catalog and not special
1 parent 7da5392 commit 34664df

File tree

13 files changed

+95
-131
lines changed

13 files changed

+95
-131
lines changed

docs/concepts/components.md

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -169,14 +169,11 @@ Every component has:
169169
}
170170
```
171171

172-
## The Standard Catalog
172+
## The Basic Catalog
173173

174-
A2UI defines a standard catalog of components organized by purpose:
174+
To help developers get started quickly, the A2UI team maintains the [Basic Catalog](../specification/v0_9/json/basic_catalog.json).
175175

176-
- **Layout**: Row, Column, List - arrange other components
177-
- **Display**: Text, Image, Icon, Video, Divider - show information
178-
- **Interactive**: Button, TextField, CheckBox, DateTimeInput, Slider - user input
179-
- **Container**: Card, Tabs, Modal - group and organize content
176+
This is a pre-defined catalog file that contains a standard set of general-purpose components (Buttons, Inputs, Cards). It is not a special "type" of catalog; it is simply a version of a catalog that has open source renderers available.
180177

181178
For the complete component gallery with examples, see [Component Reference](../reference/components.md).
182179

@@ -242,17 +239,13 @@ A surface is a complete, cohesive UI (form, dashboard, chat, etc.).
242239

243240
The flat structure makes all updates simple ID-based operations.
244241

245-
## Custom Components
242+
## Defining Your Own Catalog
246243

247-
Beyond the standard catalog, clients can define custom components for domain-specific needs:
244+
While the Basic Catalog is useful for starting out, most production applications will define their own catalog to reflect their specific design system.
248245

249-
- **How**: Register custom component types in your renderer
250-
- **What**: Charts, maps, custom visualizations, specialized widgets
251-
- **Security**: Custom components still part of the client's trusted catalog
246+
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.
252247

253-
Custom components are _advertised_ from the client's renderer to the LLM. The LLM can then use them in addition to the standard catalog.
254-
255-
See [Custom Components Guide](../guides/custom-components.md) for implementation details.
248+
See [Defining Your Own Catalog Guide](../guides/defining-your-own-catalog.md) for implementation details.
256249

257250
## Best Practices
258251

docs/guides/client-setup.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ Integrate A2UI into your application using the renderer for your platform.
1515

1616
## Component Catalogs
1717

18-
A component catalog is any collection of components — standard ones, your custom components, or shared libraries. **Your design system is what matters.** You can register any collection of components and functions, and A2UI will work with them. The catalog is just the contract between your agent and your renderer.
18+
A component catalog is any collection of components — the Basic Catalog, your own components, or shared libraries. **Your design system is what matters.** You can register any collection of components and functions, and A2UI will work with them. The catalog is just the contract between your agent and your renderer.
1919

20-
See [Custom Components](custom-components.md) for how to extend or replace the standard catalog.
20+
See [Defining Your Own Catalog](defining-your-own-catalog.md) for how to define a catalog that matches your design system.
2121

2222
## Shared Web Library
2323

@@ -161,6 +161,6 @@ TODO: Add error handling examples.
161161

162162
- **[Quickstart](../quickstart.md)**: Try the demo application
163163
- **[Theming & Styling](theming.md)**: Customize the look and feel
164-
- **[Custom Components](custom-components.md)**: Extend the component catalog
164+
- **[Defining Your Own Catalog](defining-your-own-catalog.md)**: Extend the component catalog
165165
- **[Agent Development](agent-development.md)**: Build agents that generate A2UI
166166
- **[Reference Documentation](../reference/messages.md)**: Deep dive into the protocol

docs/guides/custom-components.md

Lines changed: 0 additions & 83 deletions
This file was deleted.
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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.

docs/guides/theming.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,6 @@ Define reusable design tokens (colors, spacing, etc.) and reference them through
182182

183183
## Next Steps
184184

185-
- **[Custom Components](custom-components.md)**: Build custom components with your styling
185+
- **[Defining Your Own Catalog](defining-your-own-catalog.md)**: Build custom components with your styling
186186
- **[Component Reference](../reference/components.md)**: See styling options for all components
187187
- **[Client Setup](client-setup.md)**: Set up the renderer in your app

docs/introduction/who-is-it-for.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Build multi-agent platforms, enterprise assistants, or cross-platform apps where
1616
- Cross-platform: web, mobile, desktop
1717
- Interoperable: open source, same spec with multiple renderers
1818

19-
**Get started:** [Client Setup](../guides/client-setup.md) | [Theming](../guides/theming.md) | [Custom Components](../guides/custom-components.md)
19+
**Get started:** [Client Setup](../guides/client-setup.md) | [Theming](../guides/theming.md) | [Defining Your Own Catalog](../guides/defining-your-own-catalog.md)
2020

2121
### 2. Agent Developers (Backend/AI)
2222

docs/reference/components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -646,5 +646,5 @@ npm start -- gallery
646646

647647
[:material-code-json: Basic Catalog Definition (JSON Schema)](https://a2ui.org/specification/v0_9/basic_catalog.json)
648648

649-
- **[Custom Components Guide](../guides/custom-components.md)**: Build your own components
649+
- **[Defining Your Own Catalog](../guides/defining-your-own-catalog.md)**: Build your own components
650650
- **[Theming Guide](../guides/theming.md)**: Style components to match your brand

mkdocs.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ nav:
5252
- Client Setup: guides/client-setup.md
5353
- Agent Development: guides/agent-development.md
5454
- Renderer Development: guides/renderer-development.md
55-
- Custom Components: guides/custom-components.md
55+
- Defining Your Own Catalog: guides/defining-your-own-catalog.md
5656
- Theming & Styling: guides/theming.md
5757
- A2UI over MCP: guides/a2ui_over_mcp.md
5858
- Reference:

specification/v0_10/docs/a2ui_custom_functions.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
# Extending A2UI with Custom Functions
1+
# Defining Custom Functions
22

3-
A2UI functions are designed to be extensible. Third-party developers can define
4-
their own function catalogs.
3+
A2UI functions are defined inside a Catalog. When defining your own catalog, you can include custom functions that are specific to your application or design system.
54

6-
This guide demonstrates how to create a `custom_catalog.json` that adds a string
7-
`trim` function and a hardware query function (`getScreenResolution`).
5+
This guide demonstrates how to define a string `trim` function and a hardware query function (`getScreenResolution`) in your catalog.
86

9-
## 1. Define the Custom Catalog
7+
## 1. Define the Catalog
108

11-
Create a JSON Schema file (e.g., `custom_catalog.json`) that defines your
9+
Create a JSON Schema file (e.g., `my_catalog.json`) that defines your
1210
function parameters.
1311

1412
Use the `functions` property to define a map of function schemas.

specification/v0_10/docs/a2ui_protocol.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,15 +146,15 @@ The [`server_to_client.json`] envelope schema is designed to be catalog-agnostic
146146
To validate A2UI messages:
147147

148148
1. **Basic Catalog**: Map `catalog.json` to `basic_catalog.json`.
149-
2. **Custom Catalog**: Map `catalog.json` to your custom catalog file (e.g., `my_custom_catalog.json`).
149+
2. **Client Catalog**: Map `catalog.json` to your own catalog file (e.g., `my_company_catalog.json`).
150150

151151
This indirection allows the same core envelope schema to be used with any compliant component catalog without modification.
152152

153-
Custom catalogs can be used to define additional UI components or modify the behavior of existing components. To use a custom catalog, simply include it in the prompt in place of the basic catalog. It should have the same form as the basic catalog, and use common elements in the [`common_types.json`] schema.
153+
Defining your own catalog allows you to restrict the agent to using exactly the components and visual language that exist in your application. To use your own catalog, simply include it in the prompt in place of the basic catalog. It should have the same form as the basic catalog and use common elements in the [`common_types.json`] schema.
154154

155-
### Validator compliance & custom catalogs
155+
### Validator compliance when defining catalogs
156156

157-
To ensure that automated validators can verify the integrity of your UI tree (checking that parents reference existing children), custom catalogs MUST adhere to the following strict typing rules:
157+
To ensure that automated validators can verify the integrity of your UI tree (checking that parents reference existing children), any catalog you define MUST adhere to the following strict typing rules:
158158

159159
1. **Single child references:** Any property that holds the ID of another component MUST use the `ComponentId` type defined in `common_types.json`.
160160
- Use: `"$ref": "common_types.json#/$defs/ComponentId"`
@@ -347,7 +347,7 @@ This structure is designed to be both flexible and strictly validated.
347347

348348
### The component catalog
349349

350-
The set of available UI components and functions is defined in a **Catalog**. The basic catalog is defined in [`basic_catalog.json`]. This allows for different clients to support different sets of components and functions, including custom ones. Advanced use cases may want to define their own custom catalogs to support custom front end design systems or renderers. The server must generate messages that conform to the catalog understood by the client.
350+
The set of available UI components and functions is defined in a **Catalog**. The basic catalog is defined in [`basic_catalog.json`]. While the Basic Catalog is useful for starting out, most production applications will define their own catalog to reflect their specific design system. The server must generate messages that conform to the catalog understood by the client.
351351

352352
### UI composition: the adjacency list model
353353

0 commit comments

Comments
 (0)