任意のWebアプリケーション(SaaSまたはコンシューマ・フェーシング)に対して、明示的なモデルコンテキスト・プロトコル(MCP)の実装を自動的に生成するシステム。

問題の声明

ウェブアプリケーション(SaaSまたはコンシューマ・フェーシング)を与えられたシステムの設計は、明示的なモデル・コントロール・プロトコル(MCP)の実装を自動的に生成できます。

これは(少なくとも)3つの理由でかなり難しい問題です。

• Behaviorの木のサイズ: アプリには多くのボタンやページがあります。 これらのボタンとページの重要なサブセットは、アプリケーションの機能を確立する必要があります。

• 顕著なギャップ: リンク/ボタンは簡単に識別できますが、これらのリンク/ボタンがMCPを介した意味のあるツールに対応すると、クリアではありません。 同様に、ページ上のテキスト情報は、読み取り操作に関連していますか?

• 下指定階層: オブジェクト階層を誘導する必要があります。 MCP がエージェントが動作できるようにすべき「リソース」とは? どのツールがどのリソースに対応していますか?

課題を2つの別々のタスクに分割します。(1)はMCP仕様を定義し、(2)仕様を実装します。

インストール

前提条件

1. Python依存関係(テストアプリケーションの場合):

web2mcp

A system that automatically generates expressive Model Context Protocol (MCP) implementations for any web application (SaaS or consumer-facing).

Problem Statement

Design a system that, given any web application (SaaS or consumer-facing), can automatically generate an expressive Model Control Protocol (MCP) implementation.

This is a fairly hard problem for (at least) three reasons:

• Behavior tree size: Apps have many buttons and pages. We must traverse at least the important subset of these buttons and pages to establish an application’s capabilities.

• Semantic gap: While links/buttons can be easily identified, it’s not clear when these links/buttons correspond to a meaningful tool to expose via the MCP. Similarly, what textual information on the page is relevant for read operations?

• Under-specified hierarchy: We must infer the object hierarchy. What are the “resources” that the MCP should allow agents to act on? Which tools correspond to which resources?

I break the problem into two separate tasks: (1) define the MCP specification and (2) implement the specification.

Installation

Prerequisites

1. Python Dependencies (for the test application):

   cd test
   pip3 install -r requirements.txt
   

2. Node.js Setup:

   nvm use 18
   npm install
   

3. Environment Variables:

   cp .env.example .env
   

   Then edit .env and set the following variables:

   BROWSERBASE_PROJECT_ID="YOUR_BROWSERBASE_PROJECT_ID"
   BROWSERBASE_API_KEY="YOUR_BROWSERBASE_API_KEY"
   OPENAI_API_KEY="THIS_IS_OPTIONAL_WITH_OPENAI_KEY"
   # SPA Crawler Configuration
   SPA_CRAWLER_URL="http://localhost:8000"
   SPA_CRAWLER_USERNAME="[email protected]"
   SPA_CRAWLER_PASSWORD="password123"
   SPA_CRAWLER_MAX_DEPTH="1"
   SPA_CRAWLER_ENV="LOCAL"
   

   By default, the SPA_* environment variables work for the demo app.

Getting Started

Example MCP Implementation

You can try a derived MCP for the demo email application:

1. Run the demo app:

   cd test
   python3 app.py
   

2. In a new terminal in the root directory:

   npm run build:mcp
   npx @modelcontextprotocol/inspector node dist/dynamicMcpServer.js test/exampleMcpConfig.json test/exampleSummaryPageActions.json
   

3. Try the MCP in the launched browser window

Example MCP Derivation

1. Start the demo app:

   cd test
   python3 app.py
   

2. In the root directory, run the crawler:

   npx tsx spaCrawler.ts
   

3. The resulting output is in outputMcpConfig.json and outputSummaryPageActions.json

4. Use those with the MCP server:

   npm run build:mcp
   node dist/dynamicMcpServer.js outputMcpConfig.json outputSummaryPageActions.json
   

Project Structure

• spaCrawler.ts - Main crawler that analyzes web applications and generates MCP configurations
• dynamicMcpServer.ts - Dynamic MCP server implementation