Agentify Components

代理组件

](https://www.npmjs.com/package/@anvos/agentify-components) 

一个为React组件添加语义元数据的框架，使其对AI系统和自动化工具具有“代理感知”。

概述

Agentify Components解决了让AI代理可以理解UI组件的问题。当人工智能助手与web应用程序交互时，它们通常缺乏关于组件功能、如何与它们交互以及它们处理什么数据的上下文。

该框架通过装饰器为您的组件添加了一个语义层，该装饰器：

1. 注册组件元数据 -定义组件的功能及其行为方式
2. 提供标准化的架构 -为不同的组件类型创建一致的元数据结构
3. 生成配置文件 -在构建时创建MCP服务器

🚀 注： 该框架侧重于 *组件元数据* 而不是行为改变。它使您的组件在不改变其功能的情况下对AI系统进行“自我描述”。

安装

npm install @anvosio/agentify-components

路线图

目前，这只会生成一个MCP服务器。除其他事项外，下一个最重要的里程碑是能够构建本地工具，这些工具可以与您已经构建的其他工具一起传递给llms

这使您既可以使用前端工具，也可以使用后端工具

还没完！最后更新于2025年3月14日

核心概念

组件类型

Agentfy目前支持三种主要组件类型：（以下内容已被删除，目前仅限于API和导航行为）

• 搜索栏 -对于具有导航或API行为的搜索输入
• 表单 -用于使用字段级元数据进行数据收集
• 按钮 -对于具有导航、API或UI交互行为的操作

模型上下文协议（MCP）

模型上下文协议（MCP）是Anthropic开发的一个开放标准，用于将AI模型与外部数据源和工具连接起来。它使用客户端-服务器架构，允许人工智能助手访问来自Google Drive、Slack或数据库等各种系统的实时数据，用最新的上下文增强他们的响应134。MCP为安全和标准化连接提供通用协议，用可重复使用的MCP服务器取代定制的API连接器，从而简化了集成

框架架构

该框架由四个主要部分组成：

1. 装饰器（@AgentConfig） -将元数据附加到组件，包括通用字段和特定于协议的配置
2. 变形金刚 -将通用元数据转换为协议特定的格式（例如，目前用于MCP等协议，但将来将扩展到其他协议）
3. 生成器 -根据转换后的配置生成服务器文件内容，并针对每种协议进行定制
4. CLI工具 -处理组件，根据目标协议应用适当的转换器和生成器，并输出服务器文件

这种架构确保了灵活性——开发人员可以一次定义组件，并根据需要添加新的变压器和生成器来支持多种协议。

用法

特定类型组件代理示例（需要更新）

代理搜索栏

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

// Add semantic metadata using decorator
@AgentConfig({
  type: 'search',
  behavior: {
    type: 'api',
    endpoint: '/api/products/search',
    method: 'GET',
    queryParam: 'term'
  },
  description: 'Search for products in the catalog',
 
})
export class ProductSearch extends React.Component {
  render() {
    return (
       this.props.onSearch?.(e.target.value)}
        placeholder="Search..." 
      />
    );
  }
}

代理表格

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

// Add semantic metadata using decorator
@AgentConfig({
  type: 'form',
  behavior: {
    type: 'api',
    endpoint: '/api/auth/login',
    method: 'POST'
  },
  fields: [
    { name: 'username', type: 'text', required: true },
    { name: 'password', type: 'password', required: true }
  ],
  purpose: 'user-authentication',
  description: 'User login form for account access'
})
export class LoginForm extends React.Component {
  render() {
    return (
      
        {/* Form fields */}
        
        
        Login
      
    );
  }
}

代理按钮

import React from 'react';
import { AgentConfig } from '@anvos/agentify-components';

// Add semantic metadata using decorator
@AgentConfig({
  type: 'button',
  behavior: {
    type: 'navigation',
    href: '/checkout'
  },
  label: 'Proceed to Checkout',
  description: 'Navigate to checkout page to complete purchase'
})
export class CheckoutButton extends React.Component {
  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

通用组件代理示例

这 @anvos/agentify-components package提供了几种将代理配置添加到React组件的方法：

示例1：带有HOC的功能组件

对于功能组件，您可以使用 withAgentConfig 使用代理配置包装组件的高阶组件：

import { withAgentConfig } from '@anvos/agentify-components';

export const LoginButton = withAgentConfig({
  type: 'button',
  behavior: { type: 'api', endpoint: '/api/login', method: 'POST' },
  label: 'Login Button',
  selector: '#login-btn',
  description: 'Submits login form via API'
})(() => {
  return Login;
});

示例2：具有直接属性分配的功能组件

或者，您可以创建一个功能组件并直接分配 agentConfig 财产：

import { AgentComponent } from '@anvos/agentify-components';

export const LoginButton2: AgentComponent = () => {
  return Login;
};

LoginButton2.agentConfig = {
  type: 'button',
  behavior: { type: 'api', endpoint: '/api/login', method: 'POST' },
  label: 'Login Button',
  description: 'Submits login form via API'
};

示例3：带装饰器的类组件

对于类组件，您可以使用 @AgentConfig 装饰师直接：

import { AgentConfig } from '@anvos/agentify-components';

@AgentConfig({
  type: 'button',
  behavior: { type: 'navigation', href: '/home' },
  label: 'Home Button',
  description: 'Navigates to the home page'
})
class HomeButton extends React.Component {
  render() {
    return Home;
  }
}

export { HomeButton };

何时使用每种方法

• HOC模式（示例1）：最适合于需要将代理配置应用于现有功能组件或希望保持组件与其配置之间的分离时。
• 直接财产分配（示例2）：功能组件的最简单方法，当组件在同一文件中定义和配置时非常有用。
• 装饰图案（示例3）：最优雅的类组件选项，使用TypeScript装饰器提供干净的语法。

MCP工具模式类型映射

生成MCP服务器时，使用以下JSON模式到Zod类型的映射：

在将组件元数据转换为MCP服务器工具的适当格式时使用这些映射。

生成MCP服务器

将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');

现在，将以下脚本添加到您的package.json中：

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

这将扫描您的代码库中的代理组件，并在 /mcpServer 目录。

要部署MCP服务器，请执行以下操作：

npm run deploy:mcp

这将把您的MCP服务器部署到GitHub上的Anvos社区MCP服务器，用户可以轻松访问它。您的配置将通过一个唯一的URL提供，您可以与支持MCP协议的AI系统和工具共享。

我还打算更进一步，只重新调整客户端所需的工具，而不是整个MCP服务器，因为这会导致MCP客户端被不必要的工具填满。

组件配置选项

请参阅 安装指南 了解每种组件类型的详细配置选项。

文档

• 安装指南 -详细说明和配置选项
• 产品需求文档 -完整的项目规范和路线图

贡献

欢迎投稿！请随时提交拉取请求。

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。