This project demonstrates the integration of GPT-4 and React-Leaflet to visualize geographic data. The app fetches coordinates and a location title from GPT-4 based on a user query, and then renders them as markers on a Leaflet map.
The application utilizes GPT-4 for generating coordinates and a title for a location based on the user's request. Once the information is fetched, React-Leaflet is used to mark that location on the map.
- OpenAI SDK
- Next.js
- React.js
- React-Leaflet
- Node.js
- Clone the repository
git clone https://github.com/developersdigest/GPT-4-LEAFLET-NEXT-JS
- Navigate to the project folder and install dependencies
cd your-project-folder
npm install
- Add your OpenAI API key to a
.env
file
OPENAI_API_KEY=your-api-key-here
- Start the development server
npm run dev
- Open the application in a browser.
- Enter a query in the input field.
- Hit "Submit" or press Enter to get the coordinates and title which will be displayed on the map.
You can watch the demo video here.