基本能力
产品定位
Agentify Components 旨在解决 AI 代理与 Web 应用程序交互时缺乏上下文信息的问题，通过为 UI 组件添加语义元数据，使其能够被 AI 系统理解和操作。
核心功能
- 注册组件元数据：定义组件的行为和功能。
- 提供标准化模式：为不同类型的组件创建一致的元数据结构。
- 生成配置文件：在构建时生成 MCP 服务器。
- 支持多种组件类型：包括搜索栏、表单和按钮等。
- 灵活的架构：支持通过添加新的转换器和生成器来扩展协议支持。
适用场景
- AI 代理与 Web 应用程序的交互
- 自动化工具对 UI 组件的理解和操作
- 需要为组件添加语义元数据的开发场景
工具列表
- 装饰器 (@AgentConfig)：为组件添加元数据。
- 转换器：将通用元数据转换为协议特定格式。
- 生成器：根据转换后的配置生成服务器文件内容。
- CLI 工具：处理组件并输出服务器文件。
常见问题解答
- Q: 该框架是否会修改组件的行为？
A: 不会，它仅使组件能够自我描述，而不改变其功能。 - Q: 支持哪些组件类型？
A: 目前支持搜索栏、表单和按钮。
使用教程
使用依赖
确保已安装 Node.js 和 npm。
安装教程
bash
npm install @anvosio/agentify-components
调试方式
- 在项目根目录下创建
generate.ts文件并添加以下代码：
```javascript
import { generateMCPServer } from '@anvos/agentify-components';
import * as components from './components/ButtonExample';
const componentList = Object.values(components);
console.log(componentList);
generateMCPServer(componentList, './mcpServer');
2. 在 `package.json` 中添加以下脚本：javascript
"scripts": {
"build:mcp": "ts-node ./generate.ts",
"deploy:mcp": "echo 'STILL WORKING ON IT'"
}
3. 运行以下命令生成 MCP 服务器：bash
npm run build:mcp
4. 部署 MCP 服务器：bash
npm run deploy:mcp
```
