Skip to content

docs(blog): "Human-in-the-Loop LangGraph Agents in Angular"#555

Merged
blove merged 1 commit into
mainfrom
claude/blog-hitl-refund-rewrite
May 28, 2026
Merged

docs(blog): "Human-in-the-Loop LangGraph Agents in Angular"#555
blove merged 1 commit into
mainfrom
claude/blog-hitl-refund-rewrite

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 28, 2026

Summary

Third post in the agent-UI tutorial series (~2,500 words). Walks through the cockpit refund example shipped in #553 — code blocks are faithful to cockpit/langgraph/interrupts, and the three screenshots were captured from the running app during the manual-review checkpoint.

Replaces #550 (closed), which documented APIs that didn't exist. This version teaches the real shipped pattern: structured interrupt({ kind: 'refund_approval', … }) payload, the <chat-approval-card> native-dialog composition, and the approve / edit / cancel resume flow.

What it covers

  • Why HITL is the production-vs-demo line for tool calls
  • The three-box architecture (LangGraph node → adapter → chat dialog)
  • Three-file scaffold with verbatim cockpit code (Pydantic extraction, request_approval interrupt, <chat-approval-card> body slot)
  • The terminal-vs-non-terminal action distinction (Approve/Cancel close; Edit stays open)
  • Production patterns: idempotency, audit trail, when-not-to-interrupt
  • Three figures from the live app, inside the screenshot-frame treatment

Voice / SEO

  • Primary keyword angular human in the loop / langgraph interrupt angular (near-empty SERP)
  • Voice doc compliance: title-restated lede, ## Goals ending in Have fun!, "Let's" transitions, italics emphasis, one 💚, "freakin' cool", personal Stripe disclosure, forward-link close, explicit ## Conclusion

Test plan

  • nx lint website clean
  • nx test website green
  • nx e2e website green (content-only change)
  • Manual: renders at /blog/human-in-the-loop-langgraph-agents-in-angular, three images load (verified locally)

🤖 Generated with Claude Code

Third post in the agent-UI tutorial series. Walks through the cockpit
refund example (cockpit/langgraph/interrupts) verbatim — structured
interrupt payload, ChatApprovalCard native-dialog modal, approve/edit/
cancel resume flow. Three screenshots captured from the running app
during manual review.

SEO target: "angular human in the loop" / "langgraph interrupt angular"
— near-empty SERP, high commercial intent.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
threadplane Ready Ready Preview, Comment May 28, 2026 4:48am

Request Review

@blove blove enabled auto-merge (squash) May 28, 2026 04:48
@blove blove merged commit 46464df into main May 28, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant