Better stories for the work behind the screens.

Keeping the build simple.

I worked with Claude Code and built the frontend with HTML, CSS, and JavaScript. The backend runs on Vercel and connects to the Google AI API whenever a user generates a case study from their uploads.

Rather than one function doing everything, the backend is split into four, each responsible for a single job. Clicking Generate calls the first; clicking Strengthen on a single section calls the second. The score bars fill in from the third while you read, and the thumbs up or down at the top of a draft goes to the fourth.

The rate limits are per minute, per visitor, and they aren't the same number by accident. Generation is the most expensive request, so it's held tightest. Feedback is capped hardest of all because it posts to an external service, which makes it the easiest thing to abuse. I thought about what happens when a free public AI tool meets the open internet. I anticipated abuse and put a ceiling on it before launch.

The four writing formats are designed for different needs rather than returning the same content under different names. Portfolio Skim keeps the story brief, while Deep Dive creates a fuller narrative with more space for process, decisions, and impact.

Making AI feel dependable.

AI tools can fail for reasons users never see, including model changes, rate limits, and temporary outages. I built the generation flow to handle those issues gracefully and return clear feedback instead of leaving people stuck on a loading screen, wondering what's happening.

The code breaking

Shortly after I set it all up, Artifact suddenly stopped generating case studies. The interface only showed a simple error message by design, so the answer was in the Vercel logs. Working through them in a session with Claude Code, we found two unrelated failures stacked on top of each other.

• The response limit was too high. Each generation was requesting more content than the free tier allows in a single request, so we lowered it.
• The model I was using had changed. Google had retired it for newly created API keys — the key was not the problem, the model just didn't exist anymore.

The first attempted fix was to check which Google models the key could use and pick from that list. That didn't work because Google still lists retired models and only refuses them at call time.

The biggest lesson was not to assume an external service will always behave the same way. Test the full flow, handle failure clearly, and make the integration easy to update when a provider changes something without a clear warning.

Protecting user input.

Artifact accepts text and images from users, sends that information to an AI model, and displays the result back in the browser. That's a direct path to injected code if handled carelessly, so I treated security as a launch blocker rather than a later cleanup. These safeguards were built out in the same session with Claude Code, covering what the app accepts, how output is displayed, and how often the API can be called.

Making those rules strict meant moving every inline script and style into its own file — including the PDF export, which had been writing a stylesheet directly into a new window. The trade-off was worth it: the policy is now restrictive enough to be meaningful rather than decorative.

Teaching it to say "I don't know".

A tool like this becomes unhelpful the moment it starts inventing details. I wrote the prompt to use only the information the user provides and to flag missing details instead of making up metrics, research findings, or outcomes.

BEFORE WRITING — silently scan the notes and identify:
• Every specific number, metric, percentage, or time measurement mentioned
• Every design decision described and what alternatives existed
• What was tried and didn't work

THEN WRITE using only what you found above. Rules:
• If a detail isn't in the notes, write [add: metric] — never invent facts
• Active voice: "I ran 8 interviews" not "8 interviews were conducted"
• Cut: leverage, utilize, robust, seamless, innovative, impactful

The Google AI API returns the response in a structured format so each section can be placed correctly in the interface. Artifact then reviews the draft across impact, decisions, process, and role, giving users a clearer idea of what is strong and what still needs work.

From local project to live product.

I deployed Artifact on Vercel and used its serverless functions to run the AI features. Vercel logs helped me understand what was happening when requests failed, while separate environment settings made it easier to manage the app across development and production.

• Clear logs. Each failed request records enough detail for me to find the cause without exposing technical messages to users.
• Simple error states. Users see a clear message and can try again instead of being shown raw API errors.
• Safer releases. Vercel keeps previous deployments available, making it easier to roll back changes if something breaks.
• Controlled usage. Input limits and rate limits help keep the free public tool available without unexpected API usage.

Who did what.

I built the first version of Artifact myself — the interface, the prompt design, the four writing formats, and the generation flow behind them.

The work described in What I learned and Safeguards was done in a pair-programming session with Claude Code: migrating to Google's Gemini API, hardening the security, writing the test suite, and debugging the outage above.

I directed that session.