Interactive playground

The playground provides an interactive testing environment for workflows, featuring a chat interface, session management, and real-time execution feedback.

Try it

In your editor, you can create sessions, send messages, and watch the simulated workflow execute in real time.

Quick start

Mount API

import { mountPlayground } from '@flowdrop/flowdrop/playground';
import '@flowdrop/flowdrop/styles';

const playground = await mountPlayground(container, {
  workflowId: 'my-workflow-id',
  endpointConfig: createEndpointConfig('/api/flowdrop'),
  onSessionStatusChange: (newStatus, previousStatus) => {
    console.log(`Session status: ${previousStatus} -> ${newStatus}`);
  }
});

// Control the playground
playground.startPolling();
playground.destroy();

Svelte component

<script lang="ts">
  import { Playground } from '@flowdrop/flowdrop/playground';
</script>

<Playground workflowId="my-workflow-id" />

Features

Session management

The playground supports multiple parallel sessions. Each session represents an independent conversation with the workflow:

• Create new sessions
• Switch between active sessions
• View session history
• Delete sessions via dropdown menu

Chat interface

The chat panel displays messages from both the user and the workflow execution:

• User messages are shown on the right
• System/assistant messages on the left
• Execution logs inline in the conversation
• Interrupt prompts rendered as interactive UI elements

Real-time polling

The playground polls the backend for new messages during execution. Configure polling behavior:

const playground = await mountPlayground(container, {
  playgroundConfig: {
    pollingInterval: 1500,
    shouldStopPolling: (status) => {
      // Stop polling on terminal statuses
      return ['completed', 'failed', 'cancelled'].includes(status);
    },
    isTerminalStatus: (status) => {
      return ['completed', 'failed', 'cancelled'].includes(status);
    }
  }
});

Configurable lifecycle hooks

import { defaultShouldStopPolling, defaultIsTerminalStatus } from '@flowdrop/flowdrop/playground';

The awaiting_input status pauses polling automatically — call playground.startPolling() to resume after an interrupt is resolved.

Push messages

For custom transports (WebSocket, SSE), push poll responses directly:

// Push messages from a WebSocket
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  playground.pushMessages(data);
};

Human-in-the-loop

The playground integrates with FlowDrop's interrupt system. See the Human-in-the-Loop guide for details on interrupt types and configuration.

API endpoints

The playground uses these backend endpoints: