---
title: Extending with Agents
description: Use coding agents like Claude Code, Cursor, and Codex to personalize and extend your storefront.
type: guide
prerequisites:
  - /docs/getting-started
---

# Extending with Agents



Use a coding agent to change the storefront while following the template's conventions and verification steps.

## Set up the agent

`create-vercel-shop` installs project plugins for Vercel Shop, Next.js, Vercel, and Shopify. To add the agent setup to an existing project without creating a storefront, run:

```bash
npx create-vercel-shop@latest --no-template
```

If the plugins are missing, install them directly:

```bash
npx plugins add vercel/shop --scope project --yes
npx plugins add vercel/vercel-plugin --scope project --yes
npx plugins add Shopify/shopify-ai-toolkit --scope project --yes
```

Use an agent that reads `AGENTS.md` and supports project skills, such as [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 named 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. In Claude Code, run a skill directly:

```bash
/vercel-shop:enable-shopify-markets
```

In Cursor or Codex, describe the outcome and reference the matching skill page. Use the [`update-shop` skill](/docs/skills/update-shop) when bringing an existing storefront up to date.

<Cards>
  <Card title="Build with Vercel Shop" href="/docs/skills/build-shop">
    Source-backed storefront architecture and commerce behavior.
  </Card>

  <Card title="Enable Shopify Markets" href="/docs/skills/enable-shopify-markets">
    Multi-locale and multi-currency support.
  </Card>
</Cards>

## 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)