Build a Storefront AI agent
Build an AI chat agent that helps shoppers find products faster and complete purchases through natural conversation. The agent can answer questions about products, shipping policies, and manage shopping carts using the Model Context Protocol (MCP) to connect with Shopify's commerce features.
Use natural language to search for products, get recommendations, ask questions about store policies, and complete checkoutāall within a chat window.
Requirements
Download from nodejs.org and install.
Sign up at shopify.com/partners.
Create a dev store for testing - see the dev stores guide. Make sure to add some sample products.
Generate a key in the Claude Console and store it securely. This template uses Claude, but you can swap in any LLM by updating the code.
Install the latest version of Shopify CLI. You'll need this before starting the tutorial.
Project
Anchor to InstallationInstallation
Anchor to Clone the repositoryClone the repository
Terminal
Anchor to Install dependenciesInstall dependencies
Terminal
Anchor to Set up environment variablesSet up environment variables
Rename the .env.example file to .env and make sure it has your Claude API key:
.env
See the Change the AI provider section if you want to use a different LLM.
Anchor to Create your appCreate your app
Anchor to Install the latest Shopify CLIInstall the latest Shopify CLI
Terminal
Anchor to Start the development serverStart the development server
- Run the following command to start the development server:
Terminal
Anchor to Select your organizationSelect your organization
Anchor to Select Yes to create this project as a new appSelect Yes to create this project as a new app
Anchor to Accept the default app nameAccept the default app name
Hit enter to accept the default name shop-chat-agent. All references in the code use this name.
Anchor to Keep the configuration file name blankKeep the configuration file name blank
Anchor to Overwrite existing configuration fileOverwrite existing configuration file
Select no and overwrite your existing configuration file:
Anchor to Select your dev storeSelect your dev store
Choose the dev store you would like to use:
Anchor to Enter your store passwordEnter your store password
You can get your store password from the URL that is in your terminal:
At this stage, you will see Preview URL: https://your-store.myshopify.com/... in your terminal. You can now proceed to the next step. If you get an error, restart from the Shopify CLI installation step.
Anchor to Generate a certificate for localhostGenerate a certificate for localhost
Anchor to Allow automatic URL updatesAllow automatic URL updates
Select yes to automatically update your app's URL:
Anchor to Run your appRun your app
Anchor to Access your storeAccess your store
Follow the Preview URL: https://your-store.myshopify.com/... in your terminal to open your store in your browser.
Anchor to Enable the theme extensionEnable the theme extension
In your Shopify admin, navigate to Online Store > Themes
- Click the Customize button
- Click the App embeds icon in the sidebar
- Enable the toggle
- Click Save
Your AI shopping assistant is now fully functional for product search, cart management, and store policy questions.
You can start testing and customizing your app, or continue to the next section to enhance it with the customer accounts MCP server.
Anchor to (Optional) Configure customer accounts authentication(Optional) Configure customer accounts authentication
Add order history and account management features to your AI assistant:
You'll need Level 2 protected customer data permissions to use the Customer accounts MCP server. See Shopify's guidelines.
Anchor to Verify Next-Gen Dev Platform accessVerify Next-Gen Dev Platform access
Verify that you have access to the Next-Gen dev platform. This is required for the customer accounts authentication features.
Anchor to Create your app on the Next-Gen Dev PlatformCreate your app on the Next-Gen Dev Platform
Follow the steps on the Next-Gen dev platform page to create a Storefront AI agent app using a partner organization. You can use the code from the reference app repo.
Anchor to Set up your dev storeSet up your dev store
Create a dev store on the Next-Gen Dev Platform. Make sure to add some sample products to test the AI agent functionality.
Anchor to Log in to Shopify PartnersLog in to Shopify Partners
Log in to your Shopify Partners dashboard.
Navigate to Apps and select your app under the Dev Dashboard apps tab.
Anchor to Access API requestsAccess API requests
Click API access requests.
Anchor to Request protected data accessRequest protected data access
Click Request access under the Protected customer data section.
Anchor to Provide a reason for accessing protected dataProvide a reason for accessing protected data
Click select on protected customer data. Provide a clear reason for requesting this data.
Anchor to Provide a reason for accessing specific data fieldsProvide a reason for accessing specific data fields
Click select for each data field: name, email, phone, and address. Provide a clear reason for requesting each field.
Anchor to Update your app's TOML fileUpdate your app's TOML file
shopify.app.toml
Replace your-app-domain.com with your actual app domain.
Start app dev again if it's not already running:
Terminal
Anchor to Next stepsNext steps
Now that you've built your AI shopping assistant, you can:
