---
title: Building an AI Chatbot with Cohere, Next.js, and the Vercel AI SDK
description: Learn how to build a generative AI application using Cohere, Next.js, and Vercel.
url: /kb/guide/cohere-nextjs-vercel-ai-sdk
canonical_url: "https://vercel.com/kb/guide/cohere-nextjs-vercel-ai-sdk"
last_updated: 2026-07-16
authors: DX Team
related:
  - /docs
  - /docs/frameworks/nextjs
  - /docs/concepts/deployments/git
  - /docs/concepts/projects/environment-variables
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

This guide will walk you through the steps to integrate [Cohere's API](https://cohere.com/) with a Vercel project to create a text completion app. We'll use the [Vercel AI SDK](https://sdk.vercel.ai/docs) and Cohere's API to generate text completions based on user input.

## Prerequisites

Before you begin, make sure you have the following:

1. A [Vercel project](https://vercel.com/docs) set up.
   
2. Node.js and npm (or pnpm) installed.
   

## Step 1: Install Dependencies

Start by creating a new [Next.js app](https://vercel.com/docs/frameworks/nextjs) and installing the required dependencies:

`pnpm dlx create-next-app my-ai-app cd my-ai-app pnpm install ai`

## Step 2: Obtain Cohere API Key

To use [Cohere's](https://cohere.com/) API, you'll need an [API key](https://docs.cohere.com/reference/generate). If you don't have one, sign up for an account on the Cohere website to obtain your API key. You can start with your trial key until you're ready to go to production.

Once you have the API key, add it to your project's environment variables in the **`.env.local`** file:

`COHERE_API_KEY='xxxxxxx'`

## Step 3: Create the Next.js Route Handler

Next, we'll create a [Route Handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) in the Next.js app that will interact with Cohere's API to generate text completions.

Create a new file at **`app/api/completion/route.ts`** and add the following code:

``import { StreamingTextResponse, CohereStream } from 'ai' // IMPORTANT! Set the runtime to edge export const runtime = 'edge' export async function POST(req: Request) { // Extract the `prompt` from the body of the request const { prompt } = await req.json() const body = JSON.stringify({ prompt, model: 'command-nightly', max_tokens: 300, stop_sequences: [], temperature: 0.9, return_likelihoods: 'NONE', stream: true }) const response = await fetch('<https://api.cohere.ai/v1/generate>', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.COHERE_API_KEY}` }, body }) // Extract the text response from the Cohere stream const stream = CohereStream(response) // Respond with the stream return new StreamingTextResponse(stream) }`` ## Step 4: Wire up the UI Now, let's create the UI components that will allow users to interact with the text completion feature. Update the existing **`app/page.tsx`** file with the following code: `import { useCompletion } from 'ai/react' export default function Completion() { const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion({ api: '/api/completion' }) return ( <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch"> <form onSubmit={handleSubmit} className="flex items-center gap-3 mb-8"> <label className="grow"> <input className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2" value={input} onChange={handleInputChange} placeholder="Ask anything..." /> </label> <button type="button" onClick={stop}> Stop </button> <button disabled={isLoading} type="submit"> Send </button> </form> <output>Completion result: {completion}</output> </div> ) }` ## Step 5: Deploy to Vercel Finally, we’ll be deploying the repo to Vercel. 1. First, create a new GitHub repository and push your local changes.     2. [Deploy it to Vercel.](https://vercel.com/docs/concepts/deployments/git#deploying-a-git-repository) Ensure you add all [Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) that you configured earlier to Vercel during the import process.
   

Congratulations! You've successfully integrated Cohere's API with a Vercel project to create a text completion app. You can further customize the app and explore other features of Cohere's API to enhance the user experience.