ai-elements

Name: ai-elements
Author: laguagu

github.com/laguagu设计与 UI71178 次安装1 天前更新

代码仓库

关于 ai-elements

用于在项目中集成 AI Elements 组件的技能，面向使用 AI SDK 的开发者，涵盖组件选择、版本适配、定制和交互状态验证。

主要功能

01按项目配置组件
02AI SDK 版本指引
03定制生成的源码
04组合聊天交互状态
05验证实际渲染流程

适用场景

01为应用添加聊天界面
02实现流式输出与重试状态
03集成附件或审批流程

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill ai-elements

安装后在 Claude Code 中输入/ai-elements确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

agent.md

artifact.md

attachments.md

audio-player.md

canvas.md

chain-of-thought.md

checkpoint.md

code-block.md

commit.md

confirmation.md

connection.md

context.md

controls.md

conversation.md

edge.md

environment-variables.md

file-tree.md

image.md

inline-citation.md

integration.md

jsx-preview.md

message.md

mic-selector.md

model-selector.md

node.md

open-in-chat.md

package-info.md

panel.md

persona.md

plan.md

详细介绍

AI Elements

在组件适合交互场景时使用 AI Elements。生成的源代码属于项目：检查代码以确认实际 API，并有针对性地进行定制。

项目和文档

遵循项目的包管理器、别名、shadcn 配置和 AI SDK 主版本。阅读 ai-sdk 以确认已安装的版本，然后查阅对应的 ai-sdk-6 或 ai-sdk-7 指南。AI Elements 和 AI SDK 的版本可以独立变化。

先阅读生成的 components/ai-elements/<component>.tsx，然后查看匹配的 references/ 文件及其中的 scripts/ 示例。使用 AI Elements 网站查看最新文档。只加载相关参考资料；根据已安装的源代码核验打包的示例。

安装时，使用项目的运行器执行 ai-elements@latest add <component> 或 shadcn@latest add @ai-elements/<component>。组件会放在 components/ai-elements/ 中，路径取决于 components.json 配置的别名；已安装的源代码可作为离线 API 参考。检查已安装的组件，并在替换本地定制内容之前先审阅生成的文件。使用 shadcn 查阅注册表、预设和基础组件的相关详情。

AI Elements 面向 Radix 基础组件（上游使用 new-york 样式和 radix-ui）。对于使用 Base UI 的项目，预期 prompt-input、attachments、inline-citation 和 plan 会出现属性不匹配的问题（上游 #446，于 2026-10-11 开放）；请调整已安装的副本。

集成

集成指南介绍 UI/SDK 边界、v6 的常见问题，以及 AI SDK 7 所需的 context.tsx 补丁。保持消息 ID 稳定，并使用生成的复合组件渲染受支持的消息部分。模型选择、工具、凭据和授权应保留在服务端。

按功能需要组合各类状态：流式传输、完成、重试、取消、附件、审批或来源。不要仅仅因为库提供了组件就添加它们。保留键盘交互、无障碍标签和实用的滚动行为。

渲染失败时，检查所属组件、主题导入、语义令牌和实际配置的别名。不要为了修复单个导入而复制默认 tsconfig 或替换项目主题。对于无样式的 Markdown，请查看 MessageResponse 配置。

使用真实消息状态和项目的检查来验证渲染流程；仅仅类型正确，并不能证明流式传输或附件行为可用。

支持 Markdown

登录后评论