New Project

Chatbot by Aceternity

A modern, interactive chatbot template built with Next.js, AI SDK, Aceternity UI, and Neon's serverless Postgres.

DeployView Demo
This is an auto-uploaded thumbnail from https://vercel.com/templates/submit.

Neon x Aceternity Chatbot Template

A modern, interactive chatbot template built with Next.js, AI SDK, Aceternity UI, and Neon's serverless Postgres.

Features

  • 🤖 Real-time streaming responses
  • 💾 Persistent chat history storage with Neon serverless Postgres
  • ✨ Beautiful UI components from Aceternity UI
  • 🎨 Fully customizable with Tailwind CSS
  • 📱 Responsive design for all devices
  • ⚡ Built on Next.js 14 with App Router

Prerequisites

  • Node.js 18+
  • A Neon account to create a Postgres database
  • An OpenAI API key

Getting Started

  1. Clone the repository:
git clone https://github.com/neondatabase/neon-chatbot.git
cd neon-chatbot-template
  1. Install dependencies:
npm install
# or
yarn install
# or
pnpm install
  1. Create a .env.local file in the root directory with the following variables:
DATABASE_URL="your-neon-database-url"
OPENAI_API_KEY="your-openai-api-key"
  1. Set up the database schema:
CREATE TABLE chat_history (
id SERIAL PRIMARY KEY,
user_message TEXT NOT NULL,
assistant_message TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
  1. Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

  • /app - Next.js 14 app directory containing routes and layouts
  • /components - Reusable UI components
  • /lib - Utility functions and shared code
  • /public - Static assets
  • /styles - Global styles and Tailwind CSS configuration

Key Technologies

  • Next.js - React framework
  • Neon - Serverless Postgres database
  • OpenAI - GPT-4 language model
  • Tailwind CSS - Utility-first CSS framework
  • Framer Motion - Animation library
  • Aceternity UI - UI components

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform.

  1. Push your code to a GitHub repository
  2. Import your repository to Vercel
  3. Add your environment variables in the Vercel dashboard
  4. Deploy!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgments

  • Aceternity UI for the beautiful UI components
  • Neon.tech for the serverless Postgres database
GitHub Reponeondatabase/neon-chatbot
Use Cases
AI
Stack
Next.js
Tailwind
Database
Neon

Related Templates

Chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel
Chatbot thumbnail

Nuxt AI Chatbot

An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI SDK.
Nuxt AI Chatbot thumbnail

Gemini AI Chatbot

Gemini-powered chatbot with the Vercel AI SDK, Next.js, and React.
Gemini AI Chatbot thumbnail
DeployView Demo