gridstack_add_widget

Add a new widget to a GridStack dashboard by specifying its position, size, content, and behavior settings for custom dashboard layouts.

Instructions

Add a new widget to the grid

Input Schema

TableJSON Schema

Name	Required	Description	Default
`widget`	Yes	Widget configuration
`triggerAddEvent`	No	Trigger 'added' event

Implementation Reference

src/tools/index.ts:883-891 (handler)

The main handler function for the 'gridstack_add_widget' tool. It extracts parameters and uses GridStackUtils to generate executable JavaScript code that calls GridStack's addWidget method.

private async addWidget(params: AddWidgetParams): Promise<string> {
  const { widget, triggerAddEvent = true } = params;

  return this.utils.generateGridStackCode("addWidget", {
    widget,
    triggerAddEvent,
    code: `grid.addWidget(${JSON.stringify(widget, null, 2)});`,
  });
}

src/tools/index.ts:129-176 (schema)

Input schema definition for the gridstack_add_widget tool, specifying the required 'widget' object and optional triggerAddEvent flag.

{
  name: "gridstack_add_widget",
  description: "Add a new widget to the grid",
  inputSchema: {
    type: "object",
    required: ["widget"],
    properties: {
      widget: {
        type: "object",
        description: "Widget configuration",
        properties: {
          id: {
            oneOf: [{ type: "string" }, { type: "number" }],
            description: "Unique widget identifier",
          },
          x: { type: "number", description: "X position" },
          y: { type: "number", description: "Y position" },
          w: { type: "number", description: "Width in columns" },
          h: { type: "number", description: "Height in rows" },
          minW: { type: "number", description: "Minimum width" },
          maxW: { type: "number", description: "Maximum width" },
          minH: { type: "number", description: "Minimum height" },
          maxH: { type: "number", description: "Maximum height" },
          locked: {
            type: "boolean",
            description: "Lock widget position/size",
          },
          noResize: { type: "boolean", description: "Disable resizing" },
          noMove: { type: "boolean", description: "Disable moving" },
          autoPosition: {
            type: "boolean",
            description: "Auto-position widget",
          },
          resizeToContent: {
            type: "boolean",
            description: "Resize to content",
          },
          content: { type: "string", description: "Widget HTML content" },
        },
      },
      triggerAddEvent: {
        type: "boolean",
        description: "Trigger 'added' event",
        default: true,
      },
    },
  },
},

src/tools/index.ts:771-772 (registration)
Dispatch registration in the callTool switch statement that maps the tool name to its handler function.
```
case "gridstack_add_widget":
  return this.addWidget(args as AddWidgetParams);
```
src/types.ts:178-181 (schema)
TypeScript interface defining the parameters for the addWidget handler.
```
export interface AddWidgetParams {
  widget: GridStackWidget;
  triggerAddEvent?: boolean;
}
```

src/tools/index.ts:886-891 (helper)

Core code generation logic that produces the GridStack.addWidget call, delegated to GridStackUtils but specific to this tool.

  return this.utils.generateGridStackCode("addWidget", {
    widget,
    triggerAddEvent,
    code: `grid.addWidget(${JSON.stringify(widget, null, 2)});`,
  });
}

GridStack MCP Server