Agentify Components

基本能力

产品定位

Agentify Components 旨在解决 AI 代理与 Web 应用程序交互时缺乏上下文信息的问题，通过为 UI 组件添加语义元数据，使其能够被 AI 系统理解和操作。

核心功能

1. 注册组件元数据：定义组件的行为和功能。
2. 提供标准化模式：为不同类型的组件创建一致的元数据结构。
3. 生成配置文件：在构建时生成 MCP 服务器。
4. 支持多种组件类型：包括搜索栏、表单和按钮等。
5. 灵活的架构：支持通过添加新的转换器和生成器来扩展协议支持。

适用场景

• AI 代理与 Web 应用程序的交互
• 自动化工具对 UI 组件的理解和操作
• 需要为组件添加语义元数据的开发场景

工具列表

1. 装饰器 (@AgentConfig)：为组件添加元数据。
2. 转换器：将通用元数据转换为协议特定格式。
3. 生成器：根据转换后的配置生成服务器文件内容。
4. CLI 工具：处理组件并输出服务器文件。

常见问题解答

• Q: 该框架是否会修改组件的行为？ A: 不会，它仅使组件能够自我描述，而不改变其功能。
• Q: 支持哪些组件类型？ A: 目前支持搜索栏、表单和按钮。

使用教程

使用依赖

确保已安装 Node.js 和 npm。

安装教程

npm install @anvosio/agentify-components

调试方式

1. 在项目根目录下创建 generate.ts 文件并添加以下代码：

import { generateMCPServer } from '@anvos/agentify-components';
import * as components from './components/ButtonExample';

const componentList = Object.values(components);

console.log(componentList);
generateMCPServer(componentList, './mcpServer');

1. 在 package.json 中添加以下脚本：

"scripts": {
  "build:mcp": "ts-node ./generate.ts",
  "deploy:mcp": "echo 'STILL WORKING ON IT'"
}

1. 运行以下命令生成 MCP 服务器：

npm run build:mcp

1. 部署 MCP 服务器：

npm run deploy:mcp

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。