AI chat widget · OpenAI API
Chat Bot
A chat widget that answers questions with the OpenAI API. Open it from the corner of the page, type a message, and the reply appears in the conversation.
- Role
- Solo: chat UI and API integration
- Context
- Web Bootcamp project, 2024
The problem
I wanted hands-on experience shipping an AI feature, not just using AI tools: wiring a language model into a page and giving people a chat interface that feels natural to use.
What I built
- A chat widget that opens and closes from a button in the corner of the page
- Messages sent to the OpenAI Chat Completions API (GPT-3.5 Turbo), with the reply added to the conversation
- A “Thinking...” message while the reply loads, and a clear error message if the request fails
- Enter to send, Shift+Enter for a new line, and a text box that grows as you type
How it works
Plain JavaScript, no framework
The whole widget is HTML, CSS and vanilla JavaScript. Each message becomes a list item built with the DOM API, and the chat box scrolls to the newest message after every send and reply.
Safe message rendering
Messages from the user and the model are written with textContent, not innerHTML, so anything that looks like HTML or script in a message shows as plain text instead of running on the page.
Keeping the API key out of GitHub
The OpenAI key is pasted in locally to run the demo and blanked out before committing, so no key is stored in the public repository. For a production version I would move the call behind a small server route so the key never reaches the browser.