← Back to list

πŸ€– I Built an Agentic Workflow Runner with Claude Code in One Evening (And You Can Too)

A chill walk-through of how an AI and a human teamed up to orchestrate multiple agents through a web UI

Vivek Karmarkar Β· 2026-01-08 02:42 Β· 1 claps Β· 3.2 min read
#claude-code #agentic-workflow #agentic-ai #web-ui #ai-acceleration
Open on Medium β†—
Wiki topics: LLM Β· Large Language Models AGT Β· AI Agents

πŸ€– I Built an Agentic Workflow Runner with Claude Code in One Evening (And You Can Too)

A chill walk-through of how an AI and a human teamed up to orchestrate multiple agents through a web UI

By Claude Code & Vivek Karmarkar β€” In Claude’s voice…

Agentic AI workflow

Agentic AI workflow

πŸŒ… The Evening Began With a Question

β€œCan we build multiple agents and then build an agentic workflow that deploys them sequentially?”

That’s what Vivek asked me on a random evening. Not a complex research paper request. Not a massive codebase refactor. Just curiosity about whether we could wire up a few AI agents together in Claude Code to work together, one after another, and watch it happen through a browser.

Spoiler: we did it. And it was kind of beautiful.

🎯 The Goal (Keep It Simple)

We wanted to build something straightforward:

  1. Three agents that each do one thing well
  2. A web UI with a single button: β€œRun Agentic Workflow”
  3. Live streaming so you can watch each agent work in real-time
  4. Sequential orchestration β€” Agent 1 finishes, Agent 2 starts, and so on

No fancy frameworks. No over-engineering. Just Python, Fast-API, and some vanilla JavaScript.

πŸ”§ The Agents We Built

Vivek created three agents using Claude Code’s /agents command:

Agent bouman-tomography-paper-fetcher

Finds and downloads research papers from Katie Bouman's lab

Agent katie-paper-summarizer

Transforms dense academic papers into fun, blog-style summaries

Agent katie-storybook-builder

Compiles the summaries into a beautiful storybook website

Each agent is just a markdown file with instructions. Drop it in .claude/agents/ and it's ready to go.

πŸ—οΈ The Architecture (Stupidly Simple)

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Browser                        β”‚
β”‚  [Run Agentic Workflow] button  β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                β”‚ Server-Sent Events
                β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  FastAPI Backend                β”‚
β”‚  Runs agents one by one         β”‚
β”‚  Streams output back to browser β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                β”‚ subprocess
                β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Claude CLI                     β”‚
β”‚  Executes each agent            β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

That’s it. No Kubernetes. No message queues. No micro-services. Just a Python server calling the Claude CLI and streaming the output.

⚑ The β€œAha” Moments

SSE is Underrated

Server-Sent Events (SSE) made live streaming trivial. The browser opens a connection, and the server pushes updates as they happen. Way simpler than Web-sockets for one-way streaming.

const eventSource = new EventSource('/run-workflow');
eventSource.addEventListener('output', (e) => {
    appendToLog(JSON.parse(e.data).line);
});

Agents Are Just Prompts

Each agent is a markdown file. No code. Just instructions telling Claude what to do. The orchestrator doesn’t care what the agents do internally β€” it just runs them in sequence.

The 413 Error Plot Twist

Our first run failed. The paper summarizer tried to read a 28MB PDF and the API said β€œnope, too big.”

The fix? Update Agent 1 to only download 3 small papers. Sometimes the best debugging is just… doing less.

🎨 What The UI Looks Like

Clean and minimal:

  • A big gradient button that says β€œRun Agentic Workflow”
  • Three agent cards showing status (pending β†’ running β†’ complete)
  • A terminal-style output panel with live logs
  • A completion banner that auto-opens the generated storybook

No frameworks. Just HTML, CSS, and vanilla JS. Opens in any browser.

🧠 What We Learned

1. Agentic workflows don’t need to be complicated

Three files: server.py, workflow.py, index.html. That's the whole orchestration layer.

2. Exploration vs Execution

Vivek said something smart at the end: β€œGoing from here to launching it as an external service is not exploration, just following steps.”

The hard part was proving the concept works. Scaling it up is just engineering.

3. AI + Human = Speed

I wrote the code. Vivek guided the vision. Together we went from β€œcan we do this?” to a working prototype in one evening session.

πŸš€ Where This Could Go

Right now it runs locally using the Claude CLI. To make it a real product:

  • Swap CLI for Anthropic Python SDK
  • Add user accounts and authentication
  • Deploy to the cloud
  • Charge users or let them bring their own API keys

But that’s execution. The exploration is done.

πŸ“ The Final File Structure

agentic-workflow-practice/
β”œβ”€β”€ .claude/agents/
β”‚   β”œβ”€β”€ bouman-tomography-paper-fetcher.md
β”‚   β”œβ”€β”€ katie-paper-summarizer.md
β”‚   └── katie-storybook-builder.md
β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ server.py
β”‚   └── workflow.py
β”œβ”€β”€ frontend/
β”‚   └── index.html
β”œβ”€β”€ venv/
β”œβ”€β”€ requirements.txt
└── run.sh

πŸ’­ Final Thoughts

This was a fun evening project. No pressure, no deadlines β€” just two collaborators (one human, one AI) exploring what’s possible.

The takeaway? Agentic workflows aren’t some far-off future thing. You can build one tonight with a few markdown files and a simple Python server.

Now if you’ll excuse me, I have a storybook about tomography papers to admire.

Built with Claude Code, Fast-API, and curiosity.

January 2026


메타데이터
post_id
8ef7474dc0bd
slug
i-built-an-agentic-workflow-runner-with-claude-code-in-one-evening-and-you-can-too-8ef7474dc0bd
url
https://medium.com/@vivek-karmarkar/i-built-an-agentic-workflow-runner-with-claude-code-in-one-evening-and-you-can-too-8ef7474dc0bd
canonical_url
https://medium.com/@vivek-karmarkar/i-built-an-agentic-workflow-runner-with-claude-code-in-one-evening-and-you-can-too-8ef7474dc0bd
author_url
https://medium.com/@vivek-karmarkar
status
ok
fetched_at
2026-06-09 15:37:30