@W-18979555: [PWA Kit Dev Agent] Get ready to merge MCP feature to develop

packages/pwa-storefront-mcp/README.md

@@ -0,0 +1,120 @@
+# PWA Storefront MCP Server
+
+An Model Context Protocol (MCP) server that helps PWA Storefront developers with development.
+
+## What is MCP?
+
+The Model Context Protocol (MCP) is an open protocol that enables secure connections between host applications (like Claude Desktop or other AI assistants) and external data sources and tools.
+
+## Features
+
+This MCP server provides:
+- `create_new_component`: Help developers to create a new PWA Storefront component
+
+## Setup
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+## Testing the MCP Server
+
+### Method 1: Run the automated test script
+```bash
+npm test
+```
+
+This will:
+- Start the MCP server
+- Connect to it as a client
+- List available tools
+- Call the `create_new_component` tool
+- Display the results
+
+### Method 2: Manual testing with MCP clients
+
+#### Using Claude Desktop
+1. Add this server to your Claude Desktop configuration:
+```json
+{
+  "mcpServers": {
+    "pwa-storefront-server": {
+      "command": "node",
+      "args": ["server.js"],
+      "cwd": "{{$parent_dir_to_mcp}}/pwa-storefront-mcp"
+    }
+  }
+}
+```
+
+#### Using other MCP clients
+The server runs on stdio, so you can test it with any MCP-compatible client.
+
+### Method 3: Direct stdio testing
+
+You can also test directly by running the server and sending JSON-RPC messages:
+
+```bash
+# Start the server
+node server.js
+
+# Then send JSON-RPC requests to stdin:
+{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}
+{"jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": {"name": "create_new_component", "arguments": {}}}
+```
+
+## Files
+
+- `server.js` - Main MCP server implementation
+- `test-mcp.js` - Automated test script
+- `mcp.json` - MCP configuration file for clients
+- `package.json` - Node.js dependencies and scripts
+
+## Development
+
+To run the server in development mode:
+```bash
+npm start
+```
+
+The server will output debug information to stderr and handle MCP protocol messages via stdio.
+
+# Project Structure
+
+```
+/ (root)
+  - package.json
+  - package-lock.json
+  - README.md
+  - mcp.json
+  - claude_desktop_config.json
+  /src
+    /components
+      - index.js
+      - PrimaryButton.jsx
+      ... (other components)
+    /server
+      - server.js
+      - server-old-fashioned.js
+    /utils
+      - AddComponentTool.js
+    /scripts
+      - create-button.js
+      - demo.js
+    /tests
+      - test-mcp.js
+  /docs
+    - cursor-integration-guide.md
+  /node_modules
+  /.cursor
+```
+
+- All React components are in `src/components/`.
+- Server code is in `src/server/`.
+- Utilities/tools are in `src/utils/`.
+- Scripts are in `src/scripts/`.
+- Tests are in `src/tests/`.
+- Documentation is in `docs/`.
+
+Update your import paths accordingly. 

packages/pwa-storefront-mcp/claude_desktop_config.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "pwa-storefront-mcp": {
+      "command": "node",
+      "args": ["/Users/wei.liu/dev/git-repos/pwa-kit/packages/pwa-storefront-mcp/src/server/server.js"]
+    }
+  }
+} 

packages/pwa-storefront-mcp/demo.js

@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+
+// Example React code to analyze and modify
+const exampleCode = `import React from 'react';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>My PWA Storefront</h1>
+      </header>
+    </div>
+  );
+}
+
+export default App;`;
+
+async function demonstrateMCPTools() {
+  console.log('🚀 Demonstrating MCP Server Tools...\n');
+
+  // Start the MCP server process
+  const serverProcess = spawn('node', ['src/server/server.js'], {
+    stdio: ['pipe', 'pipe', 'pipe']
+  });
+
+  let responseData = '';
+
+  serverProcess.stdout.on('data', (data) => {
+    responseData += data.toString();
+  });
+
+  serverProcess.stderr.on('data', (data) => {
+    console.log('Server:', data.toString().trim());
+  });
+
+  try {
+    // Initialize connection
+    const initRequest = {
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'initialize',
+      params: {
+        protocolVersion: '2024-11-05',
+        capabilities: {},
+        clientInfo: { name: 'demo-client', version: '1.0.0' }
+      }
+    };
+    serverProcess.stdin.write(JSON.stringify(initRequest) + '\n');
+    await wait(500);
+
+    // Test 1: Analyze code structure
+    console.log('📋 1. Analyzing code structure...');
+    const analyzeRequest = {
+      jsonrpc: '2.0',
+      id: 2,
+      method: 'tools/call',
+      params: {
+        name: 'analyze_code_structure',
+        arguments: { code: exampleCode }
+      }
+    };
+    serverProcess.stdin.write(JSON.stringify(analyzeRequest) + '\n');
+    await wait(1000);
+
+    // Test 2: Insert a Product Card component
+    console.log('\n🛍️ 2. Inserting a ProductCard component...');
+    const insertRequest = {
+      jsonrpc: '2.0',
+      id: 3,
+      method: 'tools/call',
+      params: {
+        name: 'insert_react_component',
+        arguments: {
+          code: exampleCode,
+          componentType: 'product',
+          options: {
+            name: 'ProductCard',
+            styling: 'tailwind',
+            showPrice: true,
+            showRating: true
+          }
+        }
+      }
+    };
+    serverProcess.stdin.write(JSON.stringify(insertRequest) + '\n');
+    await wait(1000);
+
+    // Test 3: Create a new Button component file
+    console.log('\n🔘 3. Creating a new Button component file...');
+    const createRequest = {
+      jsonrpc: '2.0',
+      id: 4,
+      method: 'tools/call',
+      params: {
+        name: 'create_component_file',
+        arguments: {
+          componentName: 'PrimaryButton',
+          componentType: 'button',
+          options: {
+            variant: 'primary',
+            size: 'medium',
+            styling: 'tailwind'
+          }
+        }
+      }
+    };
+    serverProcess.stdin.write(JSON.stringify(createRequest) + '\n');
+    await wait(1000);
+
+    // Parse and display results
+    console.log('\n📨 Results:');
+    parseAndDisplayResults(responseData);
+
+  } catch (error) {
+    console.error('❌ Error:', error);
+  } finally {
+    serverProcess.kill();
+  }
+}
+
+function parseAndDisplayResults(responseData) {
+  if (!responseData.trim()) {
+    console.log('No responses received');
+    return;
+  }
+
+  const responses = responseData.trim().split('\n').filter(line => line.trim());
+
+  responses.forEach((response, index) => {
+    try {
+      const parsed = JSON.parse(response);
+      if (parsed.id === 1) {
+        console.log('✅ Server initialized');
+      } else if (parsed.id === 2 && parsed.result) {
+        const data = JSON.parse(parsed.result.content[0].text);
+        console.log('\n📊 Code Analysis:');
+        console.log(`- Components found: ${data.summary.totalComponents}`);
+        console.log(`- Imports found: ${data.summary.totalImports}`);
+        console.log(`- Has React: ${data.summary.hasReact}`);
+        console.log(`- Has Tailwind: ${data.summary.hasTailwind}`);
+        console.log(`- Insertion points: ${data.summary.insertionPoints}`);
+      } else if (parsed.id === 3 && parsed.result) {
+        const data = JSON.parse(parsed.result.content[0].text);
+        if (data.success) {
+          console.log('\n✅ Component inserted successfully!');
+          console.log('Modified code preview:');
+          console.log('```javascript');
+          console.log(data.modifiedCode.substring(0, 500) + '...');
+          console.log('```');
+        }
+      } else if (parsed.id === 4 && parsed.result) {
+        const data = JSON.parse(parsed.result.content[0].text);
+        if (data.success) {
+          console.log('\n✅ New component file created!');
+          console.log(`Component: ${data.componentName}`);
+          console.log('Generated code preview:');
+          console.log('```javascript');
+          console.log(data.code.substring(0, 300) + '...');
+          console.log('```');
+        }
+      }
+    } catch (e) {
+      console.log(`Response ${index + 1}:`, response);
+    }
+  });
+}
+
+function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+demonstrateMCPTools().catch(console.error);