Str:::lab Studio is a browser-based SQL IDE that connects directly to any Apache Flink SQL Gateway. It provides a complete development, monitoring, and administration experience — without the overhead of a full platform deployment. Works with local Docker, Kubernetes, and any self-hosted or managed Flink cluster.

Quickstart #

Copygit clone https://github.com/coded-streams/strlabstudio
cd strlabstudio
docker compose up -d
open http://localhost:3030

Copypython3 -m http.server 8080
# Open studio/index.html — use Direct Gateway mode

Copyhelm repo add strlabstudio https://coded-streams.github.io/strlabstudio-operator/charts
helm install strlabstudio-operator strlabstudio/strlabstudio-operator \
  --namespace flinksql-system --create-namespace

kubectl apply -f - <<EOF
apiVersion: codedstreams.io/v1alpha1
kind: StrlabStudio
metadata:
  name: my-studio
  namespace: flink
spec:
  gateway:
    host: flink-sql-gateway
    port: 8083
  jobmanager:
    host: flink-jobmanager
    port: 8081
EOF

Connection Modes #

Architecture #

Str:::lab Studio is a static HTML application served by nginx. All SQL execution happens via the Flink SQL Gateway REST API. The browser manages all session state client-side.

Pipeline Manager v2.1 #

Visual drag-and-drop Flink SQL pipeline builder. Access via Managers → Pipeline Manager. Drag operators onto the canvas, connect them, configure parameters inline, and get production-ready Flink SQL generated automatically. Edges are colour-coded by type: FORWARD, HASH, REBALANCE, BROADCAST, RESCALE.

Feature Engineering Manager v0.0.25 #

A six-step guided wizard for building real-time Flink SQL feature pipelines. Supports Schema Registry integration or manual column entry. Access via Managers → Feature Engineering.

Six-Step Wizard

AI Model Inference Manager v0.0.25 #

A seven-step guided wizard for configuring real-time ML model inference on Flink streaming pipelines. 25 model server types across five categories. Access via Managers → Inference Manager.

Flink Agent Manager v0.0.26 #

A full visual IDE for building event-driven AI agents on Apache Flink Agents 0.2. Access via Managers → ⚛ Agent Manager. The Agent Manager ships as two files: agent-manager.js (core) and agent-manager-extensions.js (6 extension features). Both must be loaded after inference-manager.js.

Visual Canvas #

Drag-and-drop operator builder with 30+ Flink Agent blocks across 11 groups. Icons follow the same convention as Pipeline Manager: brand icons use Simple Icons CDN (_agSimpleIcon(slug, hex)) and everything else uses clean monochrome inline SVG — no emoji anywhere in the operator catalogue.

Canvas Controls

• Drag operators from the palette — palette search box filters by label and operator ID
• ✏ edit button on every node card (identical to Pipeline Manager) — opens a draggable config modal positioned beside the node
• Drag output port (right edge) → input port (left edge) to connect nodes
• Scroll to zoom (0.12× – 3×), drag canvas background to pan, ⊙ Fit to auto-centre
• ⤢ expand-to-fullscreen / ⤡ restore — mirrors _plmToggleFullscreen() from Pipeline Manager
• ▶ Simulate Flow — animated particles flow along gradient edges showing agent data paths
• Delete selected node with Delete / Backspace; Escape cancels in-progress connections

Guided Wizard (9 Steps) #

A step-by-step dialog covering every Flink Agents 0.2 concept. Steps can be navigated by clicking the step numbers in the sidebar. Each step validates required fields before allowing progression.

Kafka + Schema Registry Source #

When Kafka + Schema Registry is selected in Step 2, an additional card appears with full Schema Registry integration — mirroring the Feature Engineering Manager's pattern.

• ⟳ Load Subjects — fetches all subjects from /subjects on the Schema Registry REST API. Uses jmApi proxy if available (avoids CORS), falls back to direct fetch. Populates a subject dropdown.
• ↓ Load Schema — fetches /subjects/{name}/versions/latest, runs _agAvroToDDL() to convert Avro field types to Flink SQL DDL types with full logical type support:

Loaded fields populate both the schema tag pills (live visual display) and the schema textarea. The tag pills also update as you type in the textarea. Schema format is auto-set to avro-confluent when SR is selected.

Code Generation — 7 Artefacts #

Click ⟨/⟩ Generated Code tab to access 8 code output types, switchable from a left sidebar. SQL inserts into the Studio editor with one click.

Observability Tab — Live Kafka Event Log #

The Observability tab connects directly to your agent event log Kafka topic via the Flink SQL Gateway session. No simulation or fake data — all events come from your real Kafka topic.

Extension Features (agent-manager-extensions.js) #

Six additional features are bundled in agent-manager-extensions.js. Load this file after agent-manager.js. The four extra tabs are injected into the tab bar automatically at runtime.

Agent Templates (6)

Installation

Copy<script src="js/agent-manager.js"></script>
<script src="js/agent-manager-extensions.js"></script>

Copy<option value="agent-manager">⚛ Agent Manager</option>

Copycase 'agent-manager':
  if (typeof openAgentManager === 'function') openAgentManager();
  break;

Flink Agents 0.2 Feature Coverage

Observability and Diagnostics v0.0.22 #

Six diagnostic tools accessible from the editor toolbar. Each opens as a modal with full interactive controls.

Admin Session #

The Admin Session mode provides a privileged view of the entire Flink cluster across all users and sessions. Select Admin mode on the connect screen and enter the admin passcode.

Connector JARs #

Copy./scripts/download-connectors.sh
# Override version:
./scripts/download-connectors.sh --flink-version 1.19.1

Copy.\scripts\download-connectors.ps1
# Override:
.\scripts\download-connectors.ps1 -FlinkVersion 1.19.1

CopyFROM flink:2.2.0-scala_2.12-java11
COPY ./connectors/*.jar /opt/flink/lib/
# Also copy Flink Agents JAR for Agent Manager:
COPY ./agents/flink-agents-java-0.2.0.jar /opt/flink/lib/

Str:::lab Studio Kube Operator #

Manages Studio deployments as first-class Kubernetes CRDs. Deploy and lifecycle-manage Studio instances with a single kubectl apply. Repository: github.com/coded-streams/strlabstudio-operator

Copyhelm repo add strlabstudio https://coded-streams.github.io/strlabstudio-operator/charts
helm repo update
helm install strlabstudio-operator strlabstudio/strlabstudio-operator \
  --namespace flinksql-system --create-namespace

CopyapiVersion: codedstreams.io/v1alpha1
kind: StrlabStudio
metadata:
  name: dev-studio
  namespace: flink
spec:
  gateway:
    host: flink-sql-gateway
    port: 8083
  jobmanager:
    host: flink-jobmanager
    port: 8081

CopyapiVersion: codedstreams.io/v1alpha1
kind: StrlabStudio
metadata:
  name: prod-studio
  namespace: flink
spec:
  image: codedstreams/strlabstudio:v0.0.26
  replicas: 2
  gateway:
    host: flink-sql-gateway
    port: 8083
  jobmanager:
    host: flink-jobmanager
    port: 8081
  service:
    type: LoadBalancer
    port: 80
  resources:
    requests: {cpu: "100m", memory: "128Mi"}
    limits:   {cpu: "500m", memory: "256Mi"}

Deploy Options #

Flink Compatibility #

Changelog #