AI Chat App

A simple and basic AI chat application built using Next.js, React, and the Vercel AI SDK.

Table of Contents

• About
• Features
• Demo
• Getting Started
  • Prerequisites
  • Installation
  • Running Locally
• Configuration
• Built With
• Contributing
• License
• Acknowledgements

About

This project is a basic implementation of an AI chat interface. It allows users to input text and receive responses generated by an AI model. The application is built with the Next.js framework for a performant and scalable frontend, React for the user interface, and leverages the Vercel AI SDK to handle the interaction with an AI model.

This app serves as a starting point for exploring the capabilities of the Vercel AI SDK and building conversational AI experiences.

Features

• Simple chat interface.
• Send messages to an AI model.
• Display AI responses.

Demo

Live demo

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn or pnpm
• An OpenAI API key.

Installation

1. Clone the repository:

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

Running Locally

1. Create a .env.local file in the root of your project.

2. Add your AI model API key to the .env.local file. The exact variable name will depend on which AI model provider you are using with the Vercel AI SDK. Common examples:

   # For OpenAI
   OPENAI_API_KEY=your_openai_api_key

   (Replace your_openai_api_key, your_anthropic_api_key, etc., with your actual API key. Refer to the Vercel AI SDK documentation for the correct environment variable name for your provider.)

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser and navigate to http://localhost:3000.

Configuration

• API Key: Configure your AI model API key in the .env.local file as described in the Running Locally section.

• AI Model: The project is configured to use a specific AI model. You can change the model used in the API route (app/api/chat/route.ts or similar) if needed. Refer to the Vercel AI SDK documentation for supported models and how to configure them.

  // Example in your API route (app/api/chat/route.ts)
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });
  
  export async function POST(req: Request) {
    // ... rest of your code
    const response = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo', // <-- Change the model name here
      stream: true,
      messages,
    });
    // ...
  }

Built With

• Next.js
• React
• Vercel AI SDK