Submit
All skills
Skillintermediate

@flowiseai/observe — Examples

A Vite + React dev app for exploring and testing `@flowiseai/observe` components against a live Flowise instance.

Claude Code Knowledge Pack7/10/2026

Overview

@flowiseai/observe — Examples

A Vite + React dev app for exploring and testing @flowiseai/observe components against a live Flowise instance.

Setup

1. Copy the env file and fill in your values:

cp .env.example .env
VariableDescription
VITE_API_BASE_URLBase URL of your Flowise instance (default: http://localhost:3000)
VITE_API_TOKENAPI key for authentication — get this from Flowise UI → Settings → API Keys → Create New Key. This is an API key, not a user session token. Ensure the key has the necessary permissions for any features you want to exercise (e.g. deleting executions).
VITE_FLOW_ID(optional) UUID of an agentflow — scopes the Executions Viewer to that flow only. When unset, all executions across every agentflow are shown. Get it from the URL or settings of your agentflow in Flowise UI.
VITE_EXECUTION_IDUUID of a specific execution — used by the Standalone Detail demo. Get it from any execution row in the executions view.

2. Install dependencies (from this directory):

pnpm install

3. Start the dev server:

pnpm dev

The app opens at http://localhost:5174 (or the next available port).

Demos

Executions Viewer (ExecutionsViewerExample)

Route: / (default tab)

Renders `` with optional scoping via VITE_FLOW_ID. When VITE_FLOW_ID is set, the viewer is scoped to that agentflow; when unset, all executions across every agentflow are shown.

Features exercised:

  • Execution list with state and session ID filters
  • Pagination
  • Clicking a row opens ExecutionDetail in a side drawer
  • Single-row delete (allowDelete={true})
  • Auto-poll while a run is INPROGRESS
  • HITL Approve/Reject buttons (logs to console — no real prediction call)

Standalone Detail (StandaloneDetailExample)

Route: /detail (second tab)

Renders `` given an execution UUID. Useful for testing the step viewer in isolation or deep-linking into a known trace.

The execution ID can be pre-filled via VITE_EXECUTION_ID or pasted into the text field at runtime.

Features exercised:

  • Resizable split-pane layout
  • Node tree sidebar with iteration grouping
  • NodeExecutionDetail — all renderers (markdown, JSON, raw/rendered toggle)
  • Token / cost / time metrics per node
  • Auto-poll while INPROGRESS

Notes

  • The examples import @flowiseai/observe directly from packages/observe/src/ via Vite path aliases — no build step required. Source changes are reflected immediately via HMR.
  • HITL callbacks in these demos log to the browser console instead of making real prediction calls. To test end-to-end HITL, replace the onHumanInput handler with a real fetch to your Flowise prediction endpoint.