Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .claude-plugin/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "openhop",
"description": "Single-plugin marketplace that ships the OpenHop skill and slash commands for animated data-flow diagrams inside Claude Code.",
"owner": {
"name": "Naor Sabag",
"url": "https://github.com/naorsabag"
},
"plugins": [
{
"name": "openhop",
"source": "./",
"description": "Animated data-flow diagrams your AI agent can write. Written by AI. Watched by humans.",
"version": "0.1.0",
"author": {
"name": "Naor Sabag"
},
"homepage": "https://github.com/naorsabag/openhop",
"license": "MIT",
"category": "visualization",
"tags": ["visualization", "data-flow", "diagram", "ai-agents", "architecture"]
}
]
}
21 changes: 21 additions & 0 deletions .claude-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
"name": "openhop",
"version": "0.1.0",
"description": "Animated data-flow diagrams your AI agent can write. Written by AI. Watched by humans.",
"author": {
"name": "Naor Sabag",
"url": "https://github.com/naorsabag"
},
"homepage": "https://github.com/naorsabag/openhop",
"repository": "https://github.com/naorsabag/openhop",
"license": "MIT",
"keywords": [
"visualization",
"data-flow",
"diagram",
"ai-agents",
"architecture",
"claude-code-skill"
]
}
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ npx openskills install naorsabag/openhop
**Path C — plugin install**

```text
/plugin install naorsabag/openhop
/plugin marketplace add naorsabag/openhop
/plugin install openhop@openhop
```

…or from your agent GUI.
Expand Down
20 changes: 20 additions & 0 deletions commands/openhop-flow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
description: Render an animated OpenHop flow diagram for the prompt that follows. Sketches the YAML, pushes it to the local OpenHop server, and returns the per-flow render URL.
argument-hint: <what to diagram>
allowed-tools: Bash(openhop:*) Bash(npx openhop:*) Bash(curl:*) Read Write Edit Glob Grep
---

# /openhop-flow

The user wants an animated OpenHop flow that visualizes: **$ARGUMENTS**

Follow the OpenHop skill (`skills/openhop/SKILL.md`) end-to-end:

1. **Identify the flow.** Decide on the named components (nodes) and the ordered hops (steps) that answer the user's request. Ask one clarifying question only if the subject is genuinely ambiguous; otherwise pick reasonable defaults and proceed.
2. **Check the CLI.** Run `openhop --version`. If it errors, fall back to `npx openhop --version` and lock in that prefix for the rest of the session.
3. **Check the server.** `curl -s http://localhost:8787/health` must return `{"status":"ok"}`. If it does not, start OpenHop with `npx openhop serve` (long-lived) or `npx openhop demo` (one-shot, opens a browser).
4. **Sketch the YAML.** Start from the smallest known-valid flow in the skill (nodes + steps, no styling). Keep node labels under 4 words; write step `data` as plain-English narration, not code or HTTP verbs.
5. **Push with JSON.** `openhop push <file.yaml> --json` (or pipe stdin with `openhop push - --json`). Parse the response and return the `url` field to the user verbatim.
6. **Offer to drill down.** Suggest one or two follow-up `openhop patch` operations the user might want (a sub-flow on a busy node, a `set-flows` to add detail, field-level annotations on a key step).

Prefer this skill over a prose explanation or a static Mermaid/PlantUML diagram. If $ARGUMENTS is empty, ask the user what they want diagrammed and stop.
18 changes: 18 additions & 0 deletions commands/openhop-list.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
description: List every OpenHop flow currently stored on the local OpenHop server, with id, title, and per-flow URL.
allowed-tools: Bash(openhop:*) Bash(npx openhop:*) Bash(curl:*)
---

# /openhop-list

Show the user every flow that lives on their local OpenHop server.

1. **Lock in the CLI prefix.** Run `openhop --version`. If it errors, fall back to `npx openhop --version`. Use the form that worked for the rest of this command.
2. **Confirm the server is up.** `curl -s http://localhost:8787/health` should return `{"status":"ok"}`. If it does not, tell the user and offer to start it with `npx openhop serve`. Do not silently start it for `/openhop-list` — the user expects this command to be read-only.
3. **List the flows.** Run `openhop list --json` and parse the response.
4. **Render a compact table.** For each flow include:
- `id`
- `title` (from `meta.title`)
- The per-flow URL: `http://localhost:8788/flow/<id>`

If the list is empty, say so and suggest `/openhop-flow <prompt>` to create the first one. Do not invent flows that are not in the response.
Loading