Agent Native

vercel-services

This skill configures Vercel Services to deploy multiple tightly coupled services like frontends and backends in a single Vercel project.

by VercelOfficial publisherNot reviewed

Identity proven by GitHub's verified organisation badge (vercel, vercel-labs)

Agents
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode
License
Apache-2.0 (permissive)
Pin
2a1e58dpinned Oct 9, 2026
Context cost
about 2,400 tokenswhen the skill loads
GitHub stars
300on vercel/vercel-plugin
Scripts
None found

What it does

“Configure and troubleshoot Vercel Services for multiple frontends and backends in one project. Use when composing a polyglot or multi-service application on one Vercel deployment; defining the `services` key, service-targeted rewrites, or service bindings in `vercel.json`; or running all services with `vercel dev`.”
The author's description, from SKILL.md

Generated summary from the skill's own text

This skill configures Vercel Services to deploy multiple tightly coupled services like frontends and backends in a single Vercel project. It covers defining services in vercel.json, setting up public routes through rewrites, creating private service-to-service communication via bindings, and running all services locally with vercel dev.

When to use it

  • Building a polyglot application with frontend and backend components
  • Shipping frontend and backend together as one atomic deployment
  • Creating private service-to-service communication through bindings
  • Running multiple services locally during development

When not to

  • One framework can handle the entire application alone
  • Services need independent deployment and rollback cycles
  • Building microfrontends with separate frontend deployments

Install

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add vercel/vercel-plugin --skill vercel-services

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install vercel/vercel-plugin vercel-services@2a1e58dfb63c064c2589c0c21b3e93c53728f8d5

Installs the commit we checked (2a1e58d).

Copy by hand

Download the folder at 2a1e58d and put it in .claude/skills/vercel-services for Claude Code and in .agents/skills/vercel-services for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at 2a1e58d

Claude Code plugin

/plugin install vercel@claude-plugins-official

The publisher's plugin in Claude's official marketplace. It may hold more than this skill, and we have not pinned it.

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "vercel-services" by Vercel.

Source, pinned to commit 2a1e58dfb63c064c2589c0c21b3e93c53728f8d5:
https://github.com/vercel/vercel-plugin/tree/2a1e58dfb63c064c2589c0c21b3e93c53728f8d5/skills/vercel-services

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/vercel-services/ for Claude Code and .agents/skills/vercel-services/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Listing and checks: https://www.agentnative.dev/skills/vercel/vercel-services

SKILL.md at the pin

---
name: vercel-services
description: Configure and troubleshoot Vercel Services for multiple frontends and backends in one project. Use when composing a polyglot or multi-service application on one Vercel deployment; defining the `services` key, service-targeted rewrites, or service bindings in `vercel.json`; or running all services with `vercel dev`.
summary: Compose multiple frontends and backends in one Vercel project (Beta)
metadata:
  priority: 7
  docs:
    - "https://vercel.com/docs/services"
    - "https://vercel.com/docs/services/routing"
    - "https://vercel.com/docs/services/bindings"
    - "https://vercel.com/docs/services/config-reference"
    - "https://vercel.com/docs/services/experimental"
    - "https://vercel.com/docs/services/pricing"
  sitemap: "https://vercel.com/sitemap.xml"
  pathPatterns:
    - 'vercel.json'
    - 'apps/*/vercel.json'
  bashPatterns:
    - '\b(?:vercel|vc)\s+dev\b[^\n]*(?:--local|-L)(?:\s|$)'
  importPatterns: []
  promptSignals:
    phrases:
      - "vercel services"
      - "vercel service binding"
      - "vercel service bindings"
      - "multi-service vercel"
      - "multiple services on vercel"
      - "frontend and backend on vercel"
    allOf:
      - [backend, vercel]
      - [polyglot, vercel]
      - [multiple, services, vercel]
      - [services, vercel.json]
      - [vercel, service, binding]
    anyOf:
      - "backend"
      - "monorepo"
      - "polyglot"
      - "service"
      - "binding"
      - "vercel"
    noneOf: []
    minScore: 6
