GridStack MCP Server

Instructions

Implementation Reference

• src/tools/index.ts:34-126 (registration)

  Registration of the 'gridstack_init' tool in the listTools() method, including name, description, and full input schema definition.
  { name: "gridstack_init", description: "Initialize a new GridStack instance with specified options", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for the grid container element", default: ".grid-stack", }, options: { type: "object", description: "GridStack initialization options", properties: { acceptWidgets: { oneOf: [{ type: "boolean" }, { type: "string" }], description: "Accept widgets from other grids or external elements", }, alwaysShowResizeHandle: { type: "boolean", description: "Always show resize handles", }, animate: { type: "boolean", description: "Enable animations", }, auto: { type: "boolean", description: "Auto-position widgets", }, cellHeight: { oneOf: [{ type: "number" }, { type: "string" }], description: "Cell height (px, 'auto', 'initial', CSS units)", }, cellHeightThrottle: { type: "number", description: "Throttle time for cellHeight='auto' (ms)", }, column: { oneOf: [ { type: "number" }, { type: "string", enum: ["auto"] }, ], description: "Number of columns or 'auto' for nested grids", }, disableDrag: { type: "boolean", description: "Disable dragging of widgets", }, disableResize: { type: "boolean", description: "Disable resizing of widgets", }, float: { type: "boolean", description: "Enable floating widgets", }, handle: { type: "string", description: "Draggable handle selector", }, margin: { oneOf: [{ type: "number" }, { type: "string" }], description: "Gap between grid items (px or CSS units)", }, maxRow: { type: "number", description: "Maximum number of rows", }, minRow: { type: "number", description: "Minimum number of rows", }, removable: { oneOf: [{ type: "boolean" }, { type: "string" }], description: "Allow widgets to be removed by dragging out", }, rtl: { type: "boolean", description: "Right-to-left support", }, staticGrid: { type: "boolean", description: "Make grid static (no drag/resize)", }, }, }, }, }, },
• src/tools/index.ts:869-881 (handler)

  The main handler function for 'gridstack_init' that destructures parameters, formats options, and generates the JavaScript code snippet for initializing a GridStack instance using the utility.
  private async initGrid(params: InitGridParams): Promise<string> { const { selector = ".grid-stack", options = {} } = params; return this.utils.generateGridStackCode("init", { selector, options: this.utils.formatOptions(options), code: `const grid = GridStack.init(${JSON.stringify( options, null, 2 )}, '${selector}');`, }); }
• src/tools/index.ts:767-770 (registration)

  Tool dispatcher switch case in callTool() method that routes 'gridstack_init' calls to the initGrid handler function.
  switch (name) { case "gridstack_init": return this.initGrid(args as InitGridParams);
• src/types.ts:173-176 (schema)

  TypeScript interface defining the input parameters for the gridstack_init tool handler, referencing broader GridStackOptions.
  export interface InitGridParams { selector?: string; options?: GridStackOptions; }
• src/utils/gridstack-utils.ts:16-27 (helper)

  Utility method used by the handler to format and enrich the response with operation description, example code, notes, and standardized JSON structure.
  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); }