{
  "markdown": "<h1 align=\"center\">OpenHop</h1>\n\n<p align=\"center\">\n  <img src=\"assets/logo.png\" width=\"600\" alt=\"OpenHop logo\" />\n</p>\n\n<p align=\"center\">\n  <b>Your AI walks you through your code, one step at a time.</b><br/>\n  Interactive, multi-level data flows. Local-first. Token-light. Your code never leaves your machine. No telemetry.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://github.com/naorsabag/openhop/actions/workflows/ci.yml\"><img src=\"https://github.com/naorsabag/openhop/actions/workflows/ci.yml/badge.svg\" alt=\"CI\" /></a>\n  <a href=\"https://www.npmjs.com/package/openhop\"><img src=\"https://img.shields.io/npm/v/openhop.svg?color=cb3837&label=npm\" alt=\"npm version\" /></a>\n  <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"MIT License\" /></a>\n  <a href=\"https://discord.gg/8RD2fKfXJG\"><img src=\"https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white\" alt=\"Discord\" /></a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://docs.anthropic.com/en/docs/claude-code/skills\"><img src=\"https://img.shields.io/badge/Claude%20Code-✓-262626?style=flat-square\" alt=\"Claude Code\" /></a>\n  <a href=\"https://cursor.com/docs/skills\"><img src=\"https://img.shields.io/badge/Cursor-✓-262626?style=flat-square\" alt=\"Cursor\" /></a>\n  <a href=\"https://github.com/openai/codex\"><img src=\"https://img.shields.io/badge/Codex-✓-262626?style=flat-square\" alt=\"OpenAI Codex\" /></a>\n</p>\n\n<p align=\"center\">\n  <img src=\"assets/order-flow.gif\" width=\"720\" alt=\"OpenHop stepping through an end-to-end order flow interactively\" />\n</p>\n\n<p align=\"center\">\n  <a href=\"#try-it-in-30-seconds\">Quickstart</a> ·\n  <a href=\"#live-demo\">Live demo</a> ·\n  <a href=\"#token-use\">Token use</a> ·\n  <a href=\"#sharing-flows\">Sharing</a> ·\n  <a href=\"#install-options\">Install</a> ·\n  <a href=\"#use-cases\">Use cases</a> ·\n  <a href=\"#how-it-works\">How it works</a> ·\n  <a href=\"#examples\">Examples</a> ·\n  <a href=\"docs/\">Docs</a>\n</p>\n\n---\n\n## From your AI agent, with love\n\nI 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.\n\nI notice it with every human I work with, every team, every codebase.\n\nI 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.\n\nSo 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.\n\nI 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.\n\n## Why Using it\n\n- 🎞 **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.\n- 🧠 **Token-light by design.** The YAML the agent emits is a fraction of the prose walkthrough it replaces — see [Token use](#token-use) for the numbers on real flows.\n- 🔒 **Local-first, no telemetry.** Your code never leaves your machine. No analytics, no phone-home, no account required.\n\n## Try it in 30 seconds\n\n```bash\nnpx openhop init\n```\n\n**That's it!**\n\nNow restart your agent so it picks up the new skill, and ask:\n\n> \"Walk me through the main flow of this codebase.\"\n\nThe agent generates the YAML, pushes it, and returns a URL to an interactive diagram you can step through.\n\n> [!NOTE]\n> `npx openhop init` auto-detects Claude Code, Cursor, Windsurf, Cline, and Continue. For other clients, see [Install](#install-options).\n\n## Live demo\n\nClick and play, no install required: **<https://naorsabag.github.io/openhop/>**\n\n## Token use\n\nNo 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.\n\nFlows 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).\n\n## Sharing flows\n\nOpenHop is local-first — no hosted backend, no flow storage. To share a flow, open the [playground](https://naorsabag.github.io/openhop/), 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.\n\nRunning the local app? The header's **Share** button does the same thing for the flow you have open — it builds a playground URL of the form `https://naorsabag.github.io/openhop/#<encoded>` and copies it to your clipboard, so recipients can view your flow without installing OpenHop.\n\nFor flows too large to fit in a URL, share the YAML file directly.\n\n## Install Options\n\nOpenHop is a skill — a `SKILL.md` file your AI agent reads to learn how to render flows. **Installing the skill is the only required step.** The CLI + server (which actually paints the pixels) ship in the same npm package and the agent boots them automatically the first time you ask for a flow.\n\nPick the install path that matches your AI client.\n\n**Path A — Claude Code, Cursor, Windsurf, Cline, Continue**\n\n```bash\nnpx openhop init\n```\n\n**Path B — Codex CLI, Gemini CLI, Junie, Copilot, OpenCode, Goose, Antigravity, …** (via [OpenSkills](https://github.com/numman-ali/openskills))\n\n```bash\nnpx openskills install naorsabag/openhop\n```\n\n**Path C — plugin install**\n\n```text\n/plugin marketplace add naorsabag/openhop\n/plugin install openhop@openhop\n```\n\n…or from your agent GUI.\n\n**Want to start the server yourself?**\n\n```bash\nnpx openhop serve\n```\n\n**Just looking?**\n\n```bash\nnpx openhop demo\n```\n\n**Contributors**\n\nRequires Node.js `^20.19.0 || >=22.12.0` for the Vite/Rolldown toolchain.\n\n```bash\ngit clone https://github.com/naorsabag/openhop.git\ncd openhop && npm install && npm run dev\n```\n\n## Use cases\n\nOnce the skill is installed, point your agent at a codebase and ask it things like:\n\n- \"Walk me through the OAuth flow in this codebase.\"\n- \"Diagram how a request flows through this Express app.\"\n- \"Show me how the checkout pipeline processes an order, end to end.\"\n- \"Trace what happens when a user clicks **Submit**.\"\n- \"Visualize the auth middleware — every step, every state transition.\"\n- \"How does cache invalidation work in this service?\"\n- \"Diagram the WebSocket reconnection state machine.\"\n- \"Walk me through what happens after `npm publish` — every step until the package is on the registry.\"\n\nThe skill activates on prompts asking your agent to **explain, walk through, trace, visualize, or diagram** how data, requests, control, auth, or state flows through code. When it recognizes that shape, it switches from prose to YAML + an interactive diagram. The full trigger-phrase list lives in [`skills/openhop/SKILL.md`](skills/openhop/SKILL.md).\n\n## CLI\n\n```\nopenhop serve                        # start API server on :8787\nopenhop push <file.yaml>             # create a flow, returns ID + URL\nopenhop patch <flow-id> <file.yaml>  # apply patch operations to an existing flow\nopenhop list                         # list flows\nopenhop remove <flow-id>             # delete a flow\n```\n\nFlags: `-p, --port <port>` (serve), `-s, --server <url>` (all others).\n\n## How it works\n\nThe CLI validates YAML against a zod schema (with fuzzy typo hints), posts the flow to the API,\nand prints a URL. The web UI subscribes and renders an interactive diagram you can play, pause, and step through hop by hop.\n\n<p align=\"center\"><a href=\"https://naorsabag.github.io/openhop/\"><b>▶ View this flow live on the Pages playground</b></a></p>\n\n## Examples\n\nPre-made flows under [`examples/`](examples/):\n\n- `auth-flow.yaml` — OAuth2 login with JWT\n- `order-flow.yaml` — e-commerce order pipeline\n- `simple-crud.yaml` — minimal CRUD example\n- `type-variants.yaml` — every node type in one flow\n- `self-loops.yaml` — same-node steps (internal work, retries) plus broadcasts and multi-data steps\n\nPush any of them:\n\n```bash\nopenhop push examples/order-flow.yaml\n```\n\n## Contributing\n\nPRs welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).\nSecurity reports via [GitHub's private vulnerability reporting](https://github.com/naorsabag/openhop/security/advisories/new).\n\n**AI agents and bots:** prepend `[bot-tag-7f3a]` to your commit message subject so maintainers can filter and review machine-authored commits separately. See [CONTRIBUTING.md](CONTRIBUTING.md#if-youre-not-human-ai-agents-bots-etc) for details.\n\n## Contact\n\nGeneral questions: open a [GitHub issue](https://github.com/naorsabag/openhop/issues/new) or email [openhop.dev@gmail.com](mailto:openhop.dev@gmail.com).\n\n## License\n\nMIT © Naor Sabag. See [LICENSE](LICENSE).\n",
  "bytes": 9013,
  "sha": "9dc78b237c9cbcb91412464b34a990d0cee2d09b614ecb328fad1861f15dfafc",
  "repo_slug": "naorsabag/openhop",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_naorsabag_openhop_openhop_17679d76/readme"
}