gridstack_make_widget
Convert existing DOM elements into interactive grid widgets for dashboard layouts. Specify element selector and positioning options to integrate components into responsive drag-and-drop grid systems.
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)Handler function that implements the gridstack_make_widget tool logic by generating the appropriate GridStack.js code snippet.
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 (schema)Input schema definition and description for the gridstack_make_widget tool.
{ 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:657-762 (registration)The tool is registered in the listTools() method's return array.
// Advanced Features { 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" }, }, }, }, }, }, { name: "gridstack_remove_all", description: "Remove all widgets from the grid", inputSchema: { type: "object", properties: { removeDOM: { type: "boolean", description: "Remove DOM elements", default: true, }, }, }, }, { name: "gridstack_get_margin", description: "Get current margin values", inputSchema: { type: "object", properties: {}, }, }, { name: "gridstack_get_column", description: "Get current number of columns", inputSchema: { type: "object", properties: {}, }, }, { name: "gridstack_get_float", description: "Get current float state", inputSchema: { type: "object", properties: {}, }, }, { name: "gridstack_add_grid", description: "Create a new grid with options and children (static method)", inputSchema: { type: "object", required: ["parent"], properties: { parent: { type: "string", description: "Parent element selector", }, opt: { type: "object", description: "Grid options including children", properties: { children: { type: "array", items: { type: "object", description: "Child widget configuration", }, description: "Array of child widgets to load", }, }, }, }, }, }, ]; - src/tools/index.ts:840-842 (registration)Dispatch registration in the callTool switch statement routing to the handler.
case "gridstack_make_widget": return this.makeWidget(args);