GridStack MCP Server

Instructions

Implementation Reference

• src/tools/index.ts:926-934 (handler)

  Main handler function that executes the tool logic: extracts parameters, generates the GridStack 'grid.resize()' code snippet, and formats response via utility.

  private async resizeWidget(params: ResizeWidgetParams): Promise<string> {
    const { el, width, height } = params;
  
    return this.utils.generateGridStackCode("resizeWidget", {
      element: el,
      size: { width, height },
      code: `grid.resize('${String(el)}', ${width}, ${height});`,
    });
  }

• src/tools/index.ts:259-280 (registration)

  Tool registration entry in GridStackTools.listTools() array, defining name, description, and input schema for MCP tool discovery.

  {
    name: "gridstack_resize_widget",
    description: "Resize a widget",
    inputSchema: {
      type: "object",
      required: ["el"],
      properties: {
        el: {
          type: "string",
          description: "Widget selector or ID to resize",
        },
        width: {
          type: "number",
          description: "New width in columns",
        },
        height: {
          type: "number",
          description: "New height in rows",
        },
      },
    },
  },

• src/types.ts:200-204 (schema)

  Type definition for tool input parameters, used for TypeScript typing and parameter destructuring in handler.

  export interface ResizeWidgetParams {
    el: string | HTMLElement;
    width?: number;
    height?: number;
  }

• src/tools/index.ts:783-784 (registration)

  Dispatch case in GridStackTools.callTool() switch statement that routes tool calls to the resizeWidget handler.

  case "gridstack_resize_widget":
    return this.resizeWidget(args as ResizeWidgetParams);

• src/utils/gridstack-utils.ts:16-27 (helper)

  Utility method called by handler to format the response with code snippet, parameters, description, example, and notes for the resize operation.

  generateGridStackCode(operation: string, params: any): string {
    const result: GridStackCodeResult = {
      operation,
      parameters: params,
      code: params.code || "",
      description: this.getOperationDescription(operation),
      example: this.getOperationExample(operation),
      notes: this.getOperationNotes(operation),
    };
  
    return this.formatResponse(result);
  }