Skip to main content

Elastic Path MCP Servers

Learn how to set up and use Elastic Path's Model Context Protocol (MCP) offerings to accelerate storefront development with AI-powered tools. This guide covers our Dev MCP server for building React/Next.js commerce applications, and our integrations with Context7.

What is the Elastic Path MCP Server?​

Elastic Path provides a specialized MCP server designed to eliminate the boilerplate and repetitive tasks that slow down storefront development:

  • Dev MCP Server: AI-powered scaffolding for React/Next.js storefront components with curated best practices

This server provides AI agents with the specific context needed to build accurate, production-ready commerce implementations using Elastic Path.

How it works​

The MCP server exposes a tool called get-documentation to your coding agent. This tool has access to a specially created data store of documentation and code examples relating to creating a storefront. In response to your prompts, the tool will locate, rank, and return relevant code snippets and documentation to provide your coding agent with the necessary context to accurately implement a storefront against Elastic Path.

Quick Start​

1. Acquire an access key.​

While the Dev MCP Server is in beta, access is restricted. Contact your Elastic Path representative to request an invite and receive your beta key.

2. Configure the Dev MCP Server​

Add the Elastic Path Dev MCP server to your IDE configuration. This example is for Cursor IDE (edit ~/.cursor/mcp.json). For other AI tools, adapt the config as required:

{
  "mcpServers": {
    "elastic-path-dev-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote@latest",
        "https://storefront-agent.vercel.app/mcp",
        "--header",
        "Authorization:${AUTH_TOKEN}"
      ],
      "env": {
        "AUTH_TOKEN": "your-access-token-here"
      }
    }
  }
}

3. Test Your MCP Connection​

Test the connection by asking your AI assistant to work on a storefront feature. For example:

"Generate a product grid component for my Elastic Path storefront"

The MCP server should provide code samples and docs your agent can use to .

If the agent does not call the tool, try being more specific; e.g. include 'use the Elastic Path MCP server' in your prompt ::

Dev MCP Server Capabilities​

The Elastic Path Dev MCP server exposes a get-documentation tool with configurable options to tailor responses to your specific development needs:

Tool Configuration Options​

  • query (required): Your question or request for documentation/code examples
  • tokens: Maximum number of tokens to return (default: 5000, controls response length)
  • topic: Optional focus area to narrow results (e.g., "authentication", "cart management", "payments", "checkout")

The server specializes in generating storefront components and provides:

Storefront Scaffolding:

  • Product grid components with filtering and pagination
  • Shopping cart management with add/remove/update functionality
  • Checkout flow components with payment integration
  • Customer authentication and account management
  • Search and category navigation

Framework Support:

  • React components with TypeScript
  • Next.js pages and API routes
  • Tailwind CSS styling
  • Elastic Path SDK integration

Example Prompts:

"Create a product detail page with add to cart functionality"
"Generate a shopping cart sidebar with quantity controls"
"Build a checkout form with Elastic Path Payments"
"Create a customer login/register component"

Best Practices​

1. Effective Prompting​

Be specific about what you want to generate:

  • Mention the framework (React, Next.js)
  • Specify styling approach (Tailwind CSS, CSS modules)
  • Include functional requirements (responsive, accessible)
  • Request error handling and loading states
  • Use an appropriate token budget

2. Iterative Development​

Start with basic components and enhance:

  1. Authenticate your storefront with Elastic Path
  2. Generate basic product display page
  3. Add cart functionality
  4. Implement checkout flow
  5. Enhance with advanced features

3. Code Review​

Always review generated code for:

  • Security best practices
  • Performance considerations
  • Accessibility compliance
  • Code style consistency

Also Available: Context7 Integrations​

What is Context7?​

Context7 is a third-party service that indexes documentation and code examples for various libraries and frameworks. It maintains up-to-date, searchable repositories of documentation that AI assistants can access to provide accurate, contextual help. It makes these available via a publically available MCP server.

Context7 has indexed two resources for Elastic Path:

  • Elastic Path API Documentation: Complete API references, guides, and examples. Wide coverage, less specific, less accurate for coding.
  • Elastic Path Shopper SDK: Specific, precise usage examples for all methods of the Elastic Path Shopper SDK. Very accurate for coding.

Context7 Documentation Server​

Access comprehensive Elastic Path documentation through Context7:

Use Cases:

  • When you need detailed API reference information
  • Exploring comprehensive documentation beyond what the Dev MCP server provides

Context7 Shopper SDK Server​

Specialized assistance for the Elastic Path Shopper SDK:

Use Cases:

  • When building custom implementations with the Shopper SDK
  • Need specific SDK function examples and usage patterns