Built mockup — not a screenshot
The problem
Most "AI features" are a chat box dropped onto a page. That is not useful — the output has to come back in a shape the application can actually render.
The approach
Call the model server-side, constrain it to a structured response, and parse defensively — the extraction step assumes the model will sometimes wrap its JSON in prose, because it does.
The architecture
- Server-side API call — the key never reaches the browser
- Structured-output prompting with a JSON extractor that tolerates surrounding text
- Graceful failure: the page renders without the feature when the API is unavailable or rate-limited
- Model and provider set in one config block, so swapping providers is a config change
Result
Built so the model call is a replaceable component: provider, model and key live in config, and a failed call degrades the page instead of breaking it.
Your next system starts here.
Have a technical problem worth solving?