Chrome MCP Server

When adding elements via the addElement action, the script uses an internal helper createFullExcalidrawElement(skeleton) to ensure elements have all required properties.

If you are providing a partial element (a "skeleton"), the script will automatically inject the following properties:

• id: A unique random string.
• seed: A random integer.
• versionNonce: A random integer.
• updated: Current timestamp.
• isDeleted: false (default).
• fillStyle: 'hachure' (default).
• strokeWidth: 1 (default).
• strokeStyle: 'solid' (default).
• roughness: 1 (default).
• opacity: 100 (default).
• angle: 0 (default).
• groupIds: [] (default).
• strokeColor: '#000000' (default).
• backgroundColor: 'transparent' (default).
• version: 1 (default).
• locked: false (default).

Note: Any properties provided in your skeleton object will override these defaults.

Chrome MCP Server is a browser automation platform that connects AI assistants to Chrome browser functionality via the Model Context Protocol (MCP). The architecture is divided into several layers:

1. AI Assistant Layer: Clients like Claude Desktop or custom MCP clients.
2. MCP Protocol Layer: Handles HTTP/SSE transport, manages the MCP server instance, and maintains a tool registry.
3. Native Server Layer (app/native-server/): A Fastify-based HTTP server that implements the MCP protocol and acts as a bridge to Chrome via Native Messaging.
4. Chrome Extension Layer (app/chrome-extension/): Built with WXT and Vue 3, it contains background scripts (coordinators), content scripts (interaction/extraction), popup interfaces, and offscreen documents (for AI processing).
5. Browser APIs Layer: Accesses Chrome and Web APIs.
6. AI Processing Layer: Includes a semantic engine, vector database, and a SIMD-optimized math engine using WebAssembly.

Chrome MCP Server uses a multi-layered architecture to bridge AI assistants (like Claude Desktop) with Chrome browser capabilities via the Model Context Protocol (MCP).

The Four Main Layers:

1. AI Assistant Layer: The client (e.g., Claude Desktop or custom MCP clients) that initiates requests.
2. MCP Protocol Layer: Handles communication via HTTP/SSE and manages the Tool Registry and MCP Server instance.
3. Native Server Layer: A Fastify-based server that acts as a bridge using Native Messaging to communicate with the Chrome extension.
4. Chrome Extension Layer: The orchestrator within the browser, using Background Scripts, Content Scripts, and Offscreen Documents to execute tools and access Chrome/Web APIs.

Data Flow for Tool Execution:

1. AI Assistant sends a Tool Call to the Native Server.
2. Native Server sends a Native Message to the Chrome Extension.
3. Chrome Extension executes the tool via Browser APIs.
4. The API Response flows back through the Extension $\rightarrow$ Native Server $\rightarrow$ AI Assistant as an MCP Response.

graph TB
    subgraph "AI Assistant Layer"
        A[Claude Desktop]
        B[Custom MCP Client]
        C[Other AI Tools]
    end

    subgraph "MCP Protocol Layer"
        D[HTTP/SSE Transport]
        E[MCP Server Instance]
        F[Tool Registry]
    end

    subgraph "Native Server Layer"
        G[Fastify HTTP Server]
        H[Native Messaging Host]
        I[Session Management]
    end

    subgraph "Chrome Extension Layer"
        J[Background Script]
        K[Content Scripts]
        L[Popup Interface]
        M[Offscreen Documents]
    end

    subgraph "Browser APIs Layer"
        N[Chrome APIs]
        O[Web APIs]
        P[Native Messaging]
    end

    subgraph "AI Processing Layer"
        Q[Semantic Engine]
        R[Vector Database]
        S[SIMD Math Engine]
        T[Web Workers]
    end

The property panel uses a container-based input system instead of standalone <input> elements. This allows for prefixing (labels/icons) and suffixing (units/icons) while maintaining consistent hover and focus styles via the :focus-within pseudo-class.

Target HTML Structure:

<div class="we-field">
  <span class="we-field-label">Label Name</span>
  <div class="we-input-container">
    <span class="we-input-container__prefix">Prefix</span>
    <input class="we-input-container__input" />
    <span class="we-input-container__suffix">Suffix</span>
  </div>
</div>

Implementation Details:

• Styles for .we-input-container, .we-input-container__prefix, and .we-input-container__suffix are defined in shadow-host.ts.
• The ui/property-panel/components/input-container.ts component manages this structure.
• Use the css-helpers.ts module (providing extractUnitSuffix, hasExplicitUnit, and normalizeLength) to handle unit logic within these containers.

<div class="we-field">
  <span class="we-field-label">Position</span>
  <div class="we-input-container">
    <span class="we-input-container__prefix">X</span>
    <input class="we-input-container__input" />
    <span class="we-input-container__suffix">px</span>
  </div>
</div>