Vercel

Frontend integrates with Vercel to deploy your Next.js applications to a fully hosted production environment. Once connected, deploying your project will build and host your agent as a live Next.js application, unlocking rich features not available in the sandbox environment.

Connecting Vercel

To connect Vercel to your project, you need:

• Vercel Access Token - Generate one from your Vercel account settings
• Team ID - Found in your Vercel team settings

Once you connect a team with an access token, your project is ready to deploy.

Deploying Your Project

When you deploy your project, Frontend will build and deploy your Next.js application to Vercel. All environment variables from your project will be automatically added to the build, so your API keys and configuration will carry over seamlessly.

A Vercel deployment provides a fully hosted Next.js application with features that are not available in the sandbox environment, including:

• Server-side rendering and API routes running on Vercel’s edge network
• Production-grade performance and caching
• Automatic HTTPS and custom domain support
• Serverless function execution

Viewing Deployment Logs

You can view your deployment logs directly from the console. Toggle the console display from the web browser preview to monitor your build progress and check for any issues.

Troubleshooting Build Errors

There are often slight differences between the sandbox environment and a live Next.js server. Dependencies or code patterns that work in the sandbox may need adjustments for a production Vercel deployment.

If you encounter build errors:

1. Open the console from the web browser preview to view the deployment logs
2. Copy the error messages from the logs
3. Paste them into the AI chat

The AI will help diagnose and resolve the issues, whether they involve missing dependencies, incompatible imports, or other differences between the sandbox and production environments.