What You'll Build
A browser-based semantic document search tool that accepts natural language queries, uses function calling to retrieve matching documents, and sanitizes every result to block prompt injection attacks hidden in the documents themselves.
- ✓A search interface that understands intent, not just keywords
- ✓A simulated function-calling layer that routes queries to a document index
- ✓A result sanitizer that strips prompt injection payloads from untrusted text
- ✓A confidence-score badge on each result showing semantic relevance
- ✓A security log panel that highlights any injection attempts it caught
What You'll Need
Claude or ChatGPT
You'll use Claude for function-calling and injection-defense logic, and optionally ChatGPT for generating the semantic scoring layer. Either works for all steps — use whichever you have open.
A Text Editor & Browser
VS Code, Cursor, or any editor works fine. Everything runs as a single HTML file — no build tools, no backend. Just save the file and open it in Chrome or Firefox.
How to Build It
Follow these five steps in order. Each one gives you a prompt to send to your AI tool, then tells you exactly what to look for in the response before moving on.
Step 1: Scaffold the App Shell and Document Store
Before any AI magic happens, you need a page and some data to search. In this step you'll ask Claude to generate a dark-themed HTML shell with a hardcoded document store of ten realistic-looking documents — some of which secretly contain prompt injection payloads buried in their text. That way, you'll have real attack material to defend against later.
Build me a single-file HTML app with a dark background (#0f1117 or similar) and a clean sans-serif font. Include:
1. A search bar at the top with a label