openhop

I'll animate the OAuth 2.0 authorization code flow.

Generated openhop YAML: 5 nodes (Browser, App Server, Google OAuth, User DB, Session Cache), 8 steps including the code-for-token exchange.

✓ Pushed.
Open: http://localhost:8788/flow/oauth-abc123

Click any node to drill into its sub-flow. Pause on the token-exchange step to see the request/response fields.

Why this version: shows the value proposition in 6 lines — the agent's framing, the structure of what it built, the URL, and a hint at the interaction model (drill / pause). Fits in a card. Matches what a
buyer would actually experience.

Sample Output — Option B (with YAML inline, more detailed)

Shows the actual artifact the agent produces:

Here's the OAuth 2.0 flow as an animated diagram.

meta:
  title: OAuth 2.0 Authorization Code Flow
  description: Standard auth-code grant with PKCE

flow:
  nodes:
    - { id: browser, label: Browser, type: actor }
    - { id: app, label: App Server, type: endpoint }
    - { id: oauth, label: Google OAuth, type: external }

  steps:
    - from: browser
      to: app
      data: User clicks "Sign in"
    - from: app
      to: oauth
      data: Redirect to authorize endpoint with state + PKCE challenge
    - from: oauth
      to: app
      data:
        label: Callback with one-time code
        fields: [code, state]
    - from: app
      to: oauth
      data: Exchange code + verifier for tokens
    - from: oauth
      to: app
      data:
        label: Tokens returned
        fields: [access_token, id_token, email]

✓ Flow created.
Open: http://localhost:8788/flow/oauth-abc123