Building an AI Chatbot with Cohere, Next.js, and the Vercel AI SDK

This guide will walk you through the steps to integrate Cohere's API with a Vercel project to create a text completion app. We'll use the Vercel AI SDK and Cohere's API to generate text completions based on user input.

Prerequisites

Before you begin, make sure you have the following:

A Vercel project set up.
Node.js and npm (or pnpm) installed.

Step 1: Install Dependencies

Start by creating a new Next.js app and installing the required dependencies:

Terminal

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 API, you'll need an API key. 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.

Use your Cohere API key to securely communicate from your Next.js application.

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

.env.local

COHERE_API_KEY='xxxxxxx'

Step 3: Create the Next.js Route Handler

Next, we'll create a Route Handler 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:

app/api/completion/route.ts

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:

app/page.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.

First, create a new GitHub repository and push your local changes.
Deploy it to Vercel. Ensure you add all 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.