How to Build an AI‑Powered MCP Plugin for Automatic Code Generation

The Model Context Protocol (MCP) introduced by Anthropic in November 2024 provides a standardized way for large language models (LLMs) to interact with external tools and data sources, acting as an "AI USB‑C".

MCP Core Capabilities

Unified integration standard : a single protocol for all tool integrations.

Real‑time data updates : dynamic data exchange instead of static connections.

Automatic tool discovery : the model can discover available tools and their contexts.

Privacy protection : data and tools stay local, no remote upload required.

Development efficiency : reduces development time and improves reliability.

Core Objects Defined by MCP

MCP servers expose three core objects: tools, resource templates, and direct resources. The following diagram illustrates a typical server description.

Using MCP with the TypeScript SDK

Two main classes are used: Client for connecting to an MCP server and sending requests, and McpServer for defining tools and handling calls.

import { Client } from "@modelcontextprotocol/sdk/client/index.js";

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
const server = new McpServer({ name: "my-mcp-service", version: "1.0.0" });

Transport layers such as StdioServerTransport and SSEServerTransport enable communication over CLI or web sockets.

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";

Development Workflow

Initialize the McpHub and create connections for each server.

Register tools with server.setRequestHandler, defining input schemas and handling logic.

When the LLM decides to use a tool, it emits a use_mcp_tool block which the client parses.

The hub calls connection.client.request to invoke the tool on the server.

The server processes the request, validates parameters, executes the tool, and returns the result.

The client receives the response and forwards it back to the LLM.

Architecture Design

The system consists of five modules: MCP server, tool registration, file handling (ZIP/AST extraction), API communication (AST‑to‑React conversion), and error handling.

Practical Example: McpPixelatorServer

The McpPixelatorServer class demonstrates a full implementation that registers a process_done_zip_and_generate tool, extracts AST from a user‑selected ZIP file, calls an external API to generate React code, and returns the result to the AI client.

class McpPixelatorServer {
  private server: Server;
  private zipHandler: ZipHandler;
  // ... constructor initializes token, server, and tool handlers
  private setupToolHandlers() {
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [{
        name: "process_done_zip_and_generate",
        description: "Read a Done ZIP and generate React code",
        inputSchema: { /* schema omitted for brevity */ }
      }]
    }));
    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
      if (request.params.name === "process_done_zip_and_generate") {
        // ZIP handling, AST extraction, API call, result formatting
      } else {
        throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}`);
      }
    });
  }
}

Running the server uses a standard I/O transport:

async run() {
  const transport = new StdioServerTransport();
  await this.server.connect(transport);
  console.error("MCP Pixelator server is running...");
}

Challenges and Future Work

The current flow uses a separate LLM to call MCP, which can be streamlined into a single conversation.

Mobile and large‑screen adaptations are still weak; future versions should target Weex, mobile, and other platforms.

Long‑running D2C image‑to‑code tasks may hit timeout limits; configurable timeouts are needed.

References

MCP official documentation

Roo source code

MCP TypeScript SDK

AI Data Connection article

ByteByteGo MCP overview