Menü
How the React extension wires into ComfyUI -- entry point, bottom panel, window.app access
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | ui-integration |
| description | How the React extension wires into ComfyUI -- entry point, bottom panel, window.app access |
| version | 0.0.1 |
| license | MIT |
This skill explains how the React frontend registers itself as a ComfyUI extension and integrates with the host application.
ui/src/main.tsxThe entry point handles three responsibilities:
waitForInit() polls for window.app to be available (5-second timeout)window.app.registerExtension() with bottomPanelTabs configurationmountReact(container) creates a React root with StrictMode, TooltipProvider, and Suspensewindow.app.registerExtension({
name: 'comfyui.assistant',
bottomPanelTabs: [
{
id: 'comfyui-assistant',
title: 'Assistant',
type: 'custom',
render: (container) => {
// Creates #comfyui-assistant-root div
// Calls mountReact(rootDiv)
},
destroy: () => {
// Cleanup: unmount React root
}
}
]
})
The tab appears in ComfyUI's bottom panel alongside built-in tabs (Queue, Gallery, etc.).
title property in bottomPanelTabs in main.tsxid property (must be unique across extensions)'custom' with full React rendering; type controls ComfyUI's rendering behaviorwindow.app AccessThe frontend accesses ComfyUI's JavaScript API via window.app:
waitForInit() in main.tsx polls until window.app is availablegetToolContext() provides window.app reference to tool implementationswindow.app.graph for node manipulation (add, remove, connect, query)window.app.graph.setDirtyCanvas(true, true) to trigger re-render after changeswindow.app Methods Used| Method | Purpose |
|---|---|
app.registerExtension() | Register the extension |
app.graph.add() | Add node to graph |
app.graph.remove() | Remove node from graph |
app.graph.getNodeById() | Find node by ID |
app.graph.setDirtyCanvas() | Trigger canvas redraw |
app.graph._nodes | Access node list (read) |
app.queuePrompt() | Queue workflow for execution |
Implemented in useSlashCommands() hook, integrated into the Thread composer:
| Command | Description |
|---|---|
/help | Show available commands and usage tips |
/clear | Reset current thread to initial empty state |
/compact [keep] | Compact context and keep recent messages |
/new | Start a new chat session |
/rename <name> | Rename the current session |
/session <id|index|name> | Switch to a session |
/sessions | List all sessions |
/ in the composer inputuseSlashCommands() hook detects the prefix and shows autocomplete dropdownui/src/App.tsx sets up the runtime stack:
App
└── AppContent
├── AssistantRuntimeProvider (with useChatRuntime + AssistantChatTransport)
└── ChatWithTools
├── useComfyTools() -- registers tools into ModelContext
└── Thread -- renders the chat UI
App checks /api/user-context/status on mount; shows onboarding flow if neededAssistantChatTransport({ api: '/api/chat' }) handles SSE communicationsendAutomaticallyWhen: shouldResubmitAfterToolResult drives the agentic loopIn ui/src/main.tsx, modify the bottomPanelTabs array in registerExtension(). Change title for the name, id for the identifier.
Add more entries to the bottomPanelTabs array in main.tsx, or use ComfyUI's other registration APIs (menu items, sidebar tabs, etc.) in the same registerExtension() call.
Add it to the commands list in the useSlashCommands() hook. Each command needs a name, description, and execute function.
Use the tool context pattern: call getToolContext() which provides window.app reference. All graph manipulation should go through window.app.graph.
assistant-ui -- chat UI components and customizationarchitecture-overview -- where UI integration fits in the systembackend-architecture -- the API endpoints the frontend talks toInstall ComfyUI Assistant as a ComfyUI custom node. Use when performing or troubleshooting installation (clone, Python deps, frontend build, restart).
For complex user requests — evaluate, investigate, ask questions, propose a plan, accept modifications, then execute. Use when the request is multi-step, ambiguous, or high-impact.
Workflow execution and complete workflow generation tools (executeWorkflow, applyWorkflowJson). Use when the user wants to run a workflow or build a complete workflow from a description.
Python backend modules, chat request lifecycle, SSE format, and API endpoints
System prompt assembly from system_context, user_context, and environment sources
Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out.