horizon-ui/chatgpt-ai-template

🧠 Horizon AI Template - Trendiest Open-source ChatGPT UI AI Template & Starter Kit for React, NextJS & Chakra UI

Horizon ChatGPT AI Template

 

 

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 documentation here.

Quick Start

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

• Install NodeJS LTS from NodeJs Official Page (NOTE: Product only works with LTS version)

Clone the repository with the following command:

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

Run in the terminal this command:

npm install

Then run this command to start your local server

npm run dev

Your API Key is not working?

• Make sure you have an OpenAI 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. 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.

ATTENTION: The model: GPT-4 does not work yet.

If you are trying to use GPT-4, model it will not work if you don't have access from OpenAI. Note that even if you have ChatGPT Plus, you still need to request access to the GPT-4 API in order to use it with your API Key. This is OpenAI's restriction and we can't do anything about it. You can join the waitlist here .

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 example pages here.

Versions

Free Version	PRO Version

Figma Version

Horizon AI Template is available in Figma format as well! Check it out here! 🎨

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.
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!

Copyright and license

⭐️ Copyright 2023 Horizon UI

📄 Horizon UI License

chatgpt-ai-template's Issues

Is this project still being maintained?

Prop `style` did not match.

Hi,

I have an error with "pro" version of this template. It seems something wrong with Scrollbar component.

Warning: Prop `style` did not match. Server: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:0;margin-bottom:-22px" Client: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:-15px;margin-bottom:-22px"
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at div
    at Scrollbars (webpack-internal:///(app-client)/./node_modules/react-custom-scrollbars-2/lib/Scrollbars/index.js:65:9)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at Sidebar (webpack-internal:///(app-client)/./src/components/sidebar/Sidebar.tsx:35:13)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at EnvironmentProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react-env/dist/chunk-VMD3UMGK.mjs:34:11)
    at ColorModeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/color-mode/dist/chunk-AMBGAKG2.mjs:29:5)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:123:50)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-MFVQSVQB.mjs:30:11)
    at ChakraProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/provider/dist/chunk-3DDHO3UN.mjs:21:5)
    at ChakraProvider2 (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react/dist/chunk-QAITB7GG.mjs:19:5)
    at AppWrappers (webpack-internal:///(app-client)/./app/AppWrappers.tsx:37:11)
    at body
    at html
    at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:40:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:48:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:24:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:11)

how can i use hugging face api in place of openai

hi
is it possible to use hugging face api in place of OpenAI?
IF yes how, please help.
How we can add this if you don't directly support it.