Skip to main content
Glama

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
NameRequiredDescriptionDefault
widgetYesWidget configuration
triggerAddEventNoTrigger 'added' event

Implementation Reference

  • 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)});`, }); }
  • 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, }, }, }, },
  • 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);
  • TypeScript interface defining the parameters for the addWidget handler.
    export interface AddWidgetParams { widget: GridStackWidget; triggerAddEvent?: boolean; }
  • 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)});`, }); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/raghavsharma-simpplr/gridstack-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server