Humanloop AI Chatbot

An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Humanloop.

Features · Model Providers · Deploy Your Own · Running locally · Authors

Features

• Next.js App Router
• React Server Components (RSCs), Suspense, and Server Actions
• Vercel AI SDK for streaming chat UI
• Humanloop integration for observability, logging and monitoring
• Edge runtime-ready
• shadcn/ui
  • Styling with Tailwind CSS
  • Radix UI for headless component primitives
  • Icons from Phosphor Icons

Running locally

You will need to populate the two evironment variables shown in .env.example. Copy this file to a file called .env. You can retrieve you OpenAI API key here and your Humanloop API key here.

To run the application locally, simply run:

npm install
npm run dev

Your app template should now be running on localhost:3000.

Preview

The chat interface powered by Next.js looks something like this:

Meanwhile, in your Humanloop project, you can explore the generated logs from the app, iterate on the prompt, evaluate it and redeploy.

Humanloop

In app/api/chat/route.ts, LLM chat calls are made via Humanloop's TypeScript SDK. Note that this file is an example of a Next.js Route Handler. This means it will run server-side, and therefore does not expose your OpenAI and Humanloop API keys to the client. This backend Route Handler is called from components/chat.tsx with the Vercel SDK's useChat hook.

After sending and receiving some chat messages in your app, visit the Humanloop app, and you will see a project called sdk-example. Visit the Logs tab and you will find all the chat histories from your running application.

Deploy Your Own

You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:

Authors

Credit for the foundational design, app, and implementation is due to Vercel and their AI Chatbot Template with contributions from:

• Jared Palmer (@jaredpalmer) - Vercel
• Shu Ding (@shuding_) - Vercel
• shadcn (@shadcn) - Contractor

We've mostly just ripped out the good (but more complicated) auth and KV store, and powered the AI chatbot with Humanloop to make it easier to customise, evaluate and improve the underlying AI.