You Can Automate AI Tasks With a Markdown File. Here's Why I Built a Visual Tool Anyway.
Source: Dev.to
If you use Claude Code, you can already:
- create an agent file,
- write some instructions in Markdown, and
- run a multi‑step workflow from your terminal.
It works. It’s simple. And for a lot of developers, that’s enough.
So why did I spend months building a desktop app that does the same thing with a drag‑and‑drop canvas?
Because I watched my teammates stare at a wall of terminal output with no idea:
- which step just failed,
- which ones already finished, or
- how much the whole thing cost.
I realized that the people who benefit most from AI automation are often the ones least comfortable setting it up.
The Markdown Way Works… Until It Doesn’t
Running an agent from a Markdown file looks like this:
claude --agent agents/my-workflow.mdSimple. Clean. And then…
- Step 4 of 8 fails → you start over from the beginning.
- You have no idea how much that run cost until the invoice arrives.
- Your teammate asks, “What does this workflow do?” → you point them to a Markdown file.
- You want to pause at step 5 for a human review before it continues → good luck.
- You want steps 3, 4, and 5 to run in parallel → now you’re writing Bash scripts.
None of these are deal‑breakers if you’re comfortable in the terminal, but for many people they are.
What AgentFlow Adds on Top
AgentFlow is a free desktop app that sits on top of Claude Code. It doesn’t replace agent files or the CLI; it adds a visual layer you can’t get from a Markdown file alone.
1. You Can See What’s Happening
Every step is a block on a canvas. When a workflow runs, blocks light up in real time:
- Blue – running
- Green – done
- Red – failed
- Gray – waiting
You no longer need to read terminal output to know where things are; just look at the canvas.
Image: AgentFlow canvas showing step status
2. You Can Recover Without Starting Over
If step 5 of 8 fails, click Resume from failure. AgentFlow skips everything that already succeeded and picks up from the failure point. With a Markdown agent you’d have to rerun the whole thing.
3. You Know What You’re Spending
Every run tracks token usage and cost in dollars, broken down by step. A dashboard shows:
- total spend,
- most‑expensive workflows, and
- most‑expensive steps.
You can also set a budget limit so the run stops automatically before you blow through your API credits.
Image: Cost‑tracking dashboard
4. You Can Pause for Human Review
Drop an Approval Gate between any two steps. The workflow pauses and waits for you to review what happened so far before continuing. Trying to do that with a Markdown file is a nightmare.
5. You Can Run Things in Parallel
Drag a Parallel block onto the canvas and put steps inside it. They run simultaneously—no Bash scripting, no background processes, no wait commands.
6. Your Team Can Understand It Without Reading Code
Share the workflow with a teammate. They open AgentFlow, see the canvas, and instantly understand what the workflow does—no need to read Markdown or decipher a Bash script.
Who Is This Actually For?
Not everyone needs this. If you’re already comfortable writing agent files, running them from the CLI, and you don’t care about cost tracking or failure recovery, you’re fine without it.
AgentFlow is for:
| Audience | Why It Helps |
|---|---|
| New to AI automation | The visual canvas is a far easier starting point than learning Markdown syntax and CLI flags. |
| People who want visibility | Watching your workflow execute step‑by‑step on a canvas beats scrolling through terminal text. |
| Teams with non‑technical members | A product manager can look at the canvas and instantly grasp the workflow, something impossible with a raw Markdown file. |
| Anyone burned by a failed run | Restarting a 10‑step workflow from scratch because step 7 failed is painful. “Resume from failure” fixes that. |
A Real Example: Bug Report → Fix
| Step | Type | Description |
|---|---|---|
| 1 | AI Task | “Read this bug report and identify the root cause.” |
| 2 | AI Task | “Write a fix for the bug.” |
| 3 | Shell | npm test |
| 4 | Approval Gate | Review the fix before committing. |
| 5 | Git | Commit and push. |
I drew this on the canvas in about 30 seconds and have run it dozens of times. When tests fail at step 3, I click Resume and it retries from there instead of re‑reading the bug report and rewriting the fix.
Sure, I could write this as a Markdown file, but I’d lose the approval gate, cost tracking, and the ability to resume from step 3 when tests fail.
Getting Started
Prerequisites
- Claude Code documentation installed and authenticated.
- AgentFlow uses Claude Code as its engine.
Install the App
Grab a pre‑built installer from the latest release:
- Linux / macOS / Windows – (link to installer)
Or build from source:
git clone https://github.com/jadessoriano/agent-flow.git
cd agent-flow
npm install
npm run tauri devYour First Workflow in 60 Seconds
- Open AgentFlow and pick your project folder.
- Click + New.
- Drag an AI Task block onto the canvas, type:
Write unit tests for the login function. - Drag a Shell block, type the command you need (e.g.,
npm test). - Connect the blocks, add any Approval Gates or Parallel blocks you want, then hit Run.
That’s it—your workflow is now visual, resumable, cost‑tracked, and ready for collaboration. Enjoy!
Quick Start Example
npm test- Connect them with an arrow
- Hit Run
That’s it – two steps, automated, with real‑time status and cost tracking.
The Tech Stack (If You Care)
- Desktop: Tauri v2 (Rust)
- Frontend: React 19, TypeScript, Tailwind CSS
- Canvas: React Flow
- State: Zustand
- Database: SQLite
- Async: Tokio
Cross‑platform. Lightweight. Not Electron.
Open Source – Tell Me What’s Missing
AgentFlow is MIT‑licensed and actively maintained. If you try it and encounter something confusing, broken, or missing, please open an issue – I read all of them.