工作方法
AI Elements 指导智能体为现有 Next.js 应用添加专门用于聊天的组件，涵盖对话视图、消息内容、工具展示和提示词输入。组件代码保存在你的仓库中，因此界面可以遵循产品自身的样式和交互要求。
源文件将这些组件与 AI SDK 及 shadcn/ui 的约定衔接起来。示例围绕文本片段组合基础消息组件，而不是把助手回复当作一个无法拆分的黑盒控件。因此，当模型已经接入、接下来需要为用户提供连贯的阅读和回复界面时，这款 Skill 就能派上用场。
预期交付物
- 添加到项目所配置组件目录中的指定组件源文件。
- 由消息和回复基础组件组合而成的 React 对话视图。
- 符合项目的样式，以及尚未解决的集成问题说明。
从简报到审查
- 01检查现有应用
检查包执行工具、Next.js 环境、AI SDK 依赖和 shadcn 配置。添加组件之前，确认导入别名和全局样式。
- 02添加所需界面组件
通过项目的包执行工具运行受支持的组件安装器。选择对话界面需要的组件，并检查新增到仓库中的文件。
- 03接入并定制
按照源文件示例，将每条消息的角色映射到 Message，嵌套 MessageContent，并用 MessageResponse 渲染文本片段。工具结果需要使用专门支持该结果的展示方式，不能假定这个纯文本示例也能渲染它们。调整本地 Tailwind 类，并检查生成的各类对话状态。