Agentify Components

Agentify Components

React コンポーネントにセマンティックメタデータを追加し、AI システムや自動化ツールが「エージェント対応」できるようにするフレームワークです。

概要

Agentify Components は、UI コンポーネントを AI エージェントが理解できるようにするという課題を解決します。AI アシスタントが Web アプリケーションを操作する場合、通常、各コンポーネントの機能や操作方法、処理するデータに関するコンテキストが不足しています。

このフレームワークは、次のようなデコレーターを通じて、コンポーネントにセマンティックレイヤーを追加します。

1. コンポーネントのメタデータを登録 - コンポーネントの機能や動作を定義します
2. 標準化されたスキーマを提供 - さまざまなコンポーネントタイプに一貫したメタデータ構造を作成します
3. 設定ファイルを生成 - ビルド時に MCP サーバーを作成します

🚀 注記： このフレームワークは、動作の変更ではなく、コンポーネントのメタデータに重点を置いています。機能を変更せずに、AI システムがコンポーネントの「自己説明」を読み取れるようにします。

インストール

npm install @anvosio/agentify-components

ロードマップ

現時点では、MCP サーバーのみを生成します。ほかにも重要なマイルストーンはありますが、次に最も重要なのは、すでに作成している多数のツールとともに LLM に渡せるローカルツールを構築できるようにすることです。

これにより、フロントエンドツールとバックエンドツールの両方を利用できます。

未完成！最終更新日：2025年3月14日

コアコンセプト

コンポーネントタイプ

現在、Agentify は主に3種類のコンポーネントをサポートしています。（以下の機能は削除され、現時点では API とナビゲーションの動作に限定されています）

• 検索バー - ナビゲーションまたは API 動作を伴う検索入力用
• フォーム - フィールドレベルのメタデータを伴うデータ収集用
• ボタン - ナビゲーション、API、または UI 操作の動作を伴うアクション用

Model Context Protocol（MCP）

Model Context Protocol（MCP）は、Anthropic が開発したオープン標準で、AI モデルを外部のデータソースやツールに接続します。クライアント・サーバーアーキテクチャを採用しており、AI アシスタントが Google Drive、Slack、データベースなど、さまざまなシステムのライブデータにアクセスして、最新のコンテキストで応答を強化できます134。MCP は、安全で標準化された接続のための汎用プロトコルを提供することで、カスタム API コネクターを再利用可能な MCP サーバーに置き換え、連携を簡素化します。

フレームワークのアーキテクチャ

このフレームワークは、次の4つの主要な部分で構成されています。

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 (
      <input 
        type="search" 
        onChange={(e) => 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 onSubmit={this.props.onSubmit}>
        {/* Form fields */}
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

ボタンをエージェント対応させる

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 (
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    );
  }
}

汎用コンポーネントをエージェント対応させる例

@anvos/agentify-components パッケージには、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 <button id="login-btn">Login</button>;
});

例2：プロパティを直接割り当てる関数コンポーネント

また、関数コンポーネントを作成し、agentConfig プロパティを直接割り当てることもできます。

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

export const LoginButton2: AgentComponent = () => {
  return <button id="login-btn">Login</button>;
};

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 <button id="home-btn">Home</button>;
  }
}

export { HomeButton };

各アプローチの使い分け

• HOC パターン（例1）：既存の関数コンポーネントにエージェントの設定を適用する必要がある場合や、コンポーネントとその設定を分離して管理したい場合に最適です。
• プロパティの直接割り当て（例2）：関数コンポーネントに最も簡単に適用できる方法です。コンポーネントの定義と設定を同じファイル内で行う場合に便利です。
• デコレーターパターン（例3）：クラスコンポーネントに最も洗練された方法で、TypeScript デコレーターによるすっきりとした構文を提供します。

MCP ツールのスキーマ型マッピング

MCP サーバーの生成時には、以下の JSON Schema から Zod 型へのマッピングが使用されます。

JSON Schema の型	Zod スキーマの型
string	z.string()
number	z.number()
boolean	z.boolean()
array	z.array(z.string())
object	z.object({})
integer	z.number()
float	z.number()
date	z.date()
datetime	z.date()
time	z.date()

これらのマッピングは、コンポーネントのメタデータを 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 サーバーを生成します。

MCP サーバーをデプロイするには、以下を実行します。

npm run deploy:mcp

これにより、MCP サーバーが GitHub 上の Anvos コミュニティ MCP サーバーにデプロイされ、ユーザーが簡単にアクセスできるようになります。設定は固有の URL から利用でき、その URL を MCP プロトコルに対応した AI システムやツールと共有できます。

さらに一歩進め、MCP サーバー全体ではなく、クライアントに必要なツールだけを返すようにしたいと考えています。そうしないと、不要なツールによって MCP クライアントが過剰に埋め尽くされてしまうためです。

コンポーネント設定オプション

各コンポーネントタイプの詳細な設定オプションについては、セットアップガイドをご覧ください。

ドキュメント

• セットアップガイド - 詳細な手順と設定オプション
• 製品要件定義書 - プロジェクトの完全な仕様とロードマップ

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

このプロジェクトは MIT ライセンスのもとでライセンスされています。詳細については LICENSE ファイルをご覧ください。