gridstack_set_responsive
Configure responsive breakpoints for GridStack layouts to adapt grid columns based on window width, enabling responsive dashboard designs that adjust to different screen sizes.
Instructions
Configure responsive breakpoints
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| breakpoints | Yes | Array of breakpoint configurations |
Implementation Reference
- src/tools/index.ts:1052-1059 (handler)The handler function that implements the core logic of the 'gridstack_set_responsive' tool by generating executable JavaScript code for GridStack's setResponsive method.private async setResponsive(params: ResponsiveParams): Promise<string> { const { breakpoints } = params; return this.utils.generateGridStackCode("setResponsive", { breakpoints, code: `grid.setResponsive(${JSON.stringify(breakpoints, null, 2)});`, }); }
- src/tools/index.ts:494-517 (schema)Input schema defining the expected parameters: an array of breakpoint objects each containing 'w' (window width) and 'c' (columns).inputSchema: { type: "object", required: ["breakpoints"], properties: { breakpoints: { type: "array", items: { type: "object", required: ["w", "c"], properties: { w: { type: "number", description: "Window width breakpoint", }, c: { type: "number", description: "Number of columns at this breakpoint", }, }, }, description: "Array of breakpoint configurations", }, }, },
- src/tools/index.ts:819-820 (registration)Registration in the callTool switch statement that routes calls to the setResponsive handler.case "gridstack_set_responsive": return this.setResponsive(args as ResponsiveParams);
- src/tools/index.ts:491-518 (registration)Tool definition and registration in the listTools() method's return array, including name, description, and schema.{ name: "gridstack_set_responsive", description: "Configure responsive breakpoints", inputSchema: { type: "object", required: ["breakpoints"], properties: { breakpoints: { type: "array", items: { type: "object", required: ["w", "c"], properties: { w: { type: "number", description: "Window width breakpoint", }, c: { type: "number", description: "Number of columns at this breakpoint", }, }, }, description: "Array of breakpoint configurations", }, }, }, },
- src/utils/gridstack-utils.ts:16-27 (helper)Helper method used by the handler to format and generate the standardized response containing the code snippet, description, parameters, and notes for the tool execution.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); }