Integrating AI with Maps to generate Locations
summary
Builds a Vite + React + TypeScript app with Tailwind that captures speech via the browser Web Speech API, sends transcripts to OpenAI and uses the model to return concrete location suggestions and HTML snippets, then renders map markers and UI. Demo uses an exposed API key for the browser demo and calls GPT-3.5, temperature 0 to get deterministic outputs. Map display integrates MapLibre and MapTiler with React Map GL and shows generated locations, clickable markers and dynamically created buttons.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 3:22Large language models basics
- 5:40Project goals overview
- 8:20OpenAI API setup
- 12:26Vite and React setup
- 15:44Microphone component
- 19:48Language selection
- 20:08OpenAI integration
- 22:48State management
- 23:53Live demo
- 26:25Closing remarks
related talks
38mIntegrating AI and Browser API Voice Recognition on Web App
29mMaking AI better with React feat
27mAI-Generated React Server Components
49mBuilding AI Enabled Web Apps
21mBuilding a Voice-Enabled AI Assistant With Javascript
17mReact Server Components in AI Applications
31mBring AI based Search to Your Website
45mVibe coding with Mapbox GL JS