You will be led to mcp.json file. Add this to your mcp.json:
-``` json
+
+```json
{
"mcpServers": {
@@ -50,6 +54,7 @@ You will be led to mcp.json file. Add this to your mcp.json:
```
Cursor will:
+
- Start the MCP server
- Connect to it as a client
- List available tools
@@ -59,12 +64,14 @@ You can go back to MCP Tools choose to enable/disable any MCP Server or tools.
### Method 2: Run MCP Server from Claude
#### Using Claude Desktop
+
1. Go to Claude menu on top menu bar then "Developer" > "Edit Config"
This will lead you to "claude_desktop_config.json" file.
2. Add this server to your claude_desktop_config.json:
+
```json
{
"mcpServers": {
@@ -78,6 +85,7 @@ This will lead you to "claude_desktop_config.json" file.
```
Claude will:
+
- Start the MCP server
- Connect to it as a client
- List available tools
@@ -129,36 +137,23 @@ The server will output debug information to stderr and handle MCP protocol messa
- mcp.json
- claude_desktop_config.json
/src
- /components
- - index.js
- - PrimaryButton.jsx
- ... (other components)
/server
- server.js
/utils
- - AddComponentTool.js
- pwa-developer-guideline-tool.js
- /scripts
- - create-button.js
- - demo.js
+ - utils.js
/tests
- /images
+ - test-mcp.js
+ /docs
+ /images
- claude-config.png
- claude-list-tools.png
- cursor-list-tools.png
- cursor-settings.pnb
- - 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.
\ No newline at end of file
diff --git a/packages/pwa-storefront-mcp/babel.config.js b/packages/pwa-storefront-mcp/babel.config.cjs
similarity index 58%
rename from packages/pwa-storefront-mcp/babel.config.js
rename to packages/pwa-storefront-mcp/babel.config.cjs
index 458a4a983a..571a665a67 100644
--- a/packages/pwa-storefront-mcp/babel.config.js
+++ b/packages/pwa-storefront-mcp/babel.config.cjs
@@ -4,4 +4,9 @@
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
-module.exports = require('@salesforce/pwa-kit-dev/configs/babel/babel-config')
+const parentConfig = require('@salesforce/pwa-kit-dev/configs/babel/babel-config').default
+
+module.exports = {
+ ...parentConfig,
+ sourceType: 'module'
+}
diff --git a/packages/pwa-storefront-mcp/demo.js b/packages/pwa-storefront-mcp/demo.js
deleted file mode 100644
index 05f865f69c..0000000000
--- a/packages/pwa-storefront-mcp/demo.js
+++ /dev/null
@@ -1,183 +0,0 @@
-#!/usr/bin/env node
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-
-import {spawn} from 'child_process'
-
-// Example React code to analyze and modify
-const exampleCode = `import React from 'react';
-import './App.css';
-
-function App() {
- return (
-
- ${
- showHeader
- ? `{title && (
-
- );
- };`,
- dependencies: ['react']
- }
- }
-
- createProductComponent(options, analysis) {
- const {name = 'ProductCard', showPrice = true, showRating = true} = options
- const useTailwind = analysis.hasTailwind || options.styling === 'tailwind'
-
- return {
- code: `const ${name} = ({ product, onAddToCart, className = '', ...props }) => {
- const { id, name: productName, price, image, rating, description } = product;
-
- return (
-
-
- )}`
- : ''
- }
- {title}
-
- {children}
-
- ${
- showFooter
- ? `{footer && (
-
- {footer}
-
- )}`
- : ''
- }
-
- {image && (
-
- );
- };`,
- dependencies: ['react']
- }
- }
-
- createModalComponent(options, analysis) {
- const {name = 'Modal', closeOnOverlay = true} = options
- const useTailwind = analysis.hasTailwind || options.styling === 'tailwind'
-
- return {
- code: `const ${name} = ({ isOpen, onClose, title, children, className = '', ...props }) => {
- useEffect(() => {
- if (isOpen) {
- document.body.style.overflow = 'hidden';
- } else {
- document.body.style.overflow = 'unset';
- }
-
- return () => {
- document.body.style.overflow = 'unset';
- };
- }, [isOpen]);
-
- if (!isOpen) return null;
-
- return (
-
- 
-
- )}
-
-
- {productName}
- {description && ( -{description}
- )} -
- ${
- showPrice
- ? `\${price}`
- : ''
- }
- ${
- showRating
- ? `{rating && (
-
- {onAddToCart && (
-
- )}
-
- ā
- {rating}
-
- )}`
- : ''
- }
-
-
-
- );
- };`,
- dependencies: ['react']
- }
- }
-
- // Helper methods
- isComponentDefinition(line) {
- return (
- /^(const|function|class)\s+[A-Z]\w*/.test(line) ||
- /^export\s+(const|function|class)\s+[A-Z]\w*/.test(line)
- )
- }
-
- extractComponentName(line) {
- const match = line.match(/(?:const|function|class)\s+([A-Z]\w*)/)
- return match ? match[1] : null
- }
-
- getComponentType(line) {
- if (line.includes('class ') && line.includes('extends')) return 'class'
- if (line.includes('function ')) return 'function'
- if (line.includes('const ') && line.includes('=>')) return 'arrow'
- return 'unknown'
- }
-
- getImportType(line) {
- if (line.includes("from 'react'")) return 'react'
- if (line.includes("from 'next/")) return 'nextjs'
- if (line.includes('.css') || line.includes('.scss')) return 'styles'
- if (line.startsWith('import ') && line.includes('./')) return 'local'
- return 'external'
- }
-
- isInsertionPoint(line, lines, index) {
- // After imports
- if (
- line.startsWith('import ') &&
- index + 1 < lines.length &&
- !lines[index + 1].trim().startsWith('import ')
- ) {
- return true
- }
-
- // Before export default
- if (line.startsWith('export default') && index > 0) return true
-
- // End of file
- if (index === lines.length - 1) return true
-
- return false
- }
-
- getInsertionType(line, lines, index) {
- if (line.startsWith('import ')) return 'after-imports'
- if (line.startsWith('export default')) return 'before-export'
- if (index === lines.length - 1) return 'end-of-file'
- return 'general'
- }
-
- getInsertionContext(lines, index) {
- const start = Math.max(0, index - 2)
- const end = Math.min(lines.length, index + 3)
- return lines.slice(start, end)
- }
-
- findBestInsertionPoint(analysis, options) {
- // Prefer after imports
- const afterImports = analysis.insertionPoints.find((p) => p.type === 'after-imports')
- if (afterImports) return afterImports
-
- // Fallback to before export
- const beforeExport = analysis.insertionPoints.find((p) => p.type === 'before-export')
- if (beforeExport) return beforeExport
-
- // Last resort: end of file
- return (
- analysis.insertionPoints.find((p) => p.type === 'end-of-file') || {
- line: 0,
- type: 'start'
- }
- )
- }
-
- performInsertion(code, component, insertionPoint, analysis) {
- const lines = code.split('\n')
- const insertLine =
- insertionPoint.type === 'before-export' ? insertionPoint.line : insertionPoint.line + 1
-
- // Add necessary imports
- const imports = this.generateImports(component.dependencies, analysis)
- const importsToAdd = this.filterNewImports(imports, analysis)
-
- // Insert component code
- lines.splice(insertLine, 0, '', component.code, '')
-
- // Insert imports at the top
- if (importsToAdd) {
- const importInsertLine =
- analysis.imports.length > 0
- ? analysis.imports[analysis.imports.length - 1].line + 1
- : 0
- lines.splice(importInsertLine, 0, importsToAdd)
- }
-
- return lines.join('\n')
- }
-
- generateImports(dependencies, analysis) {
- const imports = []
-
- if (dependencies.includes('react') && !analysis.hasReact) {
- imports.push("import React, { useEffect } from 'react';")
- } else if (
- dependencies.includes('useEffect') &&
- !analysis.imports.some((imp) => imp.content.includes('useEffect'))
- ) {
- // Need to update existing React import to include useEffect
- imports.push('// Update React import to include useEffect')
- }
-
- return imports.join('\n')
- }
-
- filterNewImports(imports, analysis) {
- // Filter out imports that already exist
- return imports
- }
-
- getTailwindButtonClasses(variant, size) {
- const variants = {
- primary: 'bg-blue-600 text-white hover:bg-blue-700',
- secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
- danger: 'bg-red-600 text-white hover:bg-red-700',
- success: 'bg-green-600 text-white hover:bg-green-700'
- }
-
- const sizes = {
- small: 'px-3 py-1 text-sm',
- medium: 'px-4 py-2',
- large: 'px-6 py-3 text-lg'
- }
-
- return `${variants[variant] || variants.primary} ${
- sizes[size] || sizes.medium
- } rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed`
- }
-}
diff --git a/packages/pwa-storefront-mcp/src/utils/AnalyzeCodeStructureTool.js b/packages/pwa-storefront-mcp/src/utils/AnalyzeCodeStructureTool.js
deleted file mode 100644
index bed7c0d6c8..0000000000
--- a/packages/pwa-storefront-mcp/src/utils/AnalyzeCodeStructureTool.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-export class InsertExistingComponentTool {
- /**
- * Analyze JavaScript/React code and determine insertion points
- */
- analyzeCodeStructure(code) {
- const analysis = {
- imports: [],
- components: [],
- exports: [],
- insertionPoints: [],
- hasReact: false,
- hasNextJs: false,
- hasTailwind: false
- }
-
- const lines = code.split('\n')
-
- for (let i = 0; i < lines.length; i++) {
- const line = lines[i].trim()
-
- // Detect imports
- if (line.startsWith('import ')) {
- analysis.imports.push({
- line: i,
- content: line,
- type: this.getImportType(line)
- })
-
- if (line.includes('react')) analysis.hasReact = true
- if (line.includes('next/')) analysis.hasNextJs = true
- }
-
- // Detect component definitions
- if (this.isComponentDefinition(line)) {
- analysis.components.push({
- line: i,
- name: this.extractComponentName(line),
- type: this.getComponentType(line)
- })
- }
-
- // Detect exports
- if (line.startsWith('export ')) {
- analysis.exports.push({
- line: i,
- content: line,
- isDefault: line.includes('default')
- })
- }
-
- // Find potential insertion points
- if (this.isInsertionPoint(line, lines, i)) {
- analysis.insertionPoints.push({
- line: i,
- type: this.getInsertionType(line, lines, i),
- context: this.getInsertionContext(lines, i)
- })
- }
- }
-
- // Check for Tailwind classes
- analysis.hasTailwind = /className\s*=\s*["'][^"']*\b(bg-|text-|p-|m-|flex|grid)/.test(code)
-
- return analysis
- }
-
- // Helper methods
- isComponentDefinition(line) {
- return (
- /^(const|function|class)\s+[A-Z]\w*/.test(line) ||
- /^export\s+(const|function|class)\s+[A-Z]\w*/.test(line)
- )
- }
-
- extractComponentName(line) {
- const match = line.match(/(?:const|function|class)\s+([A-Z]\w*)/)
- return match ? match[1] : null
- }
-
- getComponentType(line) {
- if (line.includes('class ') && line.includes('extends')) return 'class'
- if (line.includes('function ')) return 'function'
- if (line.includes('const ') && line.includes('=>')) return 'arrow'
- return 'unknown'
- }
-
- getImportType(line) {
- if (line.includes("from 'react'")) return 'react'
- if (line.includes("from 'next/")) return 'nextjs'
- if (line.includes('.css') || line.includes('.scss')) return 'styles'
- if (line.startsWith('import ') && line.includes('./')) return 'local'
- return 'external'
- }
-
- isInsertionPoint(line, lines, index) {
- // After imports
- if (
- line.startsWith('import ') &&
- index + 1 < lines.length &&
- !lines[index + 1].trim().startsWith('import ')
- ) {
- return true
- }
-
- // Before export default
- if (line.startsWith('export default') && index > 0) return true
-
- // End of file
- if (index === lines.length - 1) return true
-
- return false
- }
-
- getInsertionType(line, lines, index) {
- if (line.startsWith('import ')) return 'after-imports'
- if (line.startsWith('export default')) return 'before-export'
- if (index === lines.length - 1) return 'end-of-file'
- return 'general'
- }
-
- getInsertionContext(lines, index) {
- const start = Math.max(0, index - 2)
- const end = Math.min(lines.length, index + 3)
- return lines.slice(start, end)
- }
-
- findBestInsertionPoint(analysis, options) {
- // Prefer after imports
- const afterImports = analysis.insertionPoints.find((p) => p.type === 'after-imports')
- if (afterImports) return afterImports
-
- // Fallback to before export
- const beforeExport = analysis.insertionPoints.find((p) => p.type === 'before-export')
- if (beforeExport) return beforeExport
-
- // Last resort: end of file
- return (
- analysis.insertionPoints.find((p) => p.type === 'end-of-file') || {
- line: 0,
- type: 'start'
- }
- )
- }
-}
diff --git a/packages/pwa-storefront-mcp/src/utils/CreateNewComponentTool.js b/packages/pwa-storefront-mcp/src/utils/CreateNewComponentTool.js
deleted file mode 100644
index 399ecaa22a..0000000000
--- a/packages/pwa-storefront-mcp/src/utils/CreateNewComponentTool.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import fs from 'fs/promises'
-import path from 'path'
-
-export class CreateNewComponentTool {
- /**
- * Create a React component file under app/components
- * @param {string} componentName - The name of the component
- * @param {string} [componentCode] - The code to use for the component (optional)
- * @param {string} [componentsDir='retail-react-app/app/components'] - The directory to create the component in
- */
- createNewComponent(componentName, code, projectDir = 'template-retail-react-app') {
- const componentDir = path.join(projectDir, '/app/components', componentName)
- return fs.mkdir(componentDir, {recursive: true}).then(() => {
- const filePath = path.join(componentDir, 'index.jsx')
- const codeToWrite = code
- ? code
- : `import React from 'react';
-
-const ${componentName} = () => {
- return (
- e.stopPropagation()}
- {...props}
- >
- {title && (
-
-
-
- )}
- {title}
- -
- {children}
-
- ${componentName} component
- );
-};
-
-export default ${componentName};
-`
- return fs.writeFile(filePath, codeToWrite, 'utf-8').then(() => `ā
Created ${filePath}`)
- })
- }
-}
diff --git a/packages/pwa-storefront-mcp/src/utils/InsertExistingComponentTool.js b/packages/pwa-storefront-mcp/src/utils/InsertExistingComponentTool.js
deleted file mode 100644
index 44a2c2c735..0000000000
--- a/packages/pwa-storefront-mcp/src/utils/InsertExistingComponentTool.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import fs from 'fs/promises'
-import path from 'path'
-
-export class InsertExistingComponentTool {
- /**
- * Insert a new React component into existing code
- */
- insertComponent(code, componentType, options = {}) {
- const analysis = this.analyzeCodeStructure(code)
- const componentGenerator = this.componentTemplates[componentType.toLowerCase()]
-
- if (!componentGenerator) {
- throw new Error(`Unknown component type: ${componentType}`)
- }
-
- const newComponent = componentGenerator.call(this, options, analysis)
- const insertionPoint = this.findBestInsertionPoint(analysis, options)
-
- return this.performInsertion(code, newComponent, insertionPoint, analysis)
- }
-
- /**
- * Insert an existing component by name into a page by name.
- * @param {string} pageName - The name of the page file (without extension)
- * @param {string} componentName - The name of the component to insert
- * @param {string} [pagesDir='src/pages']
- * @param {string} [componentsDir='src/components']
- */
- async insertComponentIntoPage(
- pageName,
- componentName,
- projectDir = 'template-retail-react-app',
- pagesDir = 'app/pages',
- componentsDir = 'app/components'
- ) {
- // Find the page file (support .js and .jsx)
- let pageFile = path.join(projectDir, pagesDir, `${pageName}.js`)
- componentsDir = path.join(projectDir, componentsDir)
- let pageFileAlt = path.join(projectDir, pagesDir, `${pageName}.jsx`)
- let pagePath = null
- try {
- await fs.access(pageFile)
- pagePath = pageFile
- } catch {
- try {
- await fs.access(pageFileAlt)
- pagePath = pageFileAlt
- } catch {
- throw new Error(`Page file not found: ${pageFile} or ${pageFileAlt}`)
- }
- }
- console.log('==== pagePath', pagePath)
-
- // Find the component file (support .js and .jsx)
- let compFile = `${componentsDir}/${componentName}/index.js`
- let compFileAlt = `${componentsDir}/${componentName}/index.jsx`
-
- try {
- await fs.access(compFile)
- } catch {
- try {
- await fs.access(compFileAlt)
- } catch {
- throw new Error(`Component file not found: ${compFile} or ${compFileAlt}`)
- }
- }
-
- // Read the page file
- let code = await fs.readFile(pagePath, 'utf-8')
- let lines = code.split('\n')
- let importStatement = `import ${componentName} from '../components/${componentName}';`
- let hasImport = lines.some(
- (line) =>
- line.includes(importStatement) ||
- (line.startsWith('import') &&
- line.includes(componentName) &&
- line.includes('components'))
- )
-
- // Insert import if not present (after last import)
- if (!hasImport) {
- let lastImportIdx = lines
- .map((l) => l.trim())
- .reduce((acc, l, i) => (l.startsWith('import') ? i : acc), -1)
- lines.splice(lastImportIdx + 1, 0, importStatement)
- }
-
- // Find the main component render output (assume function or arrow function component)
- let insertIdx = lines.findIndex((line) => /return \(/.test(line))
- if (insertIdx === -1) {
- throw new Error('Could not find a React return statement in the page.')
- }
- // Insert the component usage after the return (
- let indent = lines[insertIdx].match(/^\s*/)[0] + ' '
- lines.splice(insertIdx + 1, 0, `${indent}<${componentName} />`)
-
- // Write back the modified file
- await fs.writeFile(pagePath, lines.join('\n'), 'utf-8')
- return `ā
Inserted <${componentName} /> into ${pagePath}`
- }
-}
diff --git a/packages/pwa-storefront-mcp/src/utils/InsertionUtils.js b/packages/pwa-storefront-mcp/src/utils/InsertionUtils.js
deleted file mode 100644
index 0100cca8af..0000000000
--- a/packages/pwa-storefront-mcp/src/utils/InsertionUtils.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-export class InsertionUtils {
- generateImports(dependencies, analysis) {
- const imports = []
-
- if (dependencies.includes('react') && !analysis.hasReact) {
- imports.push("import React, { useEffect } from 'react';")
- } else if (
- dependencies.includes('useEffect') &&
- !analysis.imports.some((imp) => imp.content.includes('useEffect'))
- ) {
- // Need to update existing React import to include useEffect
- imports.push('// Update React import to include useEffect')
- }
-
- return imports.join('\n')
- }
-
- filterNewImports(imports) {
- // Filter out imports that already exist
- return imports
- }
-}