Skip to content
VercelLogotypeVercelLogotype
LoginSign Up

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
Ownerneondatabase
Repositoryneon-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

Gemini AI Chatbot

Gemini-powered chatbot with the Vercel AI SDK, Next.js, and React.
Gemini AI 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

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • EveNew
  • ConnectNew

Core Platform

  • CI/CD
  • Content Delivery
  • Fluid Compute
  • Observability

Security

  • Platform Security
  • WAF
  • Bot Management
  • Bot ID

Tools

  • Vercel DropNew
  • Vercel Agent
  • Vercel PluginNew
  • Next.js
  • Domains
  • v0

Frameworks

  • Nuxt
  • SvelteKit
  • Nitro
  • Turborepo
  • Tanstack Start
  • FastAPI
  • xmcp
  • All frameworks

SDKs

  • Vercel SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDKNew
  • Queues SDKNew
  • Streamdown

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
  • Platform Engineers
  • Design Engineers

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Articles
  • Community

Explore

  • Customers
  • Marketplace
  • Templates
  • Partner Finder
  • Vercel + AWS

Company

  • About
  • Careers
  • Press
  • Events
  • Startups
  • Shipped on Vercel
  • Open Source Program
  • Enterprise
  • Pricing
  • Help

Legal & Trust

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • DPA
  • Acceptable Use Policy
  • Legal (all documents)
  • Trust Center
  • Status

Social

  • GitHub
  • X
  • LinkedIn
  • YouTube
  • Instagram
  • VercelVercel
Agent Stack
  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve
Core Platform
  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD
Tools
  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Learn
  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base
Build
  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce
Explore
  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
EnterprisePricing
Contact
Log InSign Up
Dashboard

Products

Agent Stack

  • AI SDK
  • AI Gateway
  • Sandbox
  • Workflows
  • Eve

Core Platform

  • Security
  • Content Delivery
  • Fluid Compute
  • Observability
  • CI/CD

Tools

  • Next.js
  • Vercel Agent
  • Vercel Plugin
  • Domains
  • v0
Resources

Learn

  • Docs
  • About
  • Blog
  • Changelog
  • Knowledge Base

Build

  • AI Apps
  • Web Apps
  • Marketing Sites
  • Platforms
  • Commerce

Explore

  • Customers
  • Marketplace
  • Partner Finder
  • AWS
  • Community
Enterprise
Pricing
Sign UpLog In
Contact
DeployView Demo

Loading status…

Select a display theme: