gridstack_add_widget
Add a new widget to a dashboard grid with customizable position, size, and behavior settings for building dynamic 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:129-176 (registration)Tool registration including name, description, and detailed input schema for gridstack_add_widget.{ 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 main callTool switch statement that routes to the addWidget handler.case "gridstack_add_widget": return this.addWidget(args as AddWidgetParams);
- src/tools/index.ts:883-891 (handler)Core handler function: destructures parameters, generates and returns formatted JavaScript code to execute grid.addWidget with the provided widget configuration.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/types.ts:178-181 (schema)TypeScript interface defining the input parameters for the addWidget handler, matching the tool schema.export interface AddWidgetParams { widget: GridStackWidget; triggerAddEvent?: boolean; }
- src/utils/gridstack-utils.ts:16-27 (helper)Utility method called by the handler to format the response with code snippet, description, parameters, example, and notes for the addWidget 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); }