API key safety · Calling an LLM API · MP2 Class Favorite

Today was about keeping secrets out of public code. An API key is a password, so it goes in a config.js file that .gitignore keeps out of GitHub. We also called an LLM (OpenAI) from our own code, and it turned out to be the same fetch you already know, just a POST with your key in the header. The one habit to keep: before you push anything, run git status and make sure config.js is not in the list. The full walkthroughs are in the API key safety slides and the calling an LLM API slides.

• One lightning talk, on mental-health AI chatbots.
• Two quick review polls on last class: where a deployed site's live data actually comes from (your browser runs the fetch, the data is not baked into the HTML), and what to do first when a page shows undefined (open the API URL and read the real JSON).
• A tour of where to find APIs for your projects (see the directory list below).
• The main topic: how to keep an API key safe when your repo is public.
• Voted on the MP2 Class Favorite and announced the winner in class.
• Called an LLM API (OpenAI) from JavaScript to generate text.

Treat an API key like a password. It is a unique string that proves a request is yours, and providers use it to track your usage and billing. If someone copies it, they spend your quota or your money. So it never gets shared and never gets committed.

.gitignore keeps the key out of GitHub. Put the key in a separate file, by convention config.js, and add that filename to a .gitignore file in your repo root. Commit the .gitignore first, before the key file exists. After that, git status will not list config.js, so it never reaches GitHub even though the rest of your code does. Every time you change .gitignore, commit it.

.gitignore protects your repo, but not your live page. This is the part that surprises people. If your page uses the key in browser JavaScript, anyone who opens DevTools and looks at the Network tab on your live site can still read it. So .gitignore handles the GitHub side. The key being visible in the browser is a second, separate problem.

To truly hide a key, the code that uses it has to run on a server. A key is hidden only when the code that uses it runs somewhere your visitor cannot see. GitHub Pages only serves files, so there is no server to hide anything at request time. A tool like Vercel gives you a small serverless function that runs on a server: your page calls your function with no key, the function adds the key and calls the real API, and only the result comes back. You do not need this for the class exercises, because the shared class key is disposable. You would reach for it when a real app uses a paid key you cannot afford to leak.

An LLM API is just another API. Calling OpenAI uses the same fetch, await, and JSON you already know. Two differences: it is a POST, so your prompt goes in the request body, and you add an Authorization header with your key. The reply is JSON, and the text you want is nested inside an output array, so read the raw response first before you pull the text out.

You usually do not need the biggest model. A small, cheap model handles summaries, translation, and most class projects. Bigger models cost many times more per call and are rarely worth it here. Model names and prices change every few months, so check the provider's models page before you build.

Good places to browse for a project idea:

• public-apis (large categorized list)
• publicapis.dev
• free public APIs
• apilist.fun
• RapidAPI Hub (aggregator; many are paid, so check first)

Not every API is free, and some can be down or unreliable. Prefer a free, no-key API for MP3 unless you are ready to hide a key with the serverless pattern.

1. Keep going on MP3, your API-powered app. If you have not started, read the MP3 assignment, create a new public repo first (lowercase, hyphens, named for what the app does), and write your PROPOSAL.md. The proposal was due Sunday 7/5, so submit it now if it is not in yet. Final is due Sunday, 7/12. If your API needs a key, protect it with config.js and .gitignore.
2. Try the LLM API exercise from today's slides. In your oim3690 repo, make an ai-chat/ folder with index.html, script.js, and config.js. Add config.js to .gitignore and commit that first, then put the class key in config.js. Write the askAI helper by hand and make one successful call, then let AI turn it into a small chat page. Run git status and confirm config.js never appears.
3. Finish any earlier practice pages you still owe from Week 7: playlist.html, fetch-fun.html, post-message.html.
4. Keep your weekly logs current (logs/wk07.md and logs/wk08.md). These, MP3, and the pages above are all checked by Checkpoint 4, due Sunday 7/12.

Wednesday we keep pushing on MP3 (due Sunday 7/12) and look at how to organize your code as your projects get bigger.