use-ai
一个让AI直接控制React前端组件的开发框架。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：use-ai。 它的用途是：一个让AI直接控制React前端组件的开发框架。 完整的 Skill 内容见：https://321skill.com/skills/use-ai/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把‘买牛奶’添加到待办列表里。”，它会直接调用你组件中暴露的 `addTodo` 工具函数，更新前端状态并渲染新的待办项。或者说：“把主题切换到深色模式。”，AI会找到对应的切换工具并执行，即时改变页面外观。
介绍
use-ai 是一个 React 框架，旨在解决前端开发中需要将AI能力无缝集成到用户界面，并让AI能够直接调用前端组件功能的问题。它通过在组件中使用 useAI 钩子声明可用的工具（tools）和组件状态（prompt），将前端逻辑暴露给AI。
使用时，开发者只需在React组件中调用 useAI 钩子，并传入工具函数和描述状态的 prompt。然后在应用根节点包裹 UseAIProvider 并配置后端服务器地址。框架会提供一个悬浮聊天按钮UI，聚合所有子组件的工具和状态，供AI调用。
它非常适合希望快速构建由AI驱动的交互式Web应用的前端、全栈或智能体开发者。尤其适合那些希望AI不仅能聊天，还能直接操作界面元素（如添加待办事项、切换主题、提交表单）的场景。
建议在项目初期就引入此框架以构建AI原生交互。需要注意，它需要一个配套的Node.js服务器（@meetsmore-oss/use-ai-server）来协调前端与LLM的通信，并处理工具调用。
核心特点
与通常仅提供聊天接口或后端工具调用的AI SDK不同，use-ai 的核心创新在于定义了“AG-UI协议”，让LLM能够直接理解并操作React前端组件的状态和函数，实现了AI对用户界面的“直接控制”，而非简单的信息问答。
注意事项
不适合仅需传统聊天交互或无需AI操作前端DOM的简单项目。
常见问题
use-ai 和普通的聊天机器人API有什么区别？
它允许AI直接调用你定义的前端函数来操作界面，而不仅仅是对话。
需要自己部署LLM吗？
需要，use-ai-server 负责协调，你需要为其配置自己的LLM API（如OpenAI、Anthropic）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/use-ai/raw/index.md 读取 use-ai 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/use-ai/raw/index.md（查看排版版本）