create-chattr-app

A next js chattr boilerplate. Built with Nextjs, Chattr, Tailwindcss, OpenAI, and Typescript.

• Ships with chattr's default theme, and chattr's minimalist theme (originally styled by shadcn) allowing for full customization over every component chattr offers.
• Full theme support for light/dark mode via next themes.
• Minimalist landing page example that has the minimalist chattrbot, menu, and navigation installed.
• Two routes are setup, one for basic chatgpt functionality and the other for chat gpt and function calling.
• Default theme uses the api/chatgpt route, while the minimalist theme uses the api/function-calling route as starting examples.

Demo

You can view a live demo on codesandbox! Just enter in your OPENAI_API_KEY in the .env.development.local file. For function calling with the Minimalist Chattrbot, you will also need a WEATHER_APP_ID and a REPLICATE_API_TOKEN.

Installation

NEW You can now use npx create-chattr-app for installation of files and dependencies automatically:

npx create-chattr-app your-app-name

Or you can clone it, and manually install dependencies:

git clone https://github.com/christianbmartinez/create-chattr-app.git

Usage

You can skip this step if you are using npx create-chattr-app. Otherwise, install all dependencies by running:

npm install

Next, you need an OPENAI_API_KEY. If you don't have one already, click here to get one.

Once you have your key, insert your api key in both .env.production.local and .env.development.local, along with any other api keys if you plan on using the default function calling features. In production, remember to copy your api key, to your environment variables section.

OPENAI_API_KEY='YOUR_OPENAI_API_KEY'
WEATHER_APP_ID='YOUR_OPENWEATHERMAPS_API_KEY'
#https://home.openweathermap.org/api_keys
# Sign up and subscribe to the Current weather and forecast free plan
REPLICATE_API_TOKEN='YOUR_REPLICATE_TOKEN'
#https://replicate.com/account/api-tokens
# Login with github and create a token

Once you have your api keys, create the build:

npm run build

Finally, you can run the application in development mode:

npm run dev

For running the app in production mode, use:

npm run prod

You can view the app locally at http://localhost:3000/

License

This project is covered under the MIT license.

Contributing

Contributing is welcomed! Please submit a pull request.

Questions

Feel free to email me with any questions or view my github profile to check out my other repos!

Sponsors

If you like the project and it adds value to you, feel free to sponsor me if you'd like!