Extending with Agents

Vercel Shop is built for agentic development. Instead of copy-pasting snippets from docs, you describe what you want and a coding agent handles the implementation - editing files, running commands, and validating the result.

This works because the template ships with structured context that agents can read: an AGENTS.md file describing the architecture and project-scoped plugins that provide common storefront skills, platform-aware tooling, and live Shopify schema access.

Supported agents

Any agent that reads markdown context files will work. The ones we've tested most:

• Claude Code - Anthropic's CLI agent. Reads AGENTS.md and installed project plugins automatically.
• Cursor - AI-powered editor with agent mode. It benefits from the repo context and docs, but does not use the Claude plugin install flow.
• Codex - OpenAI's coding agent. It benefits from the repo context and docs, but does not use the Claude plugin install flow.

Setting up

After creating your project, create-vercel-shop installs the project plugins that the template expects:

• vercel-shop for storefront skills plus bootstrap, drift, and upgrade-planning commands
• vercel-plugin for generic Vercel and Next.js guidance
• shopify-ai-toolkit for Shopify-aware tooling and schema access

If you already have a project and only want the agent setup, run this from the project root instead:

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

That skips the storefront scaffold and only installs the expected project-scoped plugins.

If any of them are missing, rerun:

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

The combined plugin setup gives Claude Code both storefront-specific skills and the broader Vercel/Next.js guidance used across the stack.

For upgrade work, the vercel-shop plugin also carries a template rollout log. That gives agents change-level context about template updates that downstream storefronts may want to adopt, instead of forcing them to guess from a single scaffold version. New scaffolds also record bootstrap metadata so agents can compare rollout entries against when a project was created.

What are skills?

Skills are agent-ready guides that describe how to complete a specific task in your storefront. Each skill is a markdown file that contains:

• What to do - the files to create or modify, the patterns to follow
• Why - the reasoning behind the approach
• How to validate - checks the agent runs to confirm the change works

When you ask your agent to enable a feature, it reads the relevant skill and executes each step - writing code, installing dependencies, updating configs - then verifies the result.

Why skills work

Skills aren't generated on the fly. They're written and tested against the template, so the instructions match the actual codebase. This means:

• Fewer hallucinations - the agent follows a concrete plan instead of guessing
• Consistent patterns - every skill follows the same conventions the template uses
• Validated output - skills include verification steps so you know the change landed correctly

Running a skill

With Claude Code, run a storefront skill as a plugin command:

/vercel-shop:enable-shopify-markets

In Cursor or Codex, describe what you want and point the agent at the matching skill doc when useful:

Enable multi-locale support with Shopify Markets

You can also follow any skill manually from the docs, or inspect the vercel-shop plugin source in the vercel/shop repository.

Available skills

Going beyond skills

Skills cover the most common extensions, but agents aren't limited to them. You can ask your agent to do anything - restyle the product page, add a wishlist, integrate a third-party review system. The AGENTS.md file plus the installed project plugins give it enough context to work with the codebase directly.

For best results, be specific about what you want and let the agent propose an approach before it starts writing code.