retrieval:
  aliases:
    - Vercel Services
    - multi-service project
    - polyglot project
    - service binding
    - service rewrite
  intents:
    - deploy frontend and backend together in one project
    - configure the services key in vercel.json
    - configure service rewrites
    - call the backend privately with a service binding
    - keep a service private with no public route
    - serve a service on a subdomain
    - strip a route prefix before it reaches the backend service
    - run all services locally
  entities:
    - services
    - bindings
    - destination.service
    - root
    - experimentalServices
  examples:
    - put a Next.js frontend and a FastAPI backend in one project
    - deploy a Vite SPA with an Express API behind /api
    - add a Go service to an existing Next.js project
    - my frontend cannot reach the backend service
    - the backend returns 404 for every /api route
    - point api.example.com at the backend
---

# Vercel Services

Use the `services` model whenever one application is made of multiple tightly coupled components, such as a frontend plus a backend, that should deploy to one Vercel project.

Services is [in Beta on all plans](https://vercel.com/docs/services). Say so when you recommend it.

Services build independently but ship together as one deployment. That buys skew protection between frontend and backend, preview environments where every service is in sync, atomic deployments and rollbacks of the whole app, and private service-to-service communication through bindings. Public traffic enters through one ordered route table.

## Choose the right structure

| Need | Use |
| --- | --- |
| Multiple tightly coupled components, such as a frontend and a backend, that should ship as one app | Vercel Services |
| One framework can own the whole app, such as Next.js with Route Handlers | One normal Vercel project without Services |
| Teams own their services and deploy and roll back on their own cadence | Separate Vercel projects in a monorepo |
| Independently deployed frontends must render as one site | Vercel Microfrontends |

The benefits and the drawback are the same fact: every deployment ships all services together. Reach for separate projects only when you specifically need to deploy or roll back one service independently of the others.

Do not introduce Services just to split one framework into arbitrary processes. Use it when an independently built component has a real runtime, framework, dependency, or ownership reason to exist.

## Define services and public ingress

If `vercel.json` already has an `experimentalServices` key, the project is on the earlier configuration model: read [references/experimental-services.md](references/experimental-services.md) before changing it.

Each service requires a `root` relative to `vercel.json`. Let Vercel detect the framework unless pinning it is necessary. Set `entrypoint` relative to the service root when the runtime needs one.

```json filename="vercel.json"
{
  "services": {
    "frontend": {
      "root": "apps/web",
      "bindings": [
        {
          "type": "service",
          "service": "backend",
          "format": "url",
          "env": "BACKEND_INTERNAL_URL"
        }
      ]
    },
    "backend": {
      "root": "apps/backend",
      "entrypoint": "main:app"
    }
  },
  "rewrites": [
    { "source": "/api/(.*)", "destination": { "service": "backend" } },
    { "source": "/(.*)", "destination": { "service": "frontend" } }
  ]
}
```

The top-level rewrites expose the services. A service without a matching top-level rewrite is private: not reachable from the public internet, only through bindings.

Keep configuration ownership clear:

- Keep public `rewrites`, `redirects`, `headers`, and other URL behavior at the top level.
- Put `functions`, `installCommand`, `buildCommand`, `devCommand`, `ignoreCommand`, `outputDirectory`, and framework settings on the service that owns them.
- Put service-local `headers`, `redirects`, `rewrites`, or `routes` inside a service only when they should run after public ingress selects that service.
- Set `runtime: "container"` when a service must build from a Dockerfile or OCI image. Use `entrypoint` for a nonstandard Dockerfile and `command` to override the image command.

## Route requests correctly

Top-level rewrites are evaluated in order. Put specific rules before the catch-all.

Routing into a service is final. If the selected service returns a 404 or 405, Vercel does not try the next top-level rewrite.

Split the URL namespace by what the frontend needs:

- Frontends without their own server routes, such as Vite or Create React App builds, let the backend own all of `/api`.
- Frameworks with their own API routes, such as Next.js, share the namespace: send only a sub-namespace such as `/api/v1/(.*)` or specific prefixes such as `/api/users/(.*)` to the backend, and let the framework keep the rest.

The service receives the original request path. With the example above, `GET /api/users` reaches `backend` as `/api/users`, not `/users`. Either make the backend handle the prefix, such as FastAPI `root_path`, or strip it with a service-scoped rewrite:

```json filename="vercel.json"
{
  "services": {
    "backend": {
      "root": "apps/backend",
      "entrypoint": "main:app",
      "rewrites": [
        { "source": "/api/:path(.*)?", "destination": "/:path" }
      ]
    }
  }
}
```

An SPA service that serves a static `index.html`, such as a Vite build, needs a service-scoped catch-all so deep links resolve:

```json filename="vercel.json"
{
  "services": {
    "frontend": {
      "root": "apps/web",
      "rewrites": [
        { "source": "/(.*)", "destination": "/index.html" }
      ]
    }
  }
}
```

A service destination's `path` selects which route runs inside the service without changing the path the service code sees. A query string in it adds state the service's own rules can match, such as `"path": "/:path*?org=:orgSlug"` ([routing docs](https://vercel.com/docs/services/routing)). To change the path the code sees, use a service-scoped rewrite or a `request.path` transform in the service's own `routes`.

## Serve a service on a subdomain

Host-matched top-level rewrites can put a service on its own subdomain, such as `api.example.com`, while the catch-all serves the frontend:

```json filename="vercel.json"
{
  "rewrites": [
    {
      "source": "/(.*)",
      "has": [{ "type": "host", "value": "api.example.com" }],
      "destination": { "service": "backend" }
    },
    { "source": "/api/(.*)", "destination": { "service": "backend" } },
    { "source": "/(.*)", "destination": { "service": "frontend" } }
  ]
}
```

Subdomains resolve only where that domain is attached: production, or a custom environment with a custom domain. Preview deployments get a single generated URL, so keep the subpath rewrite alongside the host rule and point the frontend at the relative path, for example `NEXT_PUBLIC_API_URL=/api`, so every preview calls its own deployment.

## Call services privately with bindings

Declare a binding on the caller service, name the target service, and choose the environment variable that receives the generated URL. Do not hardcode deployment hostnames or manually set binding variables.

```ts
const url = new URL('/api/users', process.env.BACKEND_INTERNAL_URL);
const response = await fetch(url);
```

Bindings are deployment-aware and do not create public routes. They are available to functions at runtime, not during builds or in Routing Middleware. Internal calls skip the public Firewall, Deployment Protection, top-level middleware, and CDN pipeline.

Each call over a binding is billed as one [Service Request](https://vercel.com/docs/services/pricing), with no Edge Request or Fast Data Transfer charge. The bytes a service returns are still billed as Fast Origin Transfer.

Public exposure is decided only by top-level rewrites. A service with no top-level rewrite is private: it is unreachable from the public internet and only accessible through its bindings. A service with both bindings and a top-level rewrite is also reachable publicly, so do not assume binding-only access implies the routes are protected.

A binding grants network reachability, not application authentication. Add service-level authorization when the target must verify the caller.

Native Go and Rust runtime services cannot currently consume bindings. Build those callers as container services when they need bindings. Node.js and Python services can use bindings directly.

## Develop and deploy

Run every service and inject local binding variables:

```bash
vercel dev
```

Use local-only mode when cloud authentication is unnecessary:

```bash
vercel dev -L
```

Deploy the project normally with `vercel` or Git integration. All services participate in the same preview and production deployment.

## Troubleshoot

- **No public traffic reaches a service:** add a top-level rewrite targeting it.
- **The wrong service receives a request:** reorder rewrites so the most specific rule comes first and the catch-all is last.
- **A backend returns 404:** confirm its routes include the public prefix because Vercel preserves the original request path, or strip the prefix with a service-scoped rewrite.
- **An SPA returns 404 on deep links:** add a service-scoped catch-all rewrite to `/index.html`.
- **A subdomain works in production but not in previews:** preview URLs have a single host, so host rules never match there. Keep a subpath rewrite to the same service and use the relative URL in the frontend.
- **A binding variable is missing:** declare the binding on the caller and access it from runtime function code, not build code or middleware.
- **Build settings are ignored or rejected:** move top-level build and runtime fields into the owning service.
- **Framework detection is wrong:** set that service's `framework` or `entrypoint` explicitly instead of changing the whole project.
- **Validation rejects `services` together with `experimentalServices`:** `vercel.json` can declare only one; finish the migration in [references/experimental-services.md](references/experimental-services.md).

## Related skills

- Deployment commands and CI: `⤳ skill: deployments-cicd`
- Function runtime behavior and limits: `⤳ skill: vercel-functions`
- Independent frontend deployments: `⤳ skill: microfrontends`

From vercel/vercel-plugin at 2a1e58d, shown as plain text under its license: Apache-2.0 (permissive). The license text is in LICENSE.

View SKILL.md on GitHub at 2a1e58d

Files

3 files, 15 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at 2a1e58d
All 50 skills from Vercel

More from Vercel

  • next-bundle-optimizer

    Audits Next.js applications to identify and reduce browser bundle size and initial-load work by analyzing routes, dependencies and client outputs.

    Claude Code, Codex, Cursor +4 · about 2.3K tokens · pinned 6 days ago

  • next-cache-components-optimizer

    Optimize Next.js routes to display meaningful UI instantly on initial load or client navigation by encoding the optimization goal as a failing…

    Claude Code, Codex, Cursor +4 · about 5.6K tokens · pinned 6 days ago

  • next-partial-prefetching-adoption

    Enables Partial Prefetching in Next.js 16.3+ apps and guides adoption through auditing Link prefetch behavior, preserving UI in tests or manually, and…

    Claude Code, Codex, Cursor +4 · about 6.7K tokens · pinned 6 days ago

  • next-partial-prefetching-optimizer

    This skill optimizes Next.js client-side navigation under Partial Prefetching by defining what UI loads before and after a click.

    Claude Code, Codex, Cursor +4 · about 2.8K tokens · pinned 6 days ago

  • apple

    This skill emulates Apple's OAuth and OIDC services for local development and testing.

    Claude Code, Codex, Cursor +4 · about 1.9K tokens · pinned 6 days ago

  • aws

    This skill emulates AWS cloud services locally, providing S3 bucket and object operations, SQS message queues, IAM user and role management, and STS assume…

    Claude Code, Codex, Cursor +4 · about 2.8K tokens · pinned 6 days ago

All Cloud and DevOps skills
  • vercel

    This skill deploys and manages Vercel applications, handling deployments, aliases, logs, and monitoring.

    by SentryOfficial publisher

    Claude Code, Codex, Cursor +4 · about 610 tokens · pinned 6 days ago

  • databricks-model-serving

    Manages Databricks Model Serving endpoint lifecycle including creation, configuration, traffic routing, and monitoring.

    by DatabricksOfficial publisher

    Claude Code, Codex, Cursor +3 · about 3.2K tokens · pinned 6 days ago

  • access-protected-vercel-deployment

    The skill enables agents to access Vercel deployments protected by authentication, SSO, or Deployment Protection.

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +3 · about 1.2K tokens · pinned 6 days ago

  • bootstrap

    This skill orchestrates the setup process for Vercel-linked repositories by executing project linking, environment provisioning, database configuration, and…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +3 · about 1.5K tokens · pinned 6 days ago

  • cdn-caching

    This skill helps debug Vercel's CDN caching layers (CDN Cache, ISR, and PPR) by analyzing cache hit rates, revalidation behavior, cost patterns, and…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +3 · about 4.8K tokens · pinned 6 days ago

  • deployments-cicd

    This skill provides expert guidance on Vercel deployments and CI/CD workflows, covering preview and production deployments, the `vercel` CLI commands…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +3 · about 2.6K tokens · pinned 6 days ago

Open roles at Vercel

5 of 11 open roles on the jobs board

The skills listed here are third-party software, collected from public GitHub repositories as a catalog of recent skills and provided as is. Agent Native does not write or control them and is not responsible for any harm, loss or damage caused by installing or using them. Labels and checks describe what we saw at one commit and are not a guarantee. Read a skill's files before you run it. Terms of use