Claude Code MCP: Building an AI Plugin Ecosystem with the Model Context Protocol

1Host (Claude Code)
2  ├-- Client A ←→ Server A (Playwright)
3  ├-- Client B ←→ Server B (Firebase)
4  └-- Client C ←→ Server C (GitHub)

1// Server capability declaration
2const server = new McpServer({
3  name: "my-server",
4  version: "1.0.0",
5  capabilities: {
6    tools: {},        // Tool-calling support
7    resources: {},    // Resource sharing
8    prompts: {},      // Prompt templates
9  }
10});

1{
2  "mcpServers": {
3    "playwright": {
4      "type": "stdio",
5      "command": "npx",
6      "args": ["@anthropic/mcp-playwright"]
7    }
8  }
9}

1import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
2import { z } from "zod";
3 
4const server = new McpServer({
5  name: "project-tools",
6  version: "1.0.0"
7});
8 
9// Tool definition
10server.tool(
11  "analyze-code",
12  "Analyzes a code file and produces a quality report",
13  {
14    filePath: z.string().describe("Path of the file to analyze"),
15    language: z.enum(["typescript", "swift", "python"]).describe("Programming language"),
16    includeMetrics: z.boolean().optional().describe("Compute metrics")
17  },
18  async ({ filePath, language, includeMetrics }) => {
19    // Tool logic goes here
20    const analysis = await analyzeFile(filePath, language);
21 
22    return {
23      content: [{
24        type: "text",
25        text: JSON.stringify(analysis, null, 2)
26      }]
27    };
28  }
29);

1// Static resource
2server.resource(
3  "project-config",
4  "config://project",
5  async (uri) => ({
6    contents: [{
7      uri: uri.href,
8      mimeType: "application/json",
9      text: JSON.stringify(projectConfig)
10    }]
11  })
12);
13 
14// Dynamic resource template
15server.resource(
16  "blog-post",
17  new ResourceTemplate("blog://{slug}", { list: undefined }),
18  async (uri, { slug }) => ({
19    contents: [{
20      uri: uri.href,
21      mimeType: "text/markdown",
22      text: await getBlogContent(slug)
23    }]
24  })
25);

1server.prompt(
2  "code-review",
3  { code: z.string(), language: z.string() },
4  ({ code, language }) => ({
5    messages: [{
6      role: "user",
7      content: {
8        type: "text",
9        text: \`Review this \${language} code:\n\n\${code}\`
10      }
11    }]
12  })
13);

1# Create the project
2mkdir my-mcp-server && cd my-mcp-server
3npm init -y
4npm install @modelcontextprotocol/sdk zod

1// src/index.ts
2import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
3import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
4import { z } from "zod";
5 
6const server = new McpServer({
7  name: "ios-helper",
8  version: "1.0.0"
9});
10 
11// Xcode project analysis tool
12server.tool(
13  "analyze-xcode-project",
14  "Analyzes an Xcode project and lists its dependencies and targets",
15  {
16    projectPath: z.string().describe("Path to the .xcodeproj or .xcworkspace")
17  },
18  async ({ projectPath }) => {
19    // pbxproj parse logic
20    const targets = await parseXcodeProject(projectPath);
21    return {
22      content: [{
23        type: "text",
24        text: JSON.stringify(targets, null, 2)
25      }]
26    };
27  }
28);
29 
30// Swift file analysis tool
31server.tool(
32  "swift-complexity",
33  "Calculates the cyclomatic complexity of a Swift file",
34  {
35    filePath: z.string(),
36    threshold: z.number().optional().default(10)
37  },
38  async ({ filePath, threshold }) => {
39    const complexity = await calculateComplexity(filePath);
40    const warnings = complexity.functions
41      .filter(f => f.complexity > threshold)
42      .map(f => \`\${f.name}: \${f.complexity} (limit: \${threshold})\`);
43 
44    return {
45      content: [{
46        type: "text",
47        text: warnings.length > 0
48          ? \`Warning: \${warnings.length} function(s) exceed the threshold:\n\${warnings.join("\n")}\`
49          : "All functions are below the threshold."
50      }]
51    };
52  }
53);
54 
55// Start the server
56const transport = new StdioServerTransport();
57await server.connect(transport);

1{
2  "mcpServers": {
3    "playwright": {
4      "type": "stdio",
5      "command": "npx",
6      "args": ["@anthropic/mcp-playwright"]
7    },
8    "firebase": {
9      "type": "stdio",
10      "command": "npx",
11      "args": ["firebase-mcp-server"],
12      "env": {
13        "FIREBASE_PROJECT_ID": "my-project"
14      }
15    },
16    "context7": {
17      "type": "stdio",
18      "command": "npx",
19      "args": ["-y", "@upstash/context7-mcp"]
20    },
21    "my-custom-server": {
22      "type": "stdio",
23      "command": "node",
24      "args": ["./tools/mcp-server/dist/index.js"]
25    }
26  }
27}

1mcp__<server-name>__<tool-name>

1// Browser control over MCP
2// Claude Code calls these tools in order:
3 
4// 1. Navigate to the page
5mcp__playwright__browser_navigate({ url: "https://muhittincamdali.com" })
6 
7// 2. Take a snapshot
8mcp__playwright__browser_snapshot()
9 
10// 3. Click an element
11mcp__playwright__browser_click({ ref: "nav-blog", element: "Blog link" })
12 
13// 4. Take a screenshot
14mcp__playwright__browser_take_screenshot({ type: "png" })

1// Fetch library documentation
2mcp__context7__resolve_library_id({
3  libraryName: "next.js",
4  query: "app router middleware"
5})
6 
7mcp__context7__query_docs({
8  libraryId: "/vercel/next.js",
9  query: "static export configuration"
10})

1server.tool(
2  "query-analytics",
3  "Runs a query against the analytics database",
4  {
5    dateRange: z.object({
6      start: z.string(),
7      end: z.string()
8    }),
9    metric: z.enum(["page_views", "unique_visitors", "bounce_rate"])
10  },
11  async ({ dateRange, metric }) => {
12    const result = await db.query(
13      \`SELECT date, value FROM analytics
14       WHERE metric = ? AND date BETWEEN ? AND ?\`,
15      [metric, dateRange.start, dateRange.end]
16    );
17    return { content: [{ type: "text", text: JSON.stringify(result) }] };
18  }
19);

1server.tool(
2  "file-read",
3  "File read (safe)",
4  {
5    path: z.string()
6      .refine(p => !p.includes(".."), "Path traversal is not allowed")
7      .refine(p => p.startsWith("/workspace"), "Only inside the workspace"),
8    maxLines: z.number().min(1).max(1000).default(100)
9  },
10  async ({ path, maxLines }) => {
11    // Safe file read
12  }
13);