> ## Documentation Index
> Fetch the complete documentation index at: https://flowdrop.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive playground

> Test workflows interactively with the FlowDrop 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

```typescript theme={null}
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

```svelte theme={null}
<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:

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
// 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](/guides/interrupts) for details on interrupt types and configuration.

## API endpoints

The playground uses these backend endpoints:

| Endpoint                              | Method | Purpose                         |
| ------------------------------------- | ------ | ------------------------------- |
| `/workflows/{id}/playground/sessions` | POST   | Create a new session            |
| `/workflows/{id}/playground/sessions` | GET    | List sessions for a workflow    |
| `/playground/sessions/{id}`           | GET    | Get session details             |
| `/playground/sessions/{id}`           | DELETE | Delete session                  |
| `/playground/sessions/{id}/messages`  | POST   | Send a message (triggers a run) |
| `/playground/sessions/{id}/messages`  | GET    | Poll for messages               |