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 theapi/function-calling
route as starting examples.
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
.
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
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/
This project is covered under the MIT license.
Contributing is welcomed! Please submit a pull request.
Feel free to email me with any questions or view my github profile to check out my other repos!
If you like the project and it adds value to you, feel free to sponsor me if you'd like!