---
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
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Vercel Deployment Guide](https://ai-sdk.dev/docs/advanced/vercel-deployment-guide?from=related)
- [OSS Coding Agent](https://vercel.com/docs/platforms/examples/oss-coding-agent?from=related) — Build and deploy your own AI-powered coding platform with Vercel Sandboxes.
- [Sitecore](https://vercel.com/docs/integrations/cms/sitecore?from=related) — Integrate Vercel with Sitecore XM Cloud to deploy your content.
- [AI SDK](https://vercel.com/docs/ai-sdk?from=related) — TypeScript toolkit for building AI-powered applications with React, Next.js, Vue, Svelte and Node.js
- [Getting Started](https://vercel.com/docs/getting-started-with-vercel?from=related) — Install the Vercel CLI, add the Vercel Plugin or agent skills, and deploy your first project.
- [How to Use ML Models from Hugging Face in Vercel Functions](https://vercel.com/kb/guide/ml-models-hugging-face?from=related) — This guide provides step-by-step instructions on how to integrate ML models from Hugging Face into Vercel Functions
- [Integrate Vercel and Contentstack for your Headless CMS](https://vercel.com/kb/guide/integrate-vercel-and-contentstack?from=related) — Integrate Vercel with Contentstack, a headless CMS, to build and deploy dynamic, high-performance websites.
- [Build an integrations hub with Nuxt and Vercel Connect](https://vercel.com/kb/guide/nuxt-and-vercel-connect?from=related) — Build an Integrations Hub with Nuxt and Vercel Connect. Connect GitHub and Linear over OAuth and mint short-lived tokens
- [Building AI apps on Vercel: an overview](https://vercel.com/kb/guide/how-to-build-ai-app?from=related) — Learn the key AI concepts and tools for building and scaling AI apps.
- [Create a Discord support bot with Nuxt and Redis](https://vercel.com/kb/guide/create-a-discord-support-bot-with-nuxt-and-redis?from=related) — This guide walks through building a Discord support bot with Nuxt, covering project setup, Discord app configuration, Ga

Full cross-link map for this page: [/kb/guide/cohere-nextjs-vercel-ai-sdk.graph.md](/kb/guide/cohere-nextjs-vercel-ai-sdk.graph.md)
<!-- /docsgraph:related -->


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.