The argument in one line.
Claude Code ships a real conversation history feature through a disciplined five-step workflow—onboard, PRD, implement, investigate, fix—that treats the AI as a junior engineer requiring context and yielding working production code after four debug iterations.
Read if. Skip if.
- A full-stack engineer building a production AI application who wants to see a disciplined Claude Code workflow applied to a real multi-service codebase.
- A developer with 2+ years of experience who's skeptical of AI coding tools and needs to watch a live debug session with genuine failures and fixes.
- Someone shipping features with Claude Code who's stuck on how to onboard the model to an unfamiliar repository before asking it to implement.
- You're a frontend-only or backend-only engineer — this demo requires understanding FastAPI, React, and database schema simultaneously.
- You've never used Claude Code or similar AI agents before — the video assumes you know what a Claude session is and how to interpret its file exploration.
The full version, fast.
Real Claude Code productivity comes from running it like a junior engineer through five disciplined steps: onboard the repo, write a PRD, implement an MVP, investigate failures, then fix with context. The walkthrough adds a persistent conversation history feature to a FastAPI plus React plus Cosmos DB app, asking Claude first to map the codebase into a CLAUDE.md file, then to draft a product requirements document covering scope, success metrics, and GDPR consent, and only then to code. When the feature breaks across four iterations, the fix comes from feeding Claude specific evidence from the network tab and database, not vague complaints. The takeaway: invest in context and verification yourself, because the quality of your debugging input determines how fast the agent converges on working code.
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.

01 · Cold open — real features vs fake demos
Hook + promise: live-code a real feature with a real workflow, not another toy demo.

02 · Step 1 — Repository onboarding via CLAUDE.md
Ask Claude to write a CLAUDE.md describing the codebase before touching any feature. Treats the agent like a junior engineer who needs to learn the repo first.

03 · Step 2 — Product Requirements Document
Prompt Claude for a full PRD (including GDPR compliance) before writing a single line of feature code. Result is better than average professional PRDs.

04 · Step 3 — MVP implementation
With PRD in hand, ask for the minimum viable implementation. Claude removes the Cosmos DB TTL, adds a list endpoint, wires the toggle flag, and builds the sidebar UI. Build errors appear and Claude fixes them across multiple iterations.

05 · Step 4 — Test and investigate yourself
Feature does not work on first test. Instead of pasting it broke into Claude, Zen checks the network tab and the database directly — finds conversations are saving but not being fetched.

06 · Step 5 — Targeted context to fix
Feeds Claude the raw DB document as context. Claude adds the save_conversation flag to the API payload. After one more iteration the feature ships end-to-end.

07 · Outro — AI community CTA
Soft pitch for the AI native engineering community (Skool). Framed as a reward for viewers who made it to the end.
Lines worth screenshotting.
- Starting a Claude Code session by asking the model to read the repository and create a CLAUDE.md before touching any feature is the discipline that treats the AI like a junior engineer who needs to learn the codebase before being trusted with changes.
- A product requirements document generated by Claude — including success metrics, data structures, GDPR compliance research via web search, and a consent model sketch — is better than the average PRD from many professional teams, and it takes minutes to produce.
- Investigating why a feature doesn't work before reporting it to Claude — checking the network tab, confirming whether data was saved to the database, identifying which layer failed — gives the model actionable context rather than a vague 'it doesn't work' prompt.
- Four debug iterations to ship a working feature is an honest record of what real development looks like — running Claude Code in the background means those iterations cost elapsed time, not focused attention.
- Removing the time-to-live setting from an Azure Cosmos DB container is a one-line backend change that permanently alters data retention behavior — which is the category of change that requires human verification, not just trusting that Claude described it correctly.
- The safe conversation flag architecture — passing a boolean from the front-end toggle to the back-end API, which then decides whether to store the conversation — is the clean interface design that Claude produced without being told the implementation approach.
- Pasting a raw database object into the chat when a feature is saving correctly but not retrieving correctly gives Claude the exact data structure to write the retrieval query against, which is faster and more accurate than asking it to guess the schema.
- Treating Claude Code like a junior engineer who needs context and directed investigation produces better outcomes than treating it as an oracle that should get it right in one shot.
- A PRD that ticks off completed features during implementation gives both the human and the agent a living progress tracker without requiring a separate project management tool or a manual status update process.
- The ability to run Claude Code in the background while doing other work means debugging iterations are not expensive in human time — they are expensive in elapsed minutes and tokens, neither of which compounds the way human attention cost does.
- GDPR compliance research via web search inside the PRD generation step is the behavior that closes 90% of the compliance gap without a dedicated legal review — the human still verifies, but the model provides a well-researched starting point.
- A conversation history feature built against a FastAPI backend, React frontend, and Cosmos DB database — from zero to working in one session — is the proof that Claude Code handles real production stacks, not just toy projects.
- Auto-refresh behavior after implementation is the UX detail that surfaces only when you test the live feature, not when you review the code — which is why end-to-end testing in the browser is the final quality gate, not the build step.
- Exporting a PRD to a project management tool like GitHub or monday.com converts a Claude-generated document into a source-of-truth that the whole team works from, not just a Claude session artifact.
- The gap between 'the feature is done' and 'the feature works correctly' is the gap that only manual testing closes — which is why Zen's workflow includes browser testing, network tab inspection, and database verification before declaring any phase complete.
Write a PRD Before You Write a Line of Feature Code
Zen van Riel's five-step workflow — onboard, PRD, implement, investigate, fix with context — ships real features with Claude Code rather than producing endless toy demos.
- Real feature, real workflow, real debug iterations — the promise is not a toy demo
- Ask Claude to write a CLAUDE.md describing the codebase before starting any feature work
- Treating the agent like a new engineer who needs to learn the repo first changes the quality of every subsequent output
- Prompt for a full PRD including compliance before writing any feature code — scope the work before executing it
- The PRD output from this workflow often matches or exceeds average professional quality
- With a PRD in hand, ask for the minimum viable implementation — bounded scope keeps the feedback loop manageable
- Build errors are expected and Claude fixes them across iterations — the loop is the workflow, not a failure
- Feature does not work on first test — check the network tab and the database directly before asking Claude anything
- Targeted diagnosis is the skill — finding that conversations were saving but not fetching is information that makes the next Claude prompt precise
- Feed Claude the raw database document as context — it fixes the right thing when it sees the actual data
- One more iteration after targeted context and the feature ships end-to-end
Terms worth knowing.
- PRD
- Product Requirements Document — a written spec that defines what a feature should do, who it's for, and what constraints it must respect, used to align the AI before it writes any code.
- CLAUDE.md
- A markdown file placed at a project root that gives Claude Code persistent context about the codebase structure, conventions, and behavior rules for that project.
- FastAPI
- A modern Python web framework for building high-performance APIs, known for its automatic OpenAPI documentation and async support.
- Azure Cosmos DB
- Microsoft's globally distributed NoSQL database service, used here to store conversation data with configurable TTL (time-to-live) for automatic expiration.
- conversation history sidebar
- A UI panel — similar to ChatGPT's left sidebar — that lists past conversations a user has had, allowing them to revisit or continue previous sessions.
- TTL (time-to-live)
- A database setting that automatically deletes records after a specified number of seconds or days, used here to purge conversations after 30 days.
- onboarding step
- Zen van Riel's first workflow step: asking Claude Code to read the codebase and write a CLAUDE.md before touching any implementation, so the agent understands structure first.
- debug iteration
- A single cycle of identifying a bug, applying a fix, and testing again — Zen's workflow expects multiple iterations as normal before a feature is complete.
- repository context
- The collection of files, folder structure, and codebase details an AI agent reads to understand a project before making any changes.
Things they pointed at.
Lines you could clip.
“Even though this tool is called Claude Code, I'm not asking you to code yet.”
“You do not want to go back to Claude and just type, uh-oh, the feature doesn't work.”
“This is better than an average product requirements document.”
“I could be doing something else entirely in the background and working basically in parallel to Claude Code.”
Word for word.
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
The bait, then the rug-pull.
Most Claude Code tutorials demo toy projects that never see production. Zen van Riel opens by naming that problem directly, then spends 21 minutes proving the alternative — shipping a real conversation-history feature live, bugs and all.
Named ideas worth stealing.
The 5-Step Claude Code Workflow
- Step 1 — Repository onboarding (write CLAUDE.md first)
- Step 2 — PRD before code
- Step 3 — Implement MVP only
- Step 4 — Test and investigate yourself
- Step 5 — Provide targeted context to fix
A repeatable process for shipping real features with AI coding agents — treat Claude like a junior engineer, scope work with docs, and do your own triage before sending bug reports back.
Investigate Before You Report
When a feature fails, spend 2-3 minutes in the network tab or database yourself before reporting to Claude. The extra context cuts iteration count roughly in half.
How they asked for the click.
“If you check out the link in the description below, you can join my AI native engineering community”
Soft, earned — framed as a reward for viewers who made it to the end. No hard sell, no discount urgency.









































































