---
title: "Chatbot by Aceternity"
description: "A modern, interactive chatbot template built with Next.js, AI SDK, Aceternity UI, and Neon's serverless Postgres."
url: "https://vercel.com/templates/next.js/chatbot-by-aceternity"
links:
  repository: "https://github.com/neondatabase/neon-chatbot"
  demo: "https://neon-aceternity-chatbot.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Chatbot+by+Aceternity&demo-description=A+modern%2C+interactive+chatbot+template+built+with+Next.js%2C+AI+SDK%2C+Aceternity+UI%2C+and+Neon%27s+serverless+Postgres.&demo-url=https%3A%2F%2Fneon-aceternity-chatbot.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2cjDyEMUVtgdWBp9dXRXfv%2F548ea6a3ba0dc1b24677de482c28f9c3%2Fbanner.png&project-name=Chatbot+by+Aceternity&repository-name=chatbot-by-aceternity&repository-url=https%3A%2F%2Fgithub.com%2Fneondatabase%2Fneon-chatbot&from=templates&skippable-integrations=1&env=OPENAI_API_KEY&stores=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%5D"
---

# Chatbot by Aceternity

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

# Neon x Aceternity Chatbot Template

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

![Banner](https://neon-chatbot.vercel.app/banner.png)

## 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](https://neon.tech/) account to create a Postgres database
- An [OpenAI](https://openai.com/) API key

## Getting Started

1. Clone the repository:

```bash
git clone https://github.com/neondatabase/neon-chatbot.git
cd neon-chatbot-template
```

2. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```

3. Create a `.env.local` file in the root directory with the following variables:
```bash
DATABASE_URL="your-neon-database-url"
OPENAI_API_KEY="your-openai-api-key"
```

4. Set up the database schema:
```sql
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
);
```

5. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

Open [http://localhost:3000](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](https://nextjs.org/) - React framework
- [Neon](https://neon.tech/) - Serverless Postgres database
- [OpenAI](https://openai.com/) - GPT-4 language model
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Framer Motion](https://www.framer.com/motion/) - Animation library
- [Aceternity UI](https://ui.aceternity.com/) - UI components

## Deployment

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new).

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](https://ui.aceternity.com/) for the beautiful UI components
- [Neon.tech](https://neon.tech/) for the serverless Postgres database

## Related Templates

### [Gemini AI Chatbot](https://vercel.com/templates/next.js/gemini-ai-chatbot)

Gemini-powered chatbot with the Vercel AI SDK, Next.js, and React.

### [Nuxt AI Chatbot](https://vercel.com/templates/nuxt/nuxt-ai-chatbot)

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

### [Chatbot](https://vercel.com/templates/next.js/chatbot)

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

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.