de en es ja ko ru zh

Webflow

Official

by webflow

Overview Schema Related Servers Score Discussions

TypeScript

Hybrid

Designer Variable Tool

variable_tool

Manage design variables in Webflow sites by creating, updating, and retrieving color, size, number, percentage, and font family variables across collections and modes.

Instructions

Designer Tool - Variable tool to perform actions like create variable, get all variables, update variable

Input Schema

TableJSON Schema

Name	Required	Description	Default
`siteId`	Yes	The ID of the site. DO NOT ASSUME site id. ALWAYS ask user for site id if not already provided or known. use sites_list tool to fetch all sites and then ask user to select one of them.
`actions`	Yes

Implementation Reference

src/tools/deVariable.ts:207-213 (handler)

The handler function for the 'variable_tool' that proxies the input to an RPC call and formats the response.

async ({ siteId, actions }) => {
  try {
    return formatResponse(await variableToolRPCCall(siteId, actions));
  } catch (error) {
    return formatErrorResponse(error);
  }
}

src/tools/deVariable.ts:21-205 (schema)

The Zod input schema defining the structure for siteId and an array of actions like create_variable_collection, get_variables, update_color_variable, etc.

inputSchema: z.object({
  ...SiteIdSchema,
  actions: z.array(
    z.object({
      create_variable_collection: z
        .object({
          name: z
            .string()
            .describe("The name of the variable collection to create"),
        })
        .optional()
        .describe("Create a new variable collection"),
      create_variable_mode: z
        .object({
          variable_collection_id: z
            .string()
            .describe(
              "The id of the variable collection to create the variable mode in"
            ),
          name: z
            .string()
            .describe("The name of the variable mode to create"),
        })
        .optional()
        .describe("Create a new variable mode in a variable collection"),
      get_variable_collections: z
        .object({
          query: z
            .enum(["all", "filtered"])
            .describe("The query to get all variable collections"),
          filter_collections_by_ids: z
            .array(z.string())
            .optional()
            .describe("The ids of the variable collections to filter by"),
        })
        .optional()
        .describe("Get all variable collections and its modes"),
      get_variables: z
        .object({
          variable_collection_id: z
            .string()
            .describe(
              "The id of the variable collection to get the variables from"
            ),
          include_all_modes: z
            .boolean()
            .optional()
            .describe("Whether to include all modes or not"),
          filter_variables_by_ids: z
            .array(z.string())
            .optional()
            .describe("The ids of the variables to filter by"),
        })
        .optional()
        .describe(
          "Get all variables in a variable collection and its modes"
        ),
      create_color_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_name: z.string(),
          value: z.object({
            static_value: z.string().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Create a new color variable"),
      create_size_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_name: z.string(),
          value: z.object({
            static_value: z
              .object({
                value: z.number(),
                unit: z.string(),
              })
              .optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Create a new size variable"),
      create_number_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_name: z.string(),
          value: z.object({
            static_value: z.number().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Create a new number variable"),
      create_percentage_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_name: z.string(),
          value: z.object({
            static_value: z.number().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Create a new percentage variable"),
      create_font_family_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_name: z.string(),
          value: z.object({
            static_value: z.string().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Create a new font family variable"),
      update_color_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_id: z.string(),
          mode_id: z.string().optional(),
          value: z.object({
            static_value: z.string().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Update a color variable"),
      update_size_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_id: z.string(),
          mode_id: z.string().optional(),
          value: z.object({
            static_value: z
              .object({
                value: z.number(),
                unit: z.string(),
              })
              .optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Update a size variable"),
      update_number_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_id: z.string(),
          mode_id: z.string().optional(),
          value: z.object({
            static_value: z.number().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Update a number variable"),
      update_percentage_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_id: z.string(),
          mode_id: z.string().optional(),
          value: z.object({
            static_value: z.number().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Update a percentage variable"),
      update_font_family_variable: z
        .object({
          variable_collection_id: z.string(),
          variable_id: z.string(),
          mode_id: z.string().optional(),
          value: z.object({
            static_value: z.string().optional(),
            existing_variable_id: z.string().optional(),
          }),
        })
        .optional()
        .describe("Update a font family variable"),
    })
  ),
}),

src/tools/deVariable.ts:15-214 (registration)

The MCP server registration of the 'variable_tool' with title, description, input schema, and handler.

server.registerTool(
  "variable_tool",
  {
    title: "Designer Variable Tool",
    description:
      "Designer Tool - Variable tool to perform actions like create variable, get all variables, update variable",
    inputSchema: z.object({
      ...SiteIdSchema,
      actions: z.array(
        z.object({
          create_variable_collection: z
            .object({
              name: z
                .string()
                .describe("The name of the variable collection to create"),
            })
            .optional()
            .describe("Create a new variable collection"),
          create_variable_mode: z
            .object({
              variable_collection_id: z
                .string()
                .describe(
                  "The id of the variable collection to create the variable mode in"
                ),
              name: z
                .string()
                .describe("The name of the variable mode to create"),
            })
            .optional()
            .describe("Create a new variable mode in a variable collection"),
          get_variable_collections: z
            .object({
              query: z
                .enum(["all", "filtered"])
                .describe("The query to get all variable collections"),
              filter_collections_by_ids: z
                .array(z.string())
                .optional()
                .describe("The ids of the variable collections to filter by"),
            })
            .optional()
            .describe("Get all variable collections and its modes"),
          get_variables: z
            .object({
              variable_collection_id: z
                .string()
                .describe(
                  "The id of the variable collection to get the variables from"
                ),
              include_all_modes: z
                .boolean()
                .optional()
                .describe("Whether to include all modes or not"),
              filter_variables_by_ids: z
                .array(z.string())
                .optional()
                .describe("The ids of the variables to filter by"),
            })
            .optional()
            .describe(
              "Get all variables in a variable collection and its modes"
            ),
          create_color_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_name: z.string(),
              value: z.object({
                static_value: z.string().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Create a new color variable"),
          create_size_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_name: z.string(),
              value: z.object({
                static_value: z
                  .object({
                    value: z.number(),
                    unit: z.string(),
                  })
                  .optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Create a new size variable"),
          create_number_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_name: z.string(),
              value: z.object({
                static_value: z.number().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Create a new number variable"),
          create_percentage_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_name: z.string(),
              value: z.object({
                static_value: z.number().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Create a new percentage variable"),
          create_font_family_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_name: z.string(),
              value: z.object({
                static_value: z.string().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Create a new font family variable"),
          update_color_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_id: z.string(),
              mode_id: z.string().optional(),
              value: z.object({
                static_value: z.string().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Update a color variable"),
          update_size_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_id: z.string(),
              mode_id: z.string().optional(),
              value: z.object({
                static_value: z
                  .object({
                    value: z.number(),
                    unit: z.string(),
                  })
                  .optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Update a size variable"),
          update_number_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_id: z.string(),
              mode_id: z.string().optional(),
              value: z.object({
                static_value: z.number().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Update a number variable"),
          update_percentage_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_id: z.string(),
              mode_id: z.string().optional(),
              value: z.object({
                static_value: z.number().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Update a percentage variable"),
          update_font_family_variable: z
            .object({
              variable_collection_id: z.string(),
              variable_id: z.string(),
              mode_id: z.string().optional(),
              value: z.object({
                static_value: z.string().optional(),
                existing_variable_id: z.string().optional(),
              }),
            })
            .optional()
            .describe("Update a font family variable"),
        })
      ),
    }),
  },
  async ({ siteId, actions }) => {
    try {
      return formatResponse(await variableToolRPCCall(siteId, actions));
    } catch (error) {
      return formatErrorResponse(error);
    }
  }
);

src/mcp.ts:65-65 (registration)
Invocation of registerDEVariableTools within registerDesignerTools to register the variable tool among designer tools.
```
registerDEVariableTools(server, rpc);
```
src/tools/index.ts:14-14 (registration)
Export of the registerDEVariableTools function for use in mcp.ts.
```
export { registerDEVariableTools } from "./deVariable";
```

Tool Definition Quality

C2.6/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden but only lists action types without disclosing behavioral traits like permissions needed, mutation effects, rate limits, or response formats. It mentions actions like 'create' and 'update' but fails to detail their implications, leaving significant gaps in transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the tool's purpose as a Designer Tool for variable actions. It avoids redundancy but could be more structured by specifying the resource hierarchy (collections, modes, variables).

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the complexity of the tool with 2 parameters (one being a complex array of actions), no annotations, no output schema, and 50% schema coverage, the description is inadequate. It lacks details on action outcomes, error handling, and how to interpret results, making it incomplete for effective agent use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 50%, and the description adds minimal value by naming action types (e.g., create variable, get all variables) but does not explain parameter semantics beyond what the schema partially documents. It compensates slightly by hinting at the actions array's purpose, but not enough to overcome the coverage gap.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states the tool performs actions like create, get, and update variables, which provides a general purpose but lacks specificity about the resource scope (e.g., variable collections, modes, types). It does not distinguish from sibling tools like 'style_tool' or 'element_tool', making it vague in differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives such as 'style_tool' or other variable-related tools. The description lists actions but offers no context, prerequisites, or exclusions for usage, leaving the agent without direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security
Open Source Has a Bot Problem
By punkpeye on March 19, 2026.
open source

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server