Webmcp

🚀 WebMCP - Website Client Large Language Model Support Tool

WebMCP is an innovative tool designed to enable websites to support large language models (LLMs) on the client side. By providing an npm package, it simplifies the process of integrating and managing LLMs on the front - end. Although the project is currently in its early stages, it has already demonstrated its powerful functionality and potential.

🚀 Quick Start

Installation and Usage

Installing WebMCP only requires one line of command:

npm install webmcp

Initial Configuration

Initialize the MCP server and run the following command:

npx webmcp --init

If you need Docker support, add the --docker parameter.

📚 Website Integration Guide

Import the WebMCP Script

Import the WebMCP script into your website to support MCP functionality:

// index.html
<script src="https://cdn.jsdelivr.net/npm/webmcp/dist/webmcp.min.js"></script>

Automatic Widget Display

WebMCP provides an easy - to - use console widget for users to interact with MCP.

🔧 Technical Details

Core Process

1. Initial Connection: The MCP client connects to the MCP server using an internal token.
2. Obtain Registration Token: The user requests and obtains a token for website registration.
3. Website Registration: The user enters the token on the website to complete the connection to the WebSocket server and session token assignment.
4. Tool Interaction: The MCP client communicates with the website through the server, executes tool requests, and returns results.

Network Architecture

sequenceDiagram
    participant User
    participant MCP (MCP Client)
    participant Server (MCP Server)
    participant WS (WebSocket Server)
    participant Web (Website)

    %% Initial connection
    MCP->>Server: Connect to /mcp using internal token

    %% Website registration token
    User->>MCP: Request registration token
    MCP->>Server: Request registration token
    Server-->>MCP: Return registration token
    MCP-->>User: Display registration token

    %% Website registration
    User->>Web: Enter registration token
    Web->>WS: Connect to /register using token and domain name (token is deleted)
    WS-->>Web: Allocate channel and session token
    Web->>WS: Connect to the specified channel

    %% Tool interaction
    MCP->>Server: Request tool list
    Server->>WS: Forward the request
    WS->>Web: Request tool list
    Web-->>WS: Return tool list
    WS-->>Server: Forward tool list
    Server-->>MCP: Return tool list

    %% Tool execution
    MCP->>Server: Tool request
    Server->>WS: Forward the request
    WS->>Web: Execute tool operation
    Web-->>WS: Return result
    WS-->>Server: Forward result
    Server-->>MCP: Return result

    %% Disconnect
    User->>Web: Request disconnection
    Web->>WS: Close the connection

⚠️ Security Considerations

This project is still in its early stages, and we attach great importance to security. To prevent malicious extensions and prompt injection attacks, please actively provide suggestions for security improvements.

✨ Features

• Token Generator: Used in the website registration process.
• MCP Tool Definer: Simplifies the process of building tool schemas.

If you need the JavaScript code for specific tools, you can ask further.

🐳 Docker Support

The project provides a Dockerfile specifically designed for Smithery deployment. If you want to run the WebSocket server using Docker, refer to the provided docker-compose.yml example file.

When the MCP client configuration includes the --docker parameter and is combined with --mcp, the client will assume that the WebSocket server is running in a Docker container and communicate through the container connection.