VercelVercel
Menu

Add the Vercel Toolbar to your local environment

Last updated November 19, 2025

To enable the toolbar in your local environment, add it to your project using the @vercel/toolbar package, or with an injection script.

  1. Install the @vercel/toolbar package and link your project

    Install the package using the following command:

    Terminal
    pnpm i @vercel/toolbar

    Then link your local project to your Vercel project with the vercel link command using Vercel CLI.

    terminal
    vercel link [path-to-directory]

  2. Add the toolbar to your project

    next.config.js
    /** @type {import('next').NextConfig} */
const createWithVercelToolbar = require('@vercel/toolbar/plugins/next');
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = createWithVercelToolbar();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);
    next.config.js
    /** @type {import('next').NextConfig} */
const createWithVercelToolbar = require('@vercel/toolbar/plugins/next');
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = createWithVercelToolbar();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);
    next.config.js
    /** @type {import('next').NextConfig} */
const createWithVercelToolbar = require('@vercel/toolbar/plugins/next');
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = createWithVercelToolbar();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);
    next.config.js
    /** @type {import('next').NextConfig} */
const createWithVercelToolbar = require('@vercel/toolbar/plugins/next');
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = createWithVercelToolbar();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);
    vite.config.js
    import { sveltekit } from '@sveltejs/kit/vite';
import { vercelToolbar } from '@vercel/toolbar/plugins/vite';
import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [sveltekit(), vercelToolbar()],
});
    vite.config.ts
    import { sveltekit } from '@sveltejs/kit/vite';
import { vercelToolbar } from '@vercel/toolbar/plugins/vite';
import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [sveltekit(), vercelToolbar()],
});
    index.ts
    <script
  src="https://vercel.live/_next-live/feedback/feedback.js"
  data-explicit-opt-in="true"
  data-owner-id="user-id-or-team-id-here"
  data-project-id="project-id-here"
  data-branch="branch-name-here"
></script>
    index.js
    <script
  src="https://vercel.live/_next-live/feedback/feedback.js"
  data-explicit-opt-in="true"
  data-owner-id="user-id-or-team-id-here"
  data-project-id="project-id-here"
  data-branch="branch-name-here"
></script>

Was this helpful?

supported.