Skip to main content

​
Overview

The Chatbase Vercel integration adds an AI-powered agent to your Vercel-hosted applications directly from the Vercel Marketplace. You install Chatbase, configure your agent without leaving Vercel, and Vercel injects the environment variables into your project.

What you can do:

Add conversational AI to a Vercel app in a few clicks: create and configure the agent inside Vercel, connect it to one or more projects, and scale on Vercel’s edge network.
The Chatbase integration works with all frameworks supported by Vercel, including Next.js, React, Vue.js, SvelteKit, and static HTML sites.

​
Before you start

​
How to install the integration

1

Install Chatbase from the Vercel Marketplace

  1. Log into your Vercel Dashboard.
  2. Click the Marketplace tab in the top navigation.
  3. Search for Chatbase and click the integration in the results.
  4. Click Install.
You can also go straight to vercel.com/integrations/chatbase.
You’ll be redirected to the Chatbase configuration wizard.
2

Choose an agent preset and model

Select the preset that best matches your use case:
  • AI Agent: a general-purpose intelligent assistant
  • Customer Support Agent: optimized for answering customer questions and providing support
  • Sales Agent: guides customers through product selection and purchase decisions
Then select an AI model. On a paid plan you can choose the model; on a free plan the default model is used, and you can change it later from your Chatbase dashboard.
Presets are only a starting point. You can change the personality, AI model, and styles at any time from your Chatbase dashboard.
3

Choose your subscription plan

Choose the plan that fits your needs (Free, Hobby, Standard, or Pro), reviewing the features and message limits for each before selecting.After selecting your plan:
  1. An invoice is sent to your registered email address.
  2. Follow the payment link in the invoice to complete your subscription.
  3. Your plan becomes active once the invoice is paid.
Your selected plan only takes effect after the invoice is paid. Until then, you have access to the free tier features.
Billing is handled securely through Vercel’s payment system. You can manage your subscription from the Vercel dashboard.
4

Name your agent

Provide a descriptive name. It appears in your Chatbase dashboard, helps you identify the agent if you create several, and is visible in your Vercel integration settings.Examples: “Website Support Agent”, “Product Assistant”, “Sales Lead Qualifier”, “Documentation Helper”.
Choose a name that clearly describes the agent’s purpose, especially if you plan to create multiple agents for different projects.
5

Customize in the Chatbase dashboard (optional)

After creating your agent you’ll get a link to your Chatbase dashboard, or visit chatbase.co/dashboard and log in. From there you can:
6

Connect the integration to your Vercel project

  1. Go back to your Vercel dashboard.
  2. In the Chatbase integration settings, click Connect Project.
  3. Select the project or projects where you want the agent.
  4. Click Connect to finalize. Vercel automatically injects the environment variables into the selected projects.
You can connect the same agent to multiple projects.
7

Redeploy your project

For the environment variables to take effect, redeploy:
  1. Go to your project in the Vercel dashboard.
  2. Click the Deployments tab.
  3. Click the three-dot menu (⋯) on your latest deployment.
  4. Select Redeploy.
Environment variables are injected at build time, not runtime. That’s why a redeployment is necessary.
Visit your deployed project. The chat bubble should appear in the corner of the page. Click to open it, send a test message related to your training data, and confirm the agent responds correctly.

​
Managing your integration

​
Updating your agent

Changes made in your Chatbase dashboard apply instantly without a redeployment, including appearance customization, training data updates, response behavior, and actions.
Only environment variable changes require redeployment. All agent configuration changes are live immediately.

​
Multiple projects

To connect the same Chatbase agent to more Vercel projects:
  1. Go to your Vercel dashboard.
  2. Navigate to Integrations → Chatbase.
  3. Click Manage on your Chatbase integration.
  4. Click Add Project.
Useful if you have multiple frontends, such as a web app, marketing site, and documentation, that should share one agent.

​
Different agents per environment

To use different agents for production, preview, and development:
  1. Create separate agents in Chatbase for each environment.
  2. In Vercel, go to Settings → Environment Variables and set different NEXT_PUBLIC_CHATBOT_ID values for Production, Preview, and Development.
This lets you test changes without affecting production conversations, keep separate training data per environment, and monitor analytics separately.

​
Managing your subscription plan

Go to Integrations → Chatbase → Settings in your Vercel dashboard and click Change Plan.
You can undo a cancellation before the period ends by selecting a paid plan again from the same settings page.

​
Uninstalling the integration

  1. Go to your Vercel dashboard.
  2. Navigate to Integrations → Chatbase.
  3. Click Manage → Remove Integration.
  4. Confirm removal.
Removing the integration immediately stops the agent appearing on your Vercel deployments. Redeploy after removing environment variables.

​
Troubleshooting

Possible causes:
  • The project hasn’t been redeployed since the environment variables were injected
  • NEXT_PUBLIC_CHATBOT_ID is missing or not enabled for all environments
  • A JavaScript error is preventing the embed script from loading
  • A cached version of the page is being served
Solutions:
  • Redeploy: go to Deployments, select the latest, and click Redeploy
  • Check Settings → Environment Variables and confirm NEXT_PUBLIC_CHATBOT_ID is present and enabled everywhere
  • Open DevTools (F12) and look for Chatbase-related errors, confirming the embed script loads
  • Hard refresh (Ctrl+Shift+R / Cmd+Shift+R) or try an incognito window
Possible causes:
  • A partial or corrupted install
  • Insufficient permissions on the Vercel team or project
Solutions:
  • Remove and reinstall: Integrations → Chatbase → Manage → Remove Integration, then reinstall from the Marketplace
  • Ensure you have admin access to the Vercel team or project, and that your Vercel account is properly authenticated
  • If issues persist, contact Chatbase Support with your Vercel project ID and integration details
Possible cause: environment variables are injected at build time, so changes need a new deployment.Solutions:
  • Make your environment variable changes
  • Trigger a new deployment, either by pushing a commit or redeploying manually from the Vercel dashboard
  • Clear your browser cache and test again
Possible causes:
  • The invoice never arrived, or went to spam
  • Payment is still processing
  • The change was a downgrade or cancellation, which doesn’t apply immediately
Solutions:
  • Check your email spam folder and verify the email address in your Vercel account settings; contact Vercel support for a resend
  • Allow up to 10 minutes for payment processing, and check payment status in the Vercel billing dashboard
  • Remember that upgrades activate immediately after payment, while downgrades and cancellations take effect at the end of the current billing period

​
Best Practices

Add Comprehensive Training Data

More relevant sources produce better responses. Remove irrelevant content and fill gaps as you find them.

Test Regularly

Use the Chatbase playground to verify answer quality before and after changes.

Monitor Conversations

Review chat logs in the Chatbase dashboard to see what customers actually ask.

Separate Your Environments

Use a different agent for Preview and Development so test traffic never mixes with production conversations.

​
Next steps

Add Training Data Sources

Upload documents, connect websites, and add Q&A pairs.

Customize Appearance

Match your brand colors and style.

Enable Actions

Add lead collection, bookings, and custom workflows.

Monitor Analytics

Track conversations and measure performance.