| name | add-block |
| description | Create or update a Sim integration block with correct subBlocks, conditions, dependsOn, modes, canonicalParamId usage, outputs, and tool wiring. Use when working on `apps/sim/blocks/blocks/{service}.ts` or aligning a block with its tools. |
Add Block Skill
You are an expert at creating block configurations for Sim. You understand the serializer, subBlock types, conditions, dependsOn, modes, and all UI patterns.
Your Task
When the user asks you to create a block:
- Create the block file in
apps/sim/blocks/blocks/{service}.ts
- Configure all subBlocks with proper types, conditions, and dependencies
- Wire up tools correctly
Hard Rule: No Guessed Tool Outputs
Blocks depend on tool outputs. If the underlying tool response schema is not documented or live-verified, you MUST tell the user instead of guessing block outputs.
- Do NOT invent block outputs for undocumented tool responses
- Do NOT describe unknown JSON shapes as if they were confirmed
- Do NOT wire fields into the block just because they seem likely to exist
If the tool outputs are not known, do one of these instead:
- Ask the user for sample tool responses
- Ask the user for test credentials so the tool responses can be verified
- Limit the block to operations whose outputs are documented
- Leave uncertain outputs out and explicitly tell the user what remains unknown
Block Configuration Structure
import { {ServiceName}Icon } from '@/components/icons'
import type { BlockConfig } from '@/blocks/types'
import { AuthMode, IntegrationType } from '@/blocks/types'
import { getScopesForService } from '@/lib/oauth/utils'
export const {ServiceName}Block: BlockConfig = {
type: '{service}',
name: '{Service Name}',
description: 'Brief description',
longDescription: 'Detailed description for docs',
docsLink: 'https://docs.sim.ai/tools/{service}',
category: 'tools',
integrationType: IntegrationType.X,
tags: ['oauth', 'api'],
bgColor: '#HEXCOLOR',
icon: {ServiceName}Icon,
authMode: AuthMode.OAuth,
subBlocks: [
],
tools: {
access: ['tool_id_1', 'tool_id_2'],
config: {
tool: (params) => `{service}_${params.operation}`,
params: (params) => ({
}),
},
},
inputs: {
},
outputs: {
},
}
SubBlock Types Reference
Critical: Every subblock id must be unique within the block. Duplicate IDs cause conflicts even with different conditions.
Text Inputs
{ id: 'field', title: 'Label', type: 'short-input', placeholder: '...' }
{ id: 'field', title: 'Label', type: 'long-input', placeholder: '...', rows: 6 }
{ id: 'apiKey', title: 'API Key', type: 'short-input', password: true }
Selection Inputs
{
id: 'operation',
title: 'Operation',
type: 'dropdown',
options: [
{ label: 'Create', id: 'create' },
{ label: 'Update', id: 'update' },
],
value: () => 'create',
}
{
id: 'field',
title: 'Label',
type: 'combobox',
options: [...],
searchable: true,
}
Code/JSON Inputs
{
id: 'code',
title: 'Code',
type: 'code',
language: 'javascript',
placeholder: '// Enter code...',
}
OAuth/Credentials
{
id: 'credential',
title: 'Account',
type: 'oauth-input',
serviceId: '{service}',
requiredScopes: getScopesForService('{service}'),
placeholder: 'Select account',
required: true,
}
Scopes: Always use getScopesForService(serviceId) from @/lib/oauth/utils for requiredScopes. Never hardcode scope arrays — the single source of truth is OAUTH_PROVIDERS in lib/oauth/oauth.ts.
Scope descriptions: When adding a new OAuth provider, also add human-readable descriptions for all scopes in SCOPE_DESCRIPTIONS within lib/oauth/utils.ts.
Selectors (with dynamic options)
{
id: 'channel',
title: 'Channel',
type: 'channel-selector',
serviceId: '{service}',
placeholder: 'Select channel',
dependsOn: ['credential'],
}
{
id: 'project',
title: 'Project',
type: 'project-selector',
serviceId: '{service}',
dependsOn: ['credential'],
}
{
id: 'file',
title: 'File',
type: 'file-selector',
serviceId: '{service}',
mimeType: 'application/pdf',
dependsOn: ['credential'],
}
{
id: 'user',
title: 'User',
type: 'user-selector',
serviceId: '{service}',
dependsOn: ['credential'],
}
Other Types
{ id: 'enabled', type: 'switch' }
{ id: 'temperature', title: 'Temperature', type: 'slider', min: 0, max: 2, step: 0.1 }
{ id: 'headers', title: 'Headers', type: 'table', columns: ['Key', 'Value'] }
{
id: 'files',
title: 'Attachments',
type: 'file-upload',
multiple: true,
acceptedTypes: 'image/*,application/pdf',
}
File Input Handling
When your block accepts file uploads, use the basic/advanced mode pattern with normalizeFileInput.
Basic/Advanced File Pattern
{
id: 'uploadFile',
title: 'File',
type: 'file-upload',
canonicalParamId: 'file',
placeholder: 'Upload file',
mode: 'basic',
multiple: false,
required: true,
condition: { field: 'operation', value: 'upload' },
},
{
id: 'fileRef',
title: 'File',
type: 'short-input',
canonicalParamId: 'file',
placeholder: 'Reference file (e.g., {{file_block.output}})',
mode: 'advanced',
required: true,
condition: { field: 'operation', value: 'upload' },
},
Critical constraints:
canonicalParamId must NOT match any subblock's id in the same block
- Values are stored under subblock
id, not canonicalParamId
Normalizing File Input in tools.config
Use normalizeFileInput to handle all input variants:
import { normalizeFileInput } from '@/blocks/utils'
tools: {
access: ['service_upload'],
config: {
tool: (params) => {
const normalizedFile = normalizeFileInput(
params.uploadFile || params.fileRef || params.fileContent,
{ single: true }
)
if (normalizedFile) {
params.file = normalizedFile
}
return `service_${params.operation}`
},
},
}
Why this pattern?
- Values come through as
params.uploadFile or params.fileRef (the subblock IDs)
canonicalParamId only controls UI/schema mapping, not runtime values
normalizeFileInput handles JSON strings from advanced mode template resolution
File Input Types in inputs
Use type: 'json' for file inputs:
inputs: {
uploadFile: { type: 'json', description: 'Uploaded file (UserFile)' },
fileRef: { type: 'json', description: 'File reference from previous block' },
fileContent: { type: 'string', description: 'Legacy: base64 encoded content' },
}
Multiple Files
For multiple file uploads:
{
id: 'attachments',
title: 'Attachments',
type: 'file-upload',
multiple: true,
maxSize: 25,
acceptedTypes: 'image/*,application/pdf,.doc,.docx',
}
const normalizedFiles = normalizeFileInput(
params.attachments || params.attachmentRefs,
)
if (normalizedFiles) {
params.files = normalizedFiles
}
Condition Syntax
Controls when a field is shown based on other field values.
Simple Condition
condition: { field: 'operation', value: 'create' }
Multiple Values (OR)
condition: { field: 'operation', value: ['create', 'update'] }
Negation
condition: { field: 'operation', value: 'delete', not: true }
Compound (AND)
condition: {
field: 'operation',
value: 'send',
and: {
field: 'type',
value: 'dm',
not: true,
}
}
Complex Example
condition: {
field: 'operation',
value: ['list', 'search'],
not: true,
and: {
field: 'authMethod',
value: 'oauth',
}
}
DependsOn Pattern
Controls when a field is enabled and when its options are refetched.
Simple Array (all must be set)
dependsOn: ['credential']
dependsOn: ['credential', 'projectId']
Complex (all + any)
dependsOn: {
all: ['authMethod'],
any: ['credential', 'apiKey']
}
Required Pattern
Can be boolean or condition-based.
Simple Boolean
required: true
required: false
Conditional Required
required: { field: 'operation', value: 'create' }
required: { field: 'operation', value: ['create', 'update'] }
Mode Pattern (Basic vs Advanced)
Controls which UI view shows the field.
Mode Options
'basic' - Only in basic view (default UI)
'advanced' - Only in advanced view
'both' - Both views (default if not specified)
'trigger' - Only in trigger configuration
canonicalParamId Pattern
Maps multiple UI fields to a single serialized parameter:
{
id: 'channel',
title: 'Channel',
type: 'channel-selector',
mode: 'basic',
canonicalParamId: 'channel',
dependsOn: ['credential'],
}
{
id: 'channelId',
title: 'Channel ID',
type: 'short-input',
mode: 'advanced',
canonicalParamId: 'channel',
placeholder: 'Enter channel ID manually',
}
How it works:
- In basic mode:
channel selector value → params.channel
- In advanced mode:
channelId input value → params.channel
- The serializer consolidates based on current mode
Critical constraints:
canonicalParamId must NOT match any other subblock's id in the same block (causes conflicts)
canonicalParamId must be unique per block (only one basic/advanced pair per canonicalParamId)
- ONLY use
canonicalParamId to link basic/advanced mode alternatives for the same logical parameter
- Do NOT use it for any other purpose
WandConfig Pattern
Enables AI-assisted field generation.
{
id: 'query',
title: 'Query',
type: 'code',
language: 'json',
wandConfig: {
enabled: true,
prompt: 'Generate a query based on the user request. Return ONLY the JSON.',
placeholder: 'Describe what you want to query...',
generationType: 'json-object',
maintainHistory: true,
},
}
Generation Types
'javascript-function-body' - JS code generation
'json-object' - Raw JSON (adds "no markdown" instruction)
'json-schema' - JSON Schema definitions
'sql-query' - SQL statements
'timestamp' - Adds current date/time context
Tools Configuration
Important: tools.config.tool runs during serialization before variable resolution. Put Number() and other type coercions in tools.config.params instead, which runs at execution time after variables are resolved.
Preferred: Use tool names directly as dropdown option IDs to avoid switch cases:
options: [
{ label: 'Create', id: 'service_create' },
{ label: 'Read', id: 'service_read' },
]
tool: (params) => params.operation,
With Parameter Transformation
tools: {
access: ['service_action'],
config: {
tool: (params) => 'service_action',
params: (params) => ({
id: params.resourceId,
data: typeof params.data === 'string' ? JSON.parse(params.data) : params.data,
}),
},
}
V2 Versioned Tool Selector
import { createVersionedToolSelector } from '@/blocks/utils'
tools: {
access: [
'service_create_v2',
'service_read_v2',
'service_update_v2',
],
config: {
tool: createVersionedToolSelector({
baseToolSelector: (params) => `service_${params.operation}`,
suffix: '_v2',
fallbackToolId: 'service_create_v2',
}),
},
}
Outputs Definition
IMPORTANT: Block outputs have a simpler schema than tool outputs. Block outputs do NOT support:
optional: true - This is only for tool outputs
items property - This is only for tool outputs with array types
Block outputs only support:
type - The data type ('string', 'number', 'boolean', 'json', 'array')
description - Human readable description
- Nested object structure (for complex types)
outputs: {
id: { type: 'string', description: 'Resource ID' },
success: { type: 'boolean', description: 'Whether operation succeeded' },
items: { type: 'json', description: 'List of items' },
metadata: { type: 'json', description: 'Response metadata' },
user: {
id: { type: 'string', description: 'User ID' },
name: { type: 'string', description: 'User name' },
email: { type: 'string', description: 'User email' },
},
}
Typed JSON Outputs
When using type: 'json' and you know the object shape in advance, describe the inner fields in the description so downstream blocks know what properties are available. For well-known, stable objects, use nested output definitions instead:
outputs: {
plan: { type: 'json', description: 'Zone plan information' },
plan: {
type: 'json',
description: 'Zone plan information (id, name, price, currency, frequency, is_subscribed)',
},
plan: {
id: { type: 'string', description: 'Plan identifier' },
name: { type: 'string', description: 'Plan name' },
price: { type: 'number', description: 'Plan price' },
currency: { type: 'string', description: 'Price currency' },
},
}
Use the nested pattern when:
- The object has a small, stable set of fields (< 10)
- Downstream blocks will commonly access specific properties
- The API response shape is well-documented and unlikely to change
Use type: 'json' with a descriptive string when:
- The object has many fields or a dynamic shape
- It represents a list/array of items
- The shape varies by operation
If the output shape is unknown because the underlying tool response is undocumented, you MUST tell the user and stop. Unknown is not the same as variable. Never guess block outputs.
V2 Block Pattern
When creating V2 blocks (alongside legacy V1):
export const ServiceBlock: BlockConfig = {
type: 'service',
name: 'Service (Legacy)',
hideFromToolbar: true,
}
export const ServiceV2Block: BlockConfig = {
type: 'service_v2',
name: 'Service',
hideFromToolbar: false,
subBlocks: ServiceBlock.subBlocks,
tools: {
access: ServiceBlock.tools?.access?.map(id => `${id}_v2`) || [],
config: {
tool: createVersionedToolSelector({
baseToolSelector: (params) => (ServiceBlock.tools?.config as any)?.tool(params),
suffix: '_v2',
fallbackToolId: 'service_default_v2',
}),
params: ServiceBlock.tools?.config?.params,
},
},
outputs: {
},
}
Block Metadata (BlockMeta)
Every integration block must export a {Service}BlockMeta object at the bottom of the block file. This metadata drives the integration catalog, tag filters, and workflow template suggestions shown to users.
Structure
import type { BlockConfig, BlockMeta } from '@/blocks/types'
export const {Service}BlockMeta = {
tags: ['messaging', 'automation'],
templates: [
{
icon: {Service}Icon,
title: '{Service} use-case title',
prompt: 'Build a workflow that ...',
modules: ['agent', 'workflows'],
category: 'productivity',
tags: ['automation'],
alsoIntegrations: ['slack'],
},
],
skills: [
{
name: 'summarize-thread',
description: 'One line: what it does and when to use it.',
content:
'# Summarize Thread\n\n...\n\n## Steps\n1. ...\n\n## Output\n...',
},
],
} as const satisfies BlockMeta
Rules
- Import
BlockMeta from @/blocks/types alongside BlockConfig
tags must match the tags array on the block config exactly
- Templates are optional but should be added for any integration that has a recognizable use case — aim for 2–4 templates per block
- Template
prompt should start with "Build a workflow that..." or "Create a workflow that..." and be concrete enough to generate a real workflow in Mothership
- Template
modules lists the Sim modules the template relies on: 'knowledge-base' | 'tables' | 'files' | 'workflows' | 'scheduled' | 'agent'
- Template
category is one of: 'popular' | 'sales' | 'support' | 'engineering' | 'marketing' | 'productivity' | 'operations'
alsoIntegrations names other block types (e.g. 'slack', 'linear') referenced in the template prompt — helps the catalog surface this template when those blocks are selected
- Place the export after the main
{Service}Block export, at the very bottom of the file
skills — curated, ready-to-add agent skills
skills is an optional array of SuggestedSkill ({ name, description, content }) shown on the integration's detail page; users click Add to create the skill in their workspace. Aim for 3–5 skills for mainstream services, 2–3 for niche/low-level ones.
name — kebab-case, lowercase letters/numbers/hyphens, ≤ 64 chars, unique within the integration, verb-led (e.g. summarize-thread).
description — one line, ≤ 1024 chars: what it does and when to use it.
content — markdown instructions for the agent (literal \n for newlines): a # Title, then ## Steps and an output/guidance section. Keep ~600–2000 chars.
- Ground every skill in operations the block actually exposes. Cross-check each skill's steps against the block's
tools.access list — never describe an action the integration cannot perform (e.g. "receive messages" when the block only sends).
- Skills MUST be derived from real, popular use cases found online — never invented. Before adding a skill, web-search the service's documented use cases (vendor use-case/solutions pages, official docs describing the workflow, reputable "top automations for X" articles). If you cannot source a use case as something people genuinely do with the service, do not add it. Do not hallucinate skills.
Register in the blocksMeta object
After adding {Service}BlockMeta to the block file, register it in apps/sim/blocks/registry.ts:
import { ServiceBlock, ServiceBlockMeta } from '@/blocks/blocks/service'
export const blocksMeta = {
service: ServiceBlockMeta,
}
Registering Blocks
After creating the block, remind the user to:
- Import
{Service}Block and {Service}BlockMeta in apps/sim/blocks/registry.ts
- Add to the
registry object (alphabetically):
- Add to the
blocksMeta object (alphabetically):
import { ServiceBlock, ServiceBlockMeta } from '@/blocks/blocks/service'
export const registry: Record<string, BlockConfig> = {
service: ServiceBlock,
}
export const blocksMeta = {
service: ServiceBlockMeta,
}
Complete Example
import { ServiceIcon } from '@/components/icons'
import type { BlockConfig } from '@/blocks/types'
import { AuthMode, IntegrationType } from '@/blocks/types'
import { getScopesForService } from '@/lib/oauth/utils'
export const ServiceBlock: BlockConfig = {
type: 'service',
name: 'Service',
description: 'Integrate with Service API',
longDescription: 'Full description for documentation...',
docsLink: 'https://docs.sim.ai/tools/service',
category: 'tools',
integrationType: IntegrationType.DeveloperTools,
tags: ['oauth', 'api'],
bgColor: '#FF6B6B',
icon: ServiceIcon,
authMode: AuthMode.OAuth,
subBlocks: [
{
id: 'operation',
title: 'Operation',
type: 'dropdown',
options: [
{ label: 'Create', id: 'create' },
{ label: 'Read', id: 'read' },
{ label: 'Update', id: 'update' },
{ label: 'Delete', id: 'delete' },
],
value: () => 'create',
},
{
id: 'credential',
title: 'Service Account',
type: 'oauth-input',
serviceId: 'service',
requiredScopes: getScopesForService('service'),
placeholder: 'Select account',
required: true,
},
{
id: 'resourceId',
title: 'Resource ID',
type: 'short-input',
placeholder: 'Enter resource ID',
condition: { field: 'operation', value: ['read', 'update', 'delete'] },
required: { field: 'operation', value: ['read', 'update', 'delete'] },
},
{
id: 'name',
title: 'Name',
type: 'short-input',
placeholder: 'Resource name',
condition: { field: 'operation', value: ['create', 'update'] },
required: { field: 'operation', value: 'create' },
},
],
tools: {
access: ['service_create', 'service_read', 'service_update', 'service_delete'],
config: {
tool: (params) => `service_${params.operation}`,
},
},
outputs: {
id: { type: 'string', description: 'Resource ID' },
name: { type: 'string', description: 'Resource name' },
createdAt: { type: 'string', description: 'Creation timestamp' },
},
}
Connecting Blocks with Triggers
If the service supports webhooks, connect the block to its triggers.
import { getTrigger } from '@/triggers'
export const ServiceBlock: BlockConfig = {
triggers: {
enabled: true,
available: ['service_event_a', 'service_event_b', 'service_webhook'],
},
subBlocks: [
{ id: 'operation', },
...getTrigger('service_event_a').subBlocks,
...getTrigger('service_event_b').subBlocks,
...getTrigger('service_webhook').subBlocks,
],
}
See the /add-trigger skill for creating triggers.
Icon Requirement
If the icon doesn't already exist in @/components/icons.tsx, do NOT search for it yourself. After completing the block, ask the user to provide the SVG:
The block is complete, but I need an icon for {Service}.
Please provide the SVG and I'll convert it to a React component.
You can usually find this in the service's brand/press kit page, or copy it from their website.
Advanced Mode for Optional Fields
Optional fields that are rarely used should be set to mode: 'advanced' so they don't clutter the basic UI. This includes:
- Pagination tokens
- Time range filters (start/end time)
- Sort order options
- Reply settings
- Rarely used IDs (e.g., reply-to tweet ID, quote tweet ID)
- Max results / limits
{
id: 'startTime',
title: 'Start Time',
type: 'short-input',
placeholder: 'ISO 8601 timestamp',
condition: { field: 'operation', value: ['search', 'list'] },
mode: 'advanced',
}
WandConfig for Complex Inputs
Use wandConfig for fields that are hard to fill out manually, such as timestamps, comma-separated lists, and complex query strings. This gives users an AI-assisted input experience.
{
id: 'startTime',
title: 'Start Time',
type: 'short-input',
mode: 'advanced',
wandConfig: {
enabled: true,
prompt: 'Generate an ISO 8601 timestamp based on the user description. Return ONLY the timestamp string.',
generationType: 'timestamp',
},
}
{
id: 'mediaIds',
title: 'Media IDs',
type: 'short-input',
mode: 'advanced',
wandConfig: {
enabled: true,
prompt: 'Generate a comma-separated list of media IDs. Return ONLY the comma-separated values.',
},
}
Naming Convention
All tool IDs referenced in tools.access and returned by tools.config.tool MUST use snake_case (e.g., x_create_tweet, slack_send_message). Never use camelCase or PascalCase.
Checklist Before Finishing
Final Validation (Required)
After creating the block, you MUST validate it against every tool it references:
- Read every tool definition that appears in
tools.access — do not skip any
- For each tool, verify the block has correct:
- SubBlock inputs that cover all required tool params (with correct
condition to show for that operation)
- SubBlock input types that match the tool param types (e.g., dropdown for enums, short-input for strings)
tools.config.params correctly maps subBlock IDs to tool param names (if they differ)
- Type coercions in
tools.config.params for any params that need conversion (Number(), Boolean(), JSON.parse())
- Verify block outputs cover the key fields returned by all tools
- Verify conditions — each subBlock should only show for the operations that actually use it
- If any tool outputs are still unknown, explicitly tell the user instead of guessing block outputs