Shop Chat Agent

Build an AI Agent for Your Storefront

A Shopify template app that lets you embed an AI-powered chat widget on your storefront. Shoppers can search for products, ask about policies or shipping, and complete purchases - all without leaving the conversation. Under the hood it speaks the [Model Context Protocol](https://modelcontextprotocol.io/) (MCP) to tap into Shopify’s APIs.

Overview

• What it is: A chat widget + backend that turns any storefront into an AI shopping assistant.
• Key features:
  • Natural-language product discovery
  • Store policy & FAQ lookup
  • Create carts, add or remove items, and initiate checkout
  • Track orders and initiate returns

Developer Docs

• Everything from installation to deep dives lives on https://shopify.dev/docs/apps/build/storefront-mcp.
• Clone this repo and follow the instructions on the dev docs.

Examples

• hi > will return a LLM based response. Note that you can customize the LLM call with your own prompt.
• can you search for snowboards > will use the search_shop_catalog MCP tool.
• add The Videographer Snowboard to my cart > will use the update_cart MCP tool and offer a checkout URL.
• update my cart to make that 2 items please > will use the update_cart MCP tool.
• can you tell me what is in my cart > will use the get_cart MCP tool.
• what languages is your store available in? > will use the search_shop_policies_and_faqs MCP tool.
• I'd like to checkout > will call checkout from one of the above MCP cart tools.
• Show me my recent orders > will use the get_most_recent_order_status MCP tool.
• Can you give me more details about order Id 1 > will use the get_order_status MCP tool.

Architecture

Components

This app consists of two main components:

1. Backend: A React Router app server that handles communication with Claude, processes chat messages, and acts as an MCP Client.
2. Chat UI: A Shopify theme extension that provides the customer-facing chat i