A2UI的React渲染器如何使用？

1. 安装与配置

使用A2UI 的React渲染器需要先安装相关包。v0.8可以使用@a2ui-sdk/react（社区SDK），v0.9可以使用官方@a2ui/react-renderer。安装完成后，需要在React应用中配置A2UIProvider和A2UIRenderer组件。A2UIProvider提供A2UI消息处理的上下文，可以配置自定义组件目录（catalog）来覆盖默认组件或添加新组件。A2UIRenderer负责将A2UI消息渲染为React组件，需要传入surfaceId和消息数组。还需要使用useA2UIMessageHandler钩子来处理智能体生成的A2UI消息，以及实现handleAction回调来处理用户操作事件。

2. 自定义组件注册

A2UI 的React 渲染器支持自定义组件注册，可以通过catalog属性扩展标准目录。可以覆盖默认组件（如用自定义Button组件替换标准Button），也可以添加全新组件类型（如Switch、StockTicker等）。实现自定义组件需要使用useDispatchAction钩子来派发操作事件，使用useDataBinding和useFormBinding钩子来实现数据绑定。自定义组件需要遵循A2UI组件规范，接受surfaceId、componentId和组件属性作为props，并正确实现操作派发和数据绑定逻辑。

3. 与CopilotKit集成

CopilotKit 提供开箱即用的React 集成方案，可以快速启用A2UI渲染支持。使用npx copilotkit@latest init脚手架初始化项目，在选择选项中选择a2ui。脚手架会自动配置CopilotRuntime并注入render_a2ui工具，使智能体能够产出A2UI界面。后端开启A2UI只需在CopilotRuntime配置中设置a2ui: { injectA2UITool: true }。前端使用CopilotKit提供的A2UI渲染器组件，自动将智能体生成的A2UI JSON渲染为React组件。这种集成方式无需自己写传输胶水代码，适合快速原型和企业级应用开发。