자동적으로 웹 애플리케이션(SaaS 또는 소비자 호스팅)을 위한 expressive Model Context Protocol (MCP) 구현을 생성합니다.

문제 문

웹 애플리케이션(SaaS 또는 소비자-패싱)을 제공한 시스템을 설계하여 표현형 모델 컨트롤 프로토콜(MCP) 구현을 자동으로 생성합니다.

이것은 매우 어려운 문제입니다 (최소) 세 가지 이유:

• Behavior 나무 크기: 앱에는 많은 버튼과 페이지가 있습니다. 우리는이 버튼과 페이지의 가장 중요한 하위 세트를 가로 질러 애플리케이션의 기능을 설정해야합니다.

• ** 두마틱 간격**: 링크 / 버튼은 쉽게 식별 할 수 있지만,이 링크 / 버튼이 MCP를 통해 노출하는 의미있는 도구에 해당하지 않습니다. 마찬가지로, 페이지의 텍스트 정보는 읽기 작업에 관련이 있습니까?

• ** 지정 된 계층 ** : 우리는 객체 hierarchy를 입력해야합니다. MCP가 에이전트가 행동하는 것을 허용해야하는 "resources"는 무엇입니까? 어떤 도구는 리소스에 해당합니까?

나는 두 개의 별도의 작업으로 문제를 깰 : (1) MCP 사양을 정의하고 (2) 사양을 구현합니다.

설치

# 필수품

1. Python Dependencies (테스트 응용 프로그램용):

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