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

Learn how to build a generative AI application using Cohere, Next.js, and Vercel.
Last updated on August 15, 2023
AIFrameworks

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.

Before you begin, make sure you have the following:

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

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

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.
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'

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)
}

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>
)
}

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

Couldn't find the guide you need?