---
title: Extending with Agents
description: Use coding agents like fx, Claude Code, Cursor, and Codex to personalize and extend your storefront.
url: "https://shop-docs.labs.vercel.dev/docs/getting-started/extending-with-agents"
docs_index: /llms.txt
lastUpdated: 2026-10-13
type: guide
prerequisites:
  - /docs/getting-started
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Coding agents can build and extend your storefront. Every project includes the Shop skills and `AGENTS.md` conventions, so an agent works with the same patterns and verification steps your team uses.

## Set up the agent

New projects include the Shop skills in `.agents/skills/`. Claude Code reads them through the `.claude/skills` link in the same project. To add the Shop skills to an existing storefront, run this from its root:

```bash
pnpm dlx skills add vercel/shop --skill '*' --yes
```

Also install these for your agent:

- **Vercel plugin** for Vercel platform guidance and skills:

  ```bash
  npx plugins add vercel/vercel-plugin
  ```

- **Shopify AI Toolkit** for current Shopify documentation, API schemas, and operation validation. The Shop skills rely on it before adding or changing Shopify GraphQL. Follow [Shopify's install instructions](https://github.com/Shopify/shopify-ai-toolkit#install) for your agent.

Use an agent that reads `AGENTS.md` and supports project skills, such as [fx](https://fx.sh), [Claude Code](https://claude.ai/code), [Cursor](https://cursor.sh), or [Codex](https://openai.com/index/introducing-codex/).

## Give the agent a focused task

State the outcome, placement, data source, constraints, and expected verification. For example:

```text
Add a size guide below the product description.
Read it from the product metafield custom.sizing_guide.
Hide the section when the metafield is empty.
Run the relevant checks and verify the product page in a browser.
```

Ask the agent to propose its plan before editing when the change spans several parts of the storefront. Include exact errors when asking it to fix a failure.

## Use storefront skills

Skills provide task-specific instructions and checks. Ask your agent to use a skill by name, such as `enable-shopify-markets`, or run it as a slash command in Claude Code:

```text
/enable-shopify-markets
```

You can also describe the outcome and let the agent pick the matching skill. Use the [update-shop skill](/docs/skills/update-shop) when bringing an existing storefront up to date.

| Skill                                                                 | What it does                                                                             | Shopify docs                                                                       |
| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| [Initialize Vercel Shop](/docs/skills/init-vercel-shop)               | Create a storefront from the template and connect a Shopify store.                       |                                                                                    |
| [Build with Vercel Shop](/docs/skills/build-shop)                     | Build or adapt storefront routes, commerce data, and rendering with template patterns.   |                                                                                    |
| [Update Vercel Shop](/docs/skills/update-shop)                        | Compare a storefront with the current template and apply the updates you choose.         |                                                                                    |
| [Shopify GraphQL integration](/docs/skills/shopify-graphql-reference) | Add Shopify-validated Storefront or Customer Account GraphQL using template conventions. | [Storefront API](https://shopify.dev/docs/api/storefront)                          |
| [Enable analytics](/docs/skills/enable-analytics)                     | Add Vercel Web Analytics, Speed Insights, and Google Tag Manager.                        |                                                                                    |
| [Enable i18n](/docs/skills/enable-i18n)                               | Add locale-prefixed URLs and per-locale copy with next-intl, without Shopify Markets.    |                                                                                    |
| [Enable Shopify Markets](/docs/skills/enable-shopify-markets)         | Add multi-region locales, currency, and localized commerce context.                      | [Markets](https://help.shopify.com/en/manual/markets)                              |
| [Enable Shopify menus](/docs/skills/enable-shopify-menus)             | Replace the hardcoded nav and footer with Shopify-managed menus.                         | [Menus and links](https://help.shopify.com/en/manual/online-store/menus-and-links) |

## What’s next

Start with a contained storefront change, such as adding a product metafield, adjusting navigation, or changing a merchandising section. For repeated work, turn your preferred conventions and checks into a project skill so future agent changes follow the same approach.

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)