If you work with an AI coding agent like Claude Code or Cursor, clone the template and hand off the setup with this prompt:

I want to build an integrations hub using Nuxt and Vercel Connect.

Clone the template repo at https://github.com/vercel-labs/nuxt-connect-starter, install dependencies with pnpm, then walk me through linking it to a Vercel project and pulling environment variables.

Help me create and attach the GitHub and Linear connectors with the Vercel CLI, then run the dev server and verify each integration from the hub. When searching for information, check for applicable skill(s) first and review local documentation.

Vercel Plugin

Turn your agent into a Vercel expert with this plugin. It provides your coding agent with up-to-date knowledge of the Vercel products this template uses, including Vercel Connect. The plugin is optional; it's not required to use the template or for this guide.

npx plugins add vercel/vercel-plugin

Setup and deployment

What you need before deploying

git clone https://github.com/vercel-labs/nuxt-connect-starter.git

cd nuxt-connect-starter

pnpminstall

vercel

To scaffold a fresh copy under your own name instead, use giget:

npx giget@latest gh:vercel-labs/nuxt-connect-starter my-connect-app

cd my-connect-app

pnpminstall

Link the project and pull environment variables

The template uses two connectors: Linear as a Custom OAuth connector, and GitHub as a managed connector.

Create the Linear connector from the CLI. Vercel opens your browser to complete the Linear OAuth flow. Then attach it to the linked project:

vercel connect create mcp.linear.app --name linear

vercel connect attach mcp.linear.app/linear

Create the GitHub managed connector in the Vercel dashboard, then attach it:

vercel connect attach github/nuxt-connect-starter

Confirm your connector UIDs:

Start the dev server:

pnpm dev

The server starts at http://localhost:3000. Open the hub, click Connect on a card to authorize the provider, then click Test to verify the integration works. The test makes a real API call through Connect, such as creating a Linear issue, and reports the result inline.

To set a canonical production URL for SEO, add NUXT_PUBLIC_SITE_URL in your Vercel project settings or .env.local:

NUXT_PUBLIC_SITE_URL=https://your-app.vercel.app

The Connect helpers live in server/utils/connect.ts and wrap the @vercel/connect SDK. To act on a provider, you mint a token for a specific user, then call the provider's API. This is the pattern the test route ( server/api/test.post.ts) uses:

const token =awaitmintUserToken(connector, userId, status.installationId)

awaitcreateLinearIssue(token, body)

mintUserToken requests a short-lived token from Connect for the given connector and user. The SDK authenticates with the OIDC token from your environment, so there is no provider secret to manage. On a multi-tenant connector such as GitHub, the installationId selects which organization the token acts on.

Using connections in a real app

Connections persist in Vercel Connect, so your app only needs a stable user id to mint fresh tokens. You do not store OAuth refresh tokens in your own database.

Replace the anonymous cookie in server/utils/user.ts with your authenticated user id, then reuse the token pattern from the test route. With a real user id in place, each user authorizes a provider once, and your app mints tokens that act as that user for as long as the grant is valid. The same approach works for an app-level subject when you want a bot or service account rather than a specific user.

Related resources