Block Configuration UI

Relevant source files

• apps/sim/app/api/workflows/route.ts
• apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
• apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
• apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workspace.ts
• apps/sim/hooks/queries/workflows.ts
• apps/sim/hooks/queries/workspace.ts
• apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts
• apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/manage.ts
• apps/sim/tools/params.test.ts
• apps/sim/tools/params.ts

This document describes the user interface system for configuring workflow blocks. Block configuration UI consists of interactive components (sub-blocks) that allow users to set parameters, manage credentials, define schemas, and configure deployment settings for each block in a workflow.

---

Overview

The Block Configuration UI system renders interactive configuration panels for workflow blocks. Each block type (Agent, Router, Tool, etc.) defines a set of sub-blocks — individual configuration fields like text inputs, dropdowns, code editors, or credential selectors. These sub-blocks are displayed both:

1. On Canvas: As compact preview rows in WorkflowBlock showing current values.
2. In Panel: As full editing controls in the right-side Editor panel.

The system handles value persistence via useSubBlockValue, real-time synchronization, and specialized input types for complex data structures like Knowledge Base filters or Variable assignments.

Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value.ts:1-25, apps/sim/blocks/types.ts1-435

---

Architecture Overview

Diagram: Block Configuration UI Architecture

The system has three main layers:

1. Definition: Block registry defines available sub-blocks for each block type.
2. Rendering: UI components like VariablesInput apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx:78-84 or FieldFormat apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx:92-105 display specialized controls.
3. State: useSubBlockStore manages current values, while useSubBlockInput apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input.ts:1-20 provides helpers for field-level state and tag selection.

Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input.ts:1-20, apps/sim/stores/workflows/subblock/store.ts1-100 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx:87-89

---

Tool Parameter Rendering

The ToolInput component is the primary interface for configuring tool-based blocks. It dynamically renders parameters based on the tool's definition and visibility rules.

Parameter Visibility & Resolution

Parameters are filtered and displayed based on their visibility attribute (e.g., user-only, user-or-llm, hidden) apps/sim/tools/params.ts136-154

• Dynamic UI: getToolParametersConfig resolves UI component configurations (like short-input, dropdown, or credential-selector) from the block registry for each tool parameter apps/sim/tools/params.ts221-232
• Canonical Modes: The UI handles "canonical pairs" (e.g., choosing between a hardcoded ID or a dynamic variable) using resolveCanonicalMode and buildCanonicalIndex apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:97-115.

Specialized Tool Inputs

• Credential Selector: For tools requiring OAuth or API keys, the ToolCredentialSelector renders a dropdown of existing credentials or a "Connect" button for new OAuth flows apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:39-39.
• Workflow Executor: A special case where the UI must fetch the target workflow's state using useWorkflowState to render an inputMapping UI apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:121-135.
• MCP Tools: Tools provided via the Model Context Protocol (MCP) include validation logic to check if the server is online or if parameters match the schema apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:20-25.

Sources: apps/sim/tools/params.ts221-232 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:121-180, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx:1-50

---

Dynamic Parameter & Input Rendering

The UI supports a variety of specialized input components tailored for different block functionalities.

Workflow Input Mapping

The InputMapping component allows users to map data from the current workflow to the input fields of a selected child workflow.

• Dynamic Extraction: It uses extractInputFieldsFromBlocks to find the trigger block of the target workflow and extract its inputFormat apps/sim/lib/workflows/input-format.ts20-29
• Resolution: It resolves the workflowId from the store or preview context to fetch the target workflow's state via useWorkflowState apps/sim/hooks/queries/workflows.ts57-65

Variable Assignments

The VariablesInput component manages the assignment of workflow variables within a block.

• Type Safety: Supports types like string, number, boolean, json, and file[] apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx:29-29.
• Tag Integration: Integrates with TagDropdown to allow inserting dynamic references (e.g., {{block.output}}) into variable values apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx:187-195.

Sources: apps/sim/lib/workflows/input-format.ts20-77 apps/sim/hooks/queries/workflows.ts57-65 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx:29-29

---

Deployment & Credential Management

The UI manages the transition of workflows into deployed agents or tools, alongside the necessary credentials.

OAuth and Credential Flow

When a tool requires authentication, the UI triggers an OAuth connection flow.

1. Selection: ToolCredentialSelector checks for available credentials for the given serviceId apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx:39-39.
2. Connection: If missing, the user is prompted to connect, which initiates a provider-specific OAuth flow (handled via /api/oauth endpoints).

Deployment Status & Tools

The Copilot and UI can check deployment status using specialized tools:

• executeCheckDeploymentStatus: Queries the database for active API deployments, Chat/Form deployments, and MCP server registrations apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/manage.ts26-45
• executeDeployApi: Performs a full deployment of the workflow, returning a public API endpoint apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts21-65

Diagram: Deployment and Credential Entity Interaction

Sources: apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/manage.ts26-115 apps/sim/lib/copilot/orchestrator/tool-executor/deployment-tools/deploy.ts21-69 apps/sim/hooks/queries/workflows.ts57-65

---

Block Interaction & Context Menus

The BlockMenu component provides a context-sensitive menu for blocks on the canvas.

Context Actions

• Lifecycle: Copy, Paste, Duplicate, and Delete apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:157-186.
• Execution: "Run from Block" and "Run until Block" (when available via snapshots) apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:85-86.
• Protection: Admin-only "Lock/Unlock" functionality to prevent unauthorized edits to specific blocks apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:225-235.

Permissions & State

The menu dynamically disables items based on user permissions (userCanEdit), block state (locked), or parent status (isParentLocked, isParentDisabled) apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:99-106.

Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:70-135, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx:191-202