Installation - Horizon AI Template

How to install and set up Horizon AI Template:

Installation - Free version#

Install Horizon AI Template running 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 terminal this command:

npm install

Then run this command to start your local server

npm run dev

Installation - PRO Version#

Horizon AI Template PRO comes with over 100+ individual components, like buttons, inputs, prompt templates, cards, or alerts, giving you the freedom of choosing and combining, more than 26+ ready-to-use fully-coded example pages, and many more premium features!

The PRO Version of Horizon is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real app is very easy to be done.

Upgrade to PRO

Install Horizon AI Template PRO following then next steps:

Open in your code editor the archive you got after you
purchased Horizon AI Template PRO.

Run in terminal this command:

npm install

Then run this command to start your local server

npm run dev

Add custom theme (Optional)#

Inside Horizon AI Template, you can find the ChakraProvider component inside /page/_app.tsx.

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App({ Component }) {
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}

ChakraProvider Props#

That's it, you're good to go!