Next.js AI chat app

This repository demonstrates how to build a Next.js chat application with modern architecture using Stream's React Chat SDK. It is built upon this Dribbble design from Tran Mau Tri Tam.

If you want to learn more, read the accompanying blog post.

Features

Streaming chatbot answers
LLM-generated dynamic channel naming
React Server Actions and route handlers
Next.js App Router
Styling with TailwindCSS
Chat integration with Stream Chat React

Running locally

Follow these steps to get the project up and running for you.

Step 1: Setup access to a Stream backend

Head to the Stream Dashboard and create an account. Create a new project to build up your application (all handled and managed by Stream).

This is necessary because you need two properties from this.

Your API key
Your Secret

See the red rectangle in the screenshot below on where you can retrieve this information from the Dashboard.

Create a .env.local file at the project's root and add the API key and the secret. A template file (.env.template) is available to view. Ensure you follow the correct naming conventions.

Inside app/page.tsx, you must update the values of userId and userName to be actual values instead of undefined.

If you forget to do this, your app will show an error, displaying what you have missed.

Step 2: Run a LLM locally

For this project, we're using LM Studio, but you can also use other tools.

Make sure you have a local server running a model. We have used Llama-3.2-3B-Instruct-4bit and exposed it on port 1234.

Step 3: Run the project

First, install all the dependencies for the project:

npm install
# or
yarn

You're ready to run the app with the command:

npm run dev
# or
yarn dev

Find more resources to enhance and further customize the Stream SDK

React Docs
Basic Theming
Customization of components
Stream also has an Audio & Video SDK that blends in nicely with the Chat SDK.