This is the moment your technical AI workflow becomes accessible to everyone. Playground UIs transform your sophisticated ComfyUI creations into polished, user-friendly interfaces that anyone can use—no technical knowledge required.
The “aha” moment: Watch non-technical team members, clients, or stakeholders use your complex AI workflows as easily as filling out a web form. What took you hours to perfect in ComfyUI now takes them seconds to use effectively.
Automatic Magic: Every workflow you deploy instantly generates its own playground. No additional configuration, no UI development, no user training required. Your ComfyUI logic becomes a professional web application automatically.

Sharing Your AI Innovation

Ready to see your workflow in action through fresh eyes? Opening a playground transforms the experience from “let me show you how this works” to “try it yourself and see what you can create.”

Opening Your User-Friendly Interface

1

Navigate to API Server

Go to the API Server section of your project from the main navigation
2

Find Your Deployed Workflow

Locate the workflow you want to test in the Deployed Workflows list
3

Expand Workflow Details

Click to expand the workflow entry to reveal additional options and information
4

Open Playground

Click the “Open Playground” button to launch the playground interface in a new tab
API server management page with Open Playground button highlighted, showing workflow deployment status and playground access controls

Playground Interface

Interface Design: Complexity Hidden, Power Preserved

Here’s where thoughtful design shines: Your playground presents a clean, intuitive interface that hides all the ComfyUI complexity while preserving every bit of your workflow’s creative power.
Design philosophy: Users see only what they need to control, in language they understand, with guardrails that prevent mistakes. Your sophisticated AI logic becomes as approachable as any consumer web application.
Input Controls
  • Parameter fields based on your workflow configuration
  • Input types match your FlowScale I/O nodes (text fields, sliders, image uploads)
  • Default values pre-filled from your workflow settings
  • Generate button at the bottom to execute the workflow
Playground interface showing optimal two-column layout with input controls on left, output display on right, and clear visual separation between input and result areas

Input Field Types

The input fields in your playground directly correspond to the FlowScale I/O nodes you configured:
Input Node TypePlayground ControlDescription
[FS] InputTextText area/fieldMulti-line or single-line text input
[FS] InputImageFile uploadDrag-and-drop or click to upload images
[FS] InputNumberNumber inputNumeric field with validation
[FS] InputSliderRange sliderInteractive slider with min/max values
💡 Lightbulb Moment: The input fields you see are exactly the parameters you chose to expose when configuring your workflow. This is where your thoughtful I/O design pays off—users see an intuitive interface because you made intentional choices about what to show and what to keep internal.
Interface refinement: If the playground doesn’t feel quite right, you can always refine your workflow I/O configuration to better match your users’ needs. Great interfaces evolve through real user feedback.

GPU Status Monitoring

Understanding GPU States

The top-right corner of every playground displays real-time GPU status information:

Idle

Gray indicator: GPU is ready and waiting for requests. Fastest response time for new generations.

Running

Green indicator: GPU is actively processing your request. Generation in progress.

Cold Starting

Orange indicator: GPU is warming up and loading models. First request after idle period.
Playground header showing GPU status indicator with different operational states

Performance Implications

Using the Playground

Running Your Workflow

1

Configure Inputs

Fill in the required input fields on the left side:
  • Enter text prompts, descriptions, or parameters
  • Upload reference images if your workflow requires them
  • Adjust numeric values and sliders to your preferences
2

Initiate Generation

Click the Generate button at the bottom of the left column to start the workflow
3

Monitor Progress

Watch the GPU status indicator and any progress bars that appear during generation
4

Review Results

Generated outputs appear in the right column as they become available

Generation Process

During generation, you’ll see:
  • Progress indicators showing workflow execution stages
  • GPU status updates reflecting current processing state
  • Partial results appearing as they’re generated (for multi-step workflows)
  • Completion notifications when generation finishes
Generation time varies based on workflow complexity, model size, and current GPU state. Simple text workflows may complete in seconds, while high-resolution image generation can take several minutes.

Sharing and Collaboration

Every playground has a unique, shareable URL that enables team collaboration:

Team Access

Share with colleagues who need to test or use your workflow without ComfyUI knowledge

Client Demos

Present to stakeholders with a clean, professional interface that hides technical complexity

Creative Review

Enable creative teams to experiment with parameters and generate variations

Quality Assurance

Facilitate testing by non-technical team members for validation and feedback

Sharing Best Practices

1

Test Before Sharing

Verify your playground works correctly with various input combinations
2

Document Expected Inputs

Provide guidance on what inputs work best for your specific workflow
3

Set Appropriate Defaults

Configure sensible default values so users can generate results immediately
Security Note: Playground links provide access to your deployed workflow. Only share with trusted team members and consider implementing access controls for sensitive workflows.

Playground Benefits

For Technical Teams

For Non-Technical Users

Integration with Development Workflow

From Playground to Production

1

Prototype in Playground

Use the playground to validate workflow behavior and optimal parameters
2

Document Findings

Record successful parameter combinations and expected outputs
3

Generate API Code

Use the playground results to inform your API integration approach
4

Implement in Application

Translate playground interactions into programmatic API calls using SDKs

API Equivalent

Every playground interaction has a corresponding API call. Use the playground to:
  • Validate request formats before writing API integration code
  • Test error conditions and understand response structures
  • Optimize parameters for your specific use case
  • Generate example requests for API documentation
// Playground interaction
{
  "prompt": "A beautiful sunset over mountains",
  "steps": 25,
  "width": 1024,
  "height": 1024
}

// Equivalent API call
const response = await fetch('/api/v1/workflows/run', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your-api-key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    workflow_id: 'wf_abc123',
    inputs: {
      prompt: "A beautiful sunset over mountains",
      steps: 25,
      width: 1024,
      height: 1024
    }
  })
});

Next Steps