Overview

With the AI SDK installed, you can easily create a chatbot using the useChat hook. This hook provides an easy way to interact with AI models and display conversations in streaming mode.

Setup

As an example, let's use the OpenAI API to create an AI assistant. Here are the steps to set up the project:

1. Create OpenAI API key

   Please create an account, top up credits, and get the API key here.

2. Install the @ai-sdk/openai package:

   bash
   bun add @ai-sdk/openai

3. Add the following environment variables to .env file with the API key:

   code
   OPENAI_API_KEY=sk-...

API Endpoint

Create an API endpoint to handle the chatbot conversation in the /api/demo/ai/route.ts file:

route.ts
import { auth, ReqWithUser } from '@/app/api/_middlewares/authorization'
import { parsePayload } from '@/lib/server/payload'
import { openai } from '@ai-sdk/openai'
import { CoreMessage, streamText } from 'ai'
import { NextResponse } from 'next/server'
import { z } from 'zod'

export const POST = auth(async (req: ReqWithUser) => {
  const data = parsePayload(
    z.object({
      messages: z.array(z.custom<CoreMessage>())
    }).strict(), await req.json()
  )
  if (data instanceof Error) {
    return NextResponse.json({
      error: data.message
    }, { status: 400 })
  }

  const response = await streamText({
    model: openai('gpt-4o-mini'),
    messages: data.messages,
  })

  return response.toDataStreamResponse({
    headers: {
      'Content-Type': 'text/event-stream'
    }
  })
})

You can also use Gemini by installing @ai-sdk/google and add GOOGLE_GENERATIVE_AI_API_KEY to your environment variables. Here is an example of using the gemini-1.5-pro-latest model:

route.ts
import { google } from '@ai-sdk/google'

const response = await streamText({
  model: google('gemini-1.5-pro-latest'),
  messages: data.messages,
})
// ...rest of the code

References

• AI SDK