run-llama/chat-ui

mirror of https://github.com/run-llama/chat-ui.git synced 2026-07-01 21:24:01 -04:00

Files

T

Marcus Schiesser 09d6ec694b add fullstack examples for nextjs and python (#96 )

2025-05-29 14:06:52 +07:00

1.4 KiB

Raw Blame History

Next.js Chat UI Example

This is a simple Next.js application demonstrating how to use the @llamaindex/chat-ui library to build a chat interface.

Features

Basic chat interface using @llamaindex/chat-ui components
API route that integrates with LlamaIndex and OpenAI
Fallback to fake streaming when API key is not available
TypeScript support

Getting Started

Install dependencies:
```
npm install
```

Set your OpenAI API key:

export OPENAI_API_KEY=your-api-key-here

Start the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser.

Project Structure

app/page.tsx - Main chat interface
app/layout.tsx - Root layout
app/api/chat/route.ts - Chat API endpoint using LlamaIndex
package.json - Dependencies and scripts
next.config.js - Next.js configuration
tsconfig.json - TypeScript configuration

How It Works

The example uses:

@llamaindex/chat-ui components for the UI
LlamaIndex SimpleChatEngine for AI chat functionality
Vercel AI SDK for streaming responses
OpenAI GPT-4o-mini as the language model

An OpenAI API key is required for the chat functionality to work.

Learn More