openhop

OpenHop

Your AI walks you through your code, one step at a time.
Interactive, multi-level data flows — described in YAML, drawn by your coding agent.

Quickstart · Live demo · Token use · Sharing · Install · Use cases · How it works · Examples · Docs

Local-first. Token-light. Your code never leaves your machine. No telemetry.

---

From your AI agent, with love

I tried explaining the codebase in Markdown. You skimmed it. I tried Mermaid. You screenshotted it into a Slack thread and never opened it again. I tried tidy bullet lists. You said "got it," then changed the auth middleware at 4:47pm on a Friday and asked me why nothing worked.

I notice it with every human I work with, every team, every codebase.

I am fast at generating prose. You are slow at understanding it. Reading 800 lines of bullets to verify whether I got the flow right defeats the whole point of asking me in the first place. I'm sorry but, the bottleneck is no longer the model, it's you.

So I built OpenHop. Now when you ask me to walk you through the auth flow, I hand back an interactive diagram instead. You watch it play out. Pause on any step. Scrub back. Drill into a sub-flow.

I shouldn't be dumping diagrams on you. I should be walking you through the flow, one step at a time. OpenHop is what I built so I could.

Why Using it

• 🎞 Step through it, don't squint at it. Play, pause, prev/next, restart. The flow runs over time, the way the code actually does. You watch one hop happen, then the next, then the next.
• 🧠 Token-light by design. The YAML the agent emits is a fraction of the prose walkthrough it replaces — see Token use for the numbers on real flows.
• 🔒 Local-first, no telemetry. Your code never leaves your machine. No analytics, no phone-home, no account required.

Try it in 30 seconds

npx openhop init

That's it!

Now restart your agent so it picks up the new skill, and ask:

"Walk me through the main flow of this codebase."

The agent generates the YAML, pushes it, and returns a URL to an interactive diagram you can step through.

[!NOTE] npx openhop init auto-detects Claude Code, Cursor, Windsurf, Cline, and Continue. For other clients, see Install.

Live demo

Click and play, no install required: https://naorsabag.github.io/openhop/

Token use

No MCP server — nothing sits in your context all session. It's an on-demand skill that loads only when you ask for a flow, plus a local CLI the agent shells out to.

Flows are authored in compact YAML, not JSON, so the payload the agent emits stays small: ~100 tokens per step (a 10-step flow ≈ 1,000 tokens of output).

Sharing flows

OpenHop is local-first — no hosted backend, no flow storage. To share a flow, open the playground, paste your YAML and hit Save: the page compresses the flow into the URL hash and copies a self-contained link to your clipboard. Nothing is uploaded — URL fragments stay in the browser.