Resume Story Finder turns a CV into streaming STAR interview cards

The interview evidence already sitting in a resume

A resume is usually written for scanning, not storytelling. It may mention a project, a difficult launch, or a measurable result, but it rarely preserves the full narrative needed for a behavioral interview. The person preparing for that interview still has to turn terse bullets into a clear account of the situation, their responsibility, the action they took, and the result.

Resume Story Finder is built around that translation task. A user pastes in resume text, and the application identifies achievement stories and presents them as cards using the STAR framework: Situation, Task, Action, and Result. Each card is also labeled with an impact level and skill keywords, according to the project README.

That makes the project useful not only as an interview-preparation interface, but also as a compact implementation example for builders working on agent-powered products. Its central idea is that the model does not merely produce a block of prose. It progressively drives a structured user interface.

One story at a time

The app’s experience is deliberately incremental. Rather than waiting for every story to be found, the interface receives each new card as it becomes available. The README describes cards appearing one at a time, with the completed state shown after the final story.

The documented request path starts in the browser with a POST /api/agent request containing the resume text. A Next.js API route calls Claude through the Anthropic SDK. Claude is given a tool for adding a story card, and the backend runs an agentic loop, meaning it makes repeated model calls as it processes tool calls and continues the task.

For every discovered story, the server sends an AG-UI STATE_SNAPSHOT over a streaming HTTP response. A snapshot contains the application state at that point, including the cards found so far. On the client, HttpAgent from @ag-ui/client receives the state and triggers a React update. The result is a card-by-card interface without a page refresh or polling loop.

This distinction matters. A conventional text stream is useful when the desired UI is a transcript. Here, the desired UI is a collection of objects with known fields. The project uses the protocol to move structured state from the agent backend to the frontend, so the frontend can render a story card rather than parse model-written text into one.

STAR as the application contract

STAR is a common interview-answer format: Situation establishes the context, Task identifies the responsibility, Action explains what the candidate did, and Result states the outcome. Resume Story Finder turns those four sections into the shape of a card.

The README says the Action field is intended to be first-person and specific, while the Result field captures a measurable outcome. Those constraints are practical because they shift output away from vague project summaries and toward material that can be rehearsed for an interview.

The repository’s documented component layout reflects this model. ResumeInput.tsx handles the text entry and submission flow. StoryCard.tsx is described as an expandable STAR card with a copy button, and StoryCardGrid.tsx handles the animated responsive grid. Types for StoryCard and the broader application state live in lib/types.ts, while the Claude system prompt is located in lib/adapter.ts.

That separation is a useful implementation lesson. The prompt determines what the agent should extract, types define the data the interface expects, and presentation components focus on rendering that data. The streamed protocol joins those layers without making the UI depend on a free-form response format.

A small stack with a specific streaming role

The project is written in TypeScript and uses Next.js 15 with the App Router and React 19. Next.js supplies the browser application and the API route that hosts the streaming agent loop. React renders the changing card state in the client.

Its agent interface is built with the AG-UI packages @ag-ui/client, @ag-ui/core, and @ag-ui/encoder, all listed in the package manifest. The README identifies AG-UI as the typed event protocol responsible for state events such as STATE_SNAPSHOT, as well as tool-call events. The Anthropic SDK provides the connection to Claude. The manifest also includes RxJS, which is a library for working with asynchronous event streams.

Styling is described as plain CSS-in-JS, with no Tailwind or UI library. That choice keeps attention on the interaction model rather than a design-system dependency, though it also means visual conventions are maintained within the project itself.

Two choices worth examining

First, the agent loop imposes a clear unit of progress: one tool call per story card. That gives the server a natural point at which to emit state. It is easier to show a useful partial result when a completed card is the unit than when the only output is an unfinished sentence. The README documents a configurable MAX_CARDS limit, with a default of up to 12 stories, which is also a concrete boundary on how much the loop will produce.

Second, this design makes the state contract important. The README emphasizes that the agent determines when cards appear while the frontend reacts to typed events. That can reduce frontend-side interpretation, but it also puts more weight on keeping the story-card schema, tool definition, and UI state aligned. The repository’s separate type definitions and adapter prompt point to where a builder would inspect or change that contract.

The documented customization points are straightforward: change the Claude model or card limit in app/api/agent/route.ts, and change the extraction behavior in the system prompt at lib/adapter.ts. Running it requires Node.js 18 or later and an Anthropic API key.

For builders exploring structured agent output, or candidates looking for a way to surface interview material from their own resume, inspect the verified repository: MuLIAICHI/resume-story-finder.