Next.jsReactAdmin dashboardStarter

chatgpt-ai-template — Next.js Admin dashboard Template

By horizon-ui

An open-source ChatGPT-style backend template from Horizon UI, built on Next.js, React, and Chakra UI, offering over 30 light and dark theme components for building AI chat SaaS interfaces.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Backend template built on Next.js, React, and Chakra UI

02

Provides over 30 light and dark theme frontend elements that can be freely combined

03

Includes component documentation and pre-built example pages

04

Repository is under the MIT license; the free version's code can be used commercially

05

Targets ChatGPT-style AI chat SaaS applications

Template Details

Horizon ChatGPT AI Template is an open-source backend template maintained by Horizon UI. The repository is under the MIT license, and the free version's code can be freely used, modified, commercialized, and distributed. The template targets AI chat SaaS applications and is built with Next.js, React, and Chakra UI. It provides over 30 independent frontend elements in both light and dark themes, including buttons, input fields, navigation bars, navigation tabs, cards, and alerts, which can be freely combined. The project includes fairly complete component documentation and provides pre-built example pages to facilitate quickly setting up a project foundation.

Before use, note the following: the template itself does not provide an OpenAI API Key. You need to register an OpenAI account and configure a valid API Key and billing information, otherwise the application cannot properly call the ChatGPT interface. The repository also has a paid PRO version; this listing only includes the public free code and does not include paid upgrade content. Third-party assets such as demo images, fonts, and icons need to be checked separately under their respective licenses. External services such as domain, hosting, database, payment, or AI may also incur additional costs.

Next.jsReactBackendStarter Kit

Is it right for your project?

Use Cases

  • Building the backend interface for AI chat SaaS applications
  • As a starter template for React backend management systems
  • Quickly combining light and dark theme components during demos or prototyping
  • Referencing its component organization and documentation structure for secondary development

Suitable For

  • Developers who need to quickly start an AI chat interface prototype
  • Frontend teams using the Next.js and Chakra UI tech stack
  • Individuals or organizations looking to do secondary development based on MIT-licensed code

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Node.js LTS version is required; the project only supports LTS.

  2. 2

    After cloning the repository, run npm install, then npm run dev to start the local service.

  3. 3

    You need to prepare your own OpenAI account and a valid API Key, and add billing information on the OpenAI billing page, otherwise the API Key cannot be used.

  4. 4

    The template does not provide an API Key; you need to configure it yourself.

  5. 5

    Third-party assets such as demo images, fonts, and icons need to be checked under their respective licenses.

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • You are allowed to freely use, modify, commercialize, and distribute the code of this version.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Using the template's ChatGPT functionality requires registering your own OpenAI account and configuring a valid API Key; the project itself does not provide a key.
  • You must add billing information on the OpenAI billing page, otherwise the API Key cannot be used, and external service fees may apply.
  • The application connects to OpenAI API servers to validate the API Key, which is an external service dependency.
  • The project also offers a paid PRO version; the free version only includes the public open-source code, and paid upgrade content is not within the free scope.
  • The README's copyright and license section points to the Horizon UI End User License Agreement, which coexists with the repository's declared MIT license; note this additional license term before use.
  • Project materials mention optional paid versions or features; this listing only includes the public free code and does not include paid upgrades.
  • Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domain, hosting, database, payment, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Make sure you have an [OpenAI account](https://platform.openai.com/account) and a valid API key to use ChatGPT. We don't sell API keys.

Original README

Make sure you have your billing info added in [OpenAI Billing page](https://platform.openai.com/account/billing/overview). Without billing info, your API key will not work.

Original README

The app will connect to the OpenAI API server to check if your API Key is working properly.

Original README

| Free Version | PRO Version

Original README

📄 [Horizon UI License](https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5)

Original README
https://github.com/horizon-ui/chatgpt-ai-template/blob/main/LICENSEhttps://github.com/horizon-ui/chatgpt-ai-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-09-30. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 90 / 100
Technologies
Next.js · React
Website type
Admin dashboard · Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-01-22
Screenshot last checked
2026-09-30

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 9352c4e67bf65fd1c8e8c2a1c8dbca22c7fd07de732338c0ace09baf7d0c1725

2026-09-30T08:10:00.413Z

Source file / repository
# [Horizon ChatGPT AI Template](https://horizon-ui.com/chatgpt-ai-template) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Check%20Horizon%20ChatGPT%20AI%20Template,%20the%20trendiest%20open%20source%20ChatGPT%20AI%20admin%20template%20for%20%23nextjs%20and%20%23react!%0A%0Ahttps%3A//horizon-ui.com/chatgpt-ai-template/%20%20)

![version](https://img.shields.io/badge/version-3.0.0-brightgreen.svg)
[![GitHub issues open](https://img.shields.io/github/issues/horizon-ui/chatgpt-ai-template.svg?maxAge=2592000)](https://github.com/horizon-ui/chatgpt-ai-template/issues?q=is%3Aopen+is%3Aissue)

<p>&nbsp;</p>

[<img alt="Horizon UI - Tailwind CSS React Admin dashboard template" src="https://i.ibb.co/mqnbX1Y/horizon-ai-template-presentation-image-open-source.png" />](https://horizon-ui.com/ai-template)

<p>&nbsp;</p>

Get started and build your dream AI web app with Horizon AI Template, the trendiest & innovative Open-Source Free ChatGPT AI Admin Template for NextJS & React!

---

### Introduction

Horizon ChatGPT AI Template is the world's best open source OpenAI ChatGPT AI Template made with React, NextJS and Chakra UI! Start creating outstanding Chat AI SaaS Apps faster.

It comes with over 30+ dark/light frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

### Documentation

Each element is well presented in a very complex documentation. You can read more about the <a href="https://horizon-ui.com/docs-ai-template/docs/introduction?ref=readme-horizon-ai-template-free" target="_blank">documentation here.</a>

### Quick Start

Install Horizon ChatGPT AI Template by running either of the following:

- Install NodeJS LTS from [NodeJs Official Page](https://nodejs.org/en/?ref=horizon-documentation) (NOTE: Product only works with LTS version)

Clone the repository with the following command:

```bash
git clone https://github.com/horizon-ui/chatgpt-ai-template.git
```

Run in the terminal this command:

```bash
npm install
```

Then run this command to start your local server

```bash
npm run dev
```

### Your API Key is not working?

- Make sure you have an [OpenAI account](https://platform.openai.com/account) and a valid API key to use ChatGPT. We don't sell API keys.
- Make sure you have your billing info added in [OpenAI Billing page](https://platform.openai.com/account/billing/overview). Without billing info, your API key will not work.
- The app will connect to the OpenAI API server to check if your API Key is working properly.

### Example Page

If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example page. You will be able to quickly set up the basic structure for your web project.

View <a href="https://horizon-ui.com/chatgpt-ai-template/?ref=readme-horizon-ai-template-free" target="_blank">example pages here.</a>

### Versions

| Free Version                                                                                                                                                         | PRO Version                                                                                                                                                                   |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Horizon ChatGPT AI Template](https://i.ibb.co/Qmym1qt/horizon-ai-template-presentation-image-open-source.png)](https://github.com/horizon-ui/chatgpt-ai-template) | [![Horizon AI Template PRO](https://i.ibb.co/ChL2fvf/horizon-ai-template-presentation-image.png)](https://www.horizon-ui.com/ai-template?ref=readme-horizon-ai-template-free) |

### Figma Version

Horizon AI Template is available in Figma format as well! [Check it out here](https://www.figma.com/community/file/1253038328954459768)! 🎨

### Reporting Issues

We use GitHub Issues as the official bug tracker for the Horizon UI. Here are
some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Horizon AI Template.
   Check the CHANGELOG from your dashboard on our
   [CHANGE LOG File](https://github.com/horizon-ui/chatgpt-ai-template/blob/main/CHANGELOG.md?ref=readme-horizon-ai-template-free).
2. Providing us reproducible steps for the issue will shorten the time it takes
   for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you
   encountered the issue might help.

---

### Community

Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon AI Template!

💬 [Join the #HorizonUI Discord Community!](https://discord.gg/f6tEKFBd4m)

### Copyright and license

⭐️ [Copyright 2023 Horizon UI ](https://www.horizon-ui.com/?ref=readme-horizon-ai-template-free)

📄 [Horizon UI License](https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.