What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based API key manager. The finished tool will let you:
- Store API keys with service names and tags
-
Display keys with masked characters (e.g.,
sk-12****7890) for security - Copy keys to clipboard with a single click
- Search and filter keys by name or tag
- Persist everything in localStorage so keys survive page refreshes
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Start with a Clear Description
Open your AI tool and start a new conversation. The key to getting good code from AI is describing exactly what you want. Here's a prompt that works well:
Build me a single HTML file with an API key manager. It should have:
- A form to add new keys (service name, API key value, optional tags)
- Display all saved keys in a card layout
- Mask the API key so only the first 4 and last 4 characters show
- A copy-to-clipboard button on each key
- A search bar to filter keys by name or tag
- Save everything to localStorage so it persists
- Use a dark theme with clean, modern styling
Put all HTML, CSS, and JavaScript in one file. No external dependencies besides Tailwind CSS via CDN.
Notice how this prompt is specific about features, layout, and technical requirements. Vague prompts like "make me an API key manager" leave too much room for interpretation.
Save and Test the Output
The AI will generate a full HTML file. Here's what to do with it:
Copy the entire code output
Select all the code the AI generated and copy it to your clipboard.
Save it as api-key-manager.html
Open your text editor, paste the code, and save the file with an .html extension.
Open it in your browser
Double-click the file or drag it into Chrome/Firefox. You should see the app running immediately.
What to look for:
- Does the "Add Key" form appear and work?
- Are keys masked properly when displayed?
- Does the copy button actually copy to clipboard?
- Do keys persist if you refresh the page?
- Does the search bar filter results?
Iterate: Fix What's Broken
It's rare for AI-generated code to be perfect on the first try. That's normal — and learning to iterate is the real skill here. When something doesn't work, describe the problem back to the AI:
The copy button doesn't work — I click it and nothing happens. Also, the key masking shows the full key instead of hiding the middle characters. Can you fix both issues? Keep everything in one HTML file.
Here are common issues and how to ask the AI to fix them:
Copy button not working
Tell the AI: "The clipboard copy fails. Use navigator.clipboard.writeText() and make sure the button targets the correct key value."
Keys disappear on refresh
Tell the AI: "The keys don't persist after refreshing. Make sure the app loads from localStorage on startup and saves after every add/delete."
Styling looks broken
Tell the AI: "The layout is broken — cards overlap and the form doesn't have spacing. Use Tailwind utility classes for a clean grid layout with proper padding."
Add Security Features
Once the basics work, ask the AI to add features that make the tool more practical. Security is important when managing API keys — even in a local tool.
Add these security features to the API key manager:
- A "show/hide" toggle on each key (default to hidden)
- A confirmation dialog before deleting a key
- An export button that downloads all keys as an encrypted JSON file
- Auto-hide the full key after 5 seconds if revealed
Keep the dark theme and the same code structure.
This is where AI tools really shine. Adding features like auto-hide timers and export functionality would take hours to code by hand — but you can describe them in plain English and the AI handles the implementation.
Polish the Design
Once the functionality is solid, use the AI to improve the visual design. Here's a prompt for that:
Improve the visual design of the API key manager:
- Add smooth animations when adding or removing keys
- Show a toast notification when a key is copied
- Add hover effects on the key cards
- Use a monospace font for the masked key display
- Add an empty state with an icon when there are no keys
Keep the dark color scheme but make it feel more polished and modern.
What You Learned
This project teaches more than just API key management. By completing it, you practiced:
Writing Detailed Prompts
You learned to describe features precisely so the AI builds what you actually want.
Iterating on AI Output
You debugged issues by describing problems back to the AI — the core feedback loop of AI-assisted coding.
API Key Security Basics
You understand key masking, secure storage patterns, and why credentials need careful handling.
HTML/CSS/JS Fundamentals
Even without coding experience, you got hands-on with how web apps are structured and how they work.
Tips for Working with AI on This Project
One feature at a time. Don't ask for everything in one prompt. Build the core first, then add features one by one.
Paste error messages. If something breaks, open the browser console (F12) and paste the error into the chat. The AI can usually fix it immediately.
Say "keep everything in one file." AI tools sometimes split code into multiple files. For this project, a single HTML file is easier to manage.
Don't worry about understanding every line. Focus on the behavior — what it does — not every syntax detail. Understanding comes with practice.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.