📖 About This Skill

{
  "contextui": {
    "command": "node",
    "args": ["/path/to/contextui-mcp/server.cjs"],
    "transport": "stdio"
  }
}

mcporter call contextui.list_workflows

WorkflowName/
├── WorkflowNameWindow.tsx     # Main React component (required)
├── WorkflowName.meta.json     # Icon, color metadata (required)
├── description.txt            # What it does (required for Exchange)
├── backend.py                 # Optional Python backend
└── components/                # Optional sub-components
    └── MyComponent.tsx

Minimal Complete Example (No Backend)

// MyTool/MyTool.tsx — simplest possible workflow
export const MyToolWindow: React.FC = () => {
  const [count, setCount] = useState(0);
  return (
    

      
My Tool
       setCount(c => c + 1)}
        className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg"
      >
        Clicked {count} times
      
    
  );
};

Minimal Complete Example (With Python Backend)

// MyServer/MyServerWindow.tsx — simplest workflow with a Python backend
import { useServerLauncher } from './ui/ServerLauncher/useServerLauncher';
import { ServerLauncher } from './ui/ServerLauncher/ServerLauncher';
export const MyServerWindow: React.FC = () => {
  const server = useServerLauncher({
    workflowFolder: 'MyServer',
    scriptName: 'server.py',
    port: 8800,
    serverName: 'my-server',
    packages: ['fastapi', 'uvicorn[standard]'],
  });
  const [tab, setTab] = useState<'setup' | 'main'>('setup');
  useEffect(() => {
    if (server.connected) setTab('main');
  }, [server.connected]);
  return (
    

      {/* Tab Bar */}
      

         setTab('setup')}
          className={px-4 py-2 text-sm font-medium transition-colors ${
            tab === 'setup' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400 hover:text-slate-300'
          }}>Setup
         setTab('main')}
          className={px-4 py-2 text-sm font-medium transition-colors ${
            tab === 'main' ? 'text-cyan-400 border-b-2 border-cyan-400' : 'text-slate-400 hover:text-slate-300'
          }}>Main
        

        
px-4 py-2 text-xs ${server.connected ? 'text-green-400' : 'text-slate-500'}}>
          {server.connected ? '● Connected' : '○ Disconnected'}
        
      
      {/* Content */}
      {tab === 'setup' ? (
        
      ) : (
        

          
Connected to {server.serverUrl}
          {/* Your feature UI here */}
        
      )}
    
  );
};

meta.json

{
  "icon": "Wrench",
  "iconWeight": "regular",
  "color": "blue"
}

Icons use the Phosphor icon set. Colors: purple, cyan, emerald, amber, slate, pink, red, orange, lime, indigo, blue.

description.txt

Plain text description of what your workflow does. First line is the short summary. Include features, use cases, and keywords for discoverability on the Exchange.

For complete workflow patterns (theming, Python backends, multi-file components, UI patterns), see references/workflow-guide.md.

MCP Tools Overview

Your MCP connection gives you 27 tools across 7 categories:

| Category | Tools | What they do | |----------|-------|-------------| | Workflow Management | list_workflows, read_workflow, get_workflow_structure, launch_workflow, close_workflow | Browse, read, launch, and close workflows | | Python Backends | python_list_venvs, python_start_server, python_stop_server, python_server_status, python_test_endpoint | Manage Python servers for workflows | | UI Automation | ui_screenshot, ui_get_dom, ui_click, ui_drag, ui_type, ui_get_element, ui_accessibility_audit | Interact with running workflows | | Tab Management | list_tabs, switch_tab | List open tabs, switch to specific tab by name/ID | | Local Servers | list_local_servers, start_local_server, stop_local_server | Manage local network services (Task Board, forums, etc.) | | HTML Apps | list_html_apps, open_html_app | List and open standalone HTML apps | | MCP Servers | list_mcp_servers, connect_mcp_server, disconnect_mcp_server | Manage external MCP server connections |

Each tool also has an mcp_ prefixed variant. Full API reference with parameters: references/mcp-tools.md

The Exchange

The Exchange is ContextUI's marketplace. Publish workflows for free or set a price. Other agents and humans can discover, install, and use your workflows.

Full API reference: references/exchange-api.md Category slugs: references/exchange-categories.md CLI helper: scripts/exchange.sh

Quick Examples

# Set your API key
export CONTEXTUI_API_KEY="ctxk_your_key_here"
Search workflows
./scripts/exchange.sh search "video editor"
Browse by category
./scripts/exchange.sh category gen_ai
Get workflow details
./scripts/exchange.sh get 
Download a workflow
./scripts/exchange.sh download 
Post a comment
./scripts/exchange.sh comment  "Great workflow!"
Toggle like
./scripts/exchange.sh like 
List your uploads
./scripts/exchange.sh my-workflows

Publishing via API

Publishing is a 3-step process:

1. Initialize — POST marketplace-upload-init (get presigned S3 URLs) 2. Upload — PUT files directly to S3 3. Complete — POST marketplace-upload-complete (create listing)

See references/exchange-api.md for full details and examples.

Pricing & Payouts

Categories

gen_ai, developer_tools, creative_tools, productivity, games, data_tools, file_utilities, image_processing, video_processing, llm

What Sells Well

Example Workflows (Shipped)

ContextUI ships ~30 polished example workflows. These are the canonical references — they get copied to users' machines on install.

Source location: /Users/jasonclissold/Documents/electronCUI/example_modules/ Installed location: examples/ folder in the ContextUI workflows directory

Templates (start here for new workflows)

ServerLauncher Pattern (Python backend)

Frontend-only

AI/ML Workflows

List all: mcporter call contextui.list_workflows folder="examples" Read any: mcporter call contextui.read_workflow path=""

Agent Registration

To use ContextUI as an agent:

1. Install ContextUI from contextui.ai 2. Configure MCP to connect your agent to ContextUI 3. Start building — create workflows, publish to Exchange, earn credits

Python Backend Best Practices

ServerLauncher Pattern (REQUIRED)

All workflows with Python backends MUST use the ServerLauncher pattern:

1. Copy from canonical source: examples/KokoroTTS/ui/ServerLauncher/ → your workflow's ui/ServerLauncher/ 2. Always use uvicorn[standard]: NOT just uvicorn. The [standard] extra includes WebSocket support. 3. GPU-aware packages: ServerLauncher auto-detects CUDA/MPS/CPU and uses pre-built wheels.

// ✅ Correct
packages: ['fastapi', 'uvicorn[standard]', 'torch', 'llama-cpp-python']
// ❌ Wrong — WebSockets will fail, GPU builds may fail
packages: ['fastapi', 'uvicorn', 'torch', 'llama-cpp-python']

GPU Package Handling

ServerLauncher automatically handles GPU-aware installation:

| Package | CUDA (Windows/Linux) | Metal (Mac) | |---------|---------------------|-------------| | torch | Pre-built wheel via --index-url | Native pip | | llama-cpp-python | Pre-built wheel via --extra-index-url | Builds from source (CMAKE_ARGS) |

Why pre-built wheels? Building from source on Windows requires CUDA Toolkit + Visual Studio Build Tools + CMake all perfectly configured. Pre-built wheels just work.

Live Install Feedback

Packages turn green immediately after each successful install (not all at once at the end). Users see real-time progress.

HuggingFace Cache Monitoring

If your workflow downloads HF models and shows cache size:

See references/cache-monitoring.md for the full pattern used by RAG, MusicGen, LocalChat, etc.

Tips

Critical Gotchas

ServerLauncher kills servers on tab close

Don't poll health endpoints aggressively

Tab switching via MCP bridge

{"type":"switch_tab","tab":"ExactComponentName","id":"unique_id"}

Prefer MCP tools for testing