gridstack_make_widget
Convert existing DOM elements into interactive grid widgets for building dynamic dashboard layouts with customizable positioning and sizing options.
Instructions
Convert an existing DOM element into a grid widget
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| el | Yes | Element selector to convert | |
| options | No | Widget options |
Implementation Reference
- src/tools/index.ts:1120-1128 (handler)The primary handler function for the 'gridstack_make_widget' tool. It destructures the input parameters (el and options), constructs the appropriate GridStack JavaScript code using template literals, and delegates response formatting to the GridStackUtils helper.private async makeWidget(params: any): Promise<string> { const { el, options = {} } = params; return this.utils.generateGridStackCode("makeWidget", { element: el, options, code: `grid.makeWidget('${el}', ${JSON.stringify(options, null, 2)});`, }); }
- src/tools/index.ts:658-689 (registration)Tool registration entry in the listTools() method of GridStackTools class, defining the tool's name, description, and comprehensive input schema for MCP integration.{ name: "gridstack_make_widget", description: "Convert an existing DOM element into a grid widget", inputSchema: { type: "object", required: ["el"], properties: { el: { type: "string", description: "Element selector to convert", }, options: { type: "object", description: "Widget options", properties: { x: { type: "number" }, y: { type: "number" }, w: { type: "number" }, h: { type: "number" }, autoPosition: { type: "boolean" }, minW: { type: "number" }, maxW: { type: "number" }, minH: { type: "number" }, maxH: { type: "number" }, locked: { type: "boolean" }, noResize: { type: "boolean" }, noMove: { type: "boolean" }, }, }, }, }, },
- src/tools/index.ts:840-841 (handler)Dispatch handler in the callTool switch statement that routes calls to the specific makeWidget implementation.case "gridstack_make_widget": return this.makeWidget(args);
- src/utils/gridstack-utils.ts:16-27 (helper)Utility function called by all tool handlers, including makeWidget, to standardize the response format with operation details, generated code, descriptions, examples, and notes.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); }
- src/utils/gridstack-utils.ts:365-365 (helper)Description string for the makeWidget operation used in response generation.makeWidget: "Convert an existing DOM element into a grid widget",