---
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"
published: 2025-11-03
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:

```bash
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:

```json
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:

```tsx
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:

```tsx
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.