This is a starter kit for integrating OpenAI's API into a Next.js application. It is crafted with minimal styling and basic API integration so you can strip it and bring your own libraries to make it your own. Feel free to fork and create something amazing!
First, fork the repo to your dev environment and install the packages:
npm install
#or
yarnThen, run the development server:
npm run dev
# or
yarn devIf you use something besides yarn, be sure to delete any other package manager lockfiles.
Open http://localhost:3000 with your browser to see the result.
Make sure that update the OPENAI_API_KEY=yourApiKey in the .env.example file, and then change the file name to .env.local. You can get an API key by creating an account with OpenAI and then navigating here.
OpenAI's API route is located at src/pages/api/openai.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js and OpenAI, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- OpenAI Documentation – learn abou OpenAI's features and API, as well as how to use them.
- OpenAI Examples – see what others have already created with OpenAI.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.