SAP OData to MCP Server

Instructions

Implementation Reference

• src/tools/ui/ui-dashboard-composer-tool.ts:107-150 (registration)

  Registers the 'ui-dashboard-composer' tool with the MCP server, specifying title, detailed description, input schema, and the handler function that delegates to handleDashboardComposition.
  public async register(): Promise<void> { this.mcpServer.registerTool( "ui-dashboard-composer", { title: "UI Dashboard Composer", description: `Create interactive KPI dashboards with widgets, charts, and real-time updates. Features: - Multiple widget types (KPI cards, charts, tables, gauges, timelines) - Flexible grid-based layout system - Real-time data refresh and updates - Interactive filters and drill-down capabilities - Chart.js integration for advanced visualizations - Export to PDF, Excel, PowerPoint, and images - Responsive design for mobile and desktop - SAP Fiori design language compliance - Custom aggregations and calculations - WebSocket support for live data Required scope: ui.dashboards Widget Types: - kpi-card: Key performance indicator cards - chart: Bar, line, pie, doughnut, and radar charts - table: Data tables with sorting and filtering - list: Simple list displays - gauge: Circular and linear progress gauges - timeline: Event timelines and process flows - map: Geographic data visualization - custom: Custom HTML/JavaScript widgets Examples: - Sales dashboard: {"title": "Sales Overview", "widgets": [...]} - Executive summary: {"title": "Executive KPIs", "layout": {"type": "grid", "columns": 3}} - Real-time monitoring: {"refreshInterval": 30, "widgets": [...]}`, inputSchema: UIDashboardComposerSchema }, async (args: Record<string, unknown>) => { return await this.handleDashboardComposition(args); } ); this.logger.info("✅ UI Dashboard Composer tool registered successfully"); }
• src/tools/ui/ui-dashboard-composer-tool.ts:21-84 (schema)

  Comprehensive Zod input schema defining all parameters for dashboard configuration including layout, widgets, data sources, filters, theme, and export options.
  const UIDashboardComposerSchema = { title: z.string().describe("Dashboard title"), description: z.string().optional().describe("Dashboard description"), layout: z.object({ type: z.enum(['grid', 'flexbox', 'absolute']).describe("Layout type"), columns: z.number().min(1).max(12).optional().describe("Number of columns for grid layout"), gap: z.string().optional().describe("Gap between widgets (e.g., '1rem')"), responsive: z.boolean().optional().describe("Enable responsive design") }).describe("Dashboard layout configuration"), widgets: z.array(z.object({ id: z.string().describe("Unique widget identifier"), type: z.enum(['kpi-card', 'chart', 'table', 'list', 'gauge', 'timeline', 'map', 'custom']).describe("Widget type"), title: z.string().describe("Widget title"), position: z.object({ row: z.number().min(0).describe("Grid row position"), col: z.number().min(0).describe("Grid column position"), width: z.number().min(1).max(12).describe("Widget width (grid columns)"), height: z.number().min(1).describe("Widget height (grid rows)") }).describe("Widget position and size"), config: z.record(z.any()).optional().describe("Widget-specific configuration"), dataSource: z.object({ entitySet: z.string().describe("SAP entity set for data"), query: z.object({ filter: z.string().optional(), select: z.string().optional(), orderby: z.string().optional(), top: z.number().optional() }).optional().describe("OData query parameters"), aggregation: z.object({ groupBy: z.array(z.string()).optional().describe("Fields to group by"), measures: z.array(z.object({ field: z.string(), operation: z.enum(['sum', 'avg', 'count', 'min', 'max']) })).optional().describe("Aggregation measures") }).optional().describe("Data aggregation configuration"), refresh: z.number().optional().describe("Refresh interval in seconds") }).describe("Data source configuration") })).describe("Dashboard widgets"), datasources: z.array(z.object({ id: z.string().describe("Data source identifier"), entitySet: z.string().describe("SAP entity set"), query: z.string().optional().describe("Custom OData query"), cacheTtl: z.number().optional().describe("Cache TTL in seconds"), transform: z.string().optional().describe("Data transformation function name") })).optional().describe("Shared data sources"), refreshInterval: z.number().min(5).max(3600).optional().describe("Global refresh interval in seconds"), theme: z.enum(['sap_horizon', 'sap_fiori_3', 'dark', 'light']).optional().describe("Dashboard theme"), filters: z.array(z.object({ field: z.string().describe("Filter field name"), label: z.string().describe("Filter display label"), type: z.enum(['select', 'daterange', 'text', 'number']).describe("Filter type"), options: z.array(z.object({ value: z.string(), label: z.string() })).optional().describe("Options for select filters"), defaultValue: z.any().optional().describe("Default filter value") })).optional().describe("Global dashboard filters"), exportOptions: z.object({ pdf: z.boolean().optional(), excel: z.boolean().optional(), powerpoint: z.boolean().optional(), image: z.boolean().optional() }).optional().describe("Export format options") };
• src/tools/ui/ui-dashboard-composer-tool.ts:152-253 (handler)

  Core handler function that parses input, checks authorization, validates and prepares widgets/data, generates dashboard layout and UI using component library, enhances with SAP styles/scripts, and returns markdown summary with JSON resource containing full dashboard config.
  private async handleDashboardComposition(args: unknown): Promise<any> { try { // Validate input parameters const params = z.object(UIDashboardComposerSchema).parse(args); this.logger.info(`📊 Generating dashboard: ${params.title} with ${params.widgets.length} widgets`); // Check authentication and authorization const authCheck = await this.checkUIAccess('ui.dashboards'); if (!authCheck.hasAccess) { return { content: [{ type: "text", text: `❌ Authorization denied: ${authCheck.reason || 'Access denied for UI dashboard generation'}\n\nRequired scope: ui.dashboards` }] }; } // Step 1: Validate and prepare widget configurations const validatedWidgets = await this.validateAndPrepareWidgets(params.widgets); // Step 2: Prepare data sources const dataSources = await this.prepareDashboardDataSources(validatedWidgets, params.datasources); // Step 3: Create dashboard layout const layoutDefinition: LayoutDefinition = { type: params.layout.type, config: { columns: params.layout.columns || 4, gap: params.layout.gap || '1rem', responsive: params.layout.responsive !== false ? { breakpoints: { mobile: { columns: 1, gap: '0.5rem' }, tablet: { columns: 2, gap: '1rem' }, desktop: { columns: 4, gap: '1rem' } } } : undefined }, components: this.createWidgetComponents(validatedWidgets) }; // Step 4: Create dashboard configuration const dashboardConfig: DashboardConfig = { layout: layoutDefinition, widgets: validatedWidgets, datasources: dataSources, refreshInterval: params.refreshInterval || 60, theme: params.theme || 'sap_horizon' }; // Step 5: Generate dashboard UI const dashboardResult = await this.componentLibrary.generateDashboard(dashboardConfig); // Step 6: Add SAP-specific enhancements const enhancedResult = await this.enhanceDashboardResult(dashboardResult, params); // Step 7: Prepare response const response = this.createDashboardResponse(enhancedResult, params, dataSources); this.logger.info(`✅ Dashboard '${params.title}' generated successfully`); return { content: [ { type: "text", text: `# ${params.title}\n\n` + `${params.description || 'Interactive SAP dashboard with real-time KPIs'}\n\n` + `## Dashboard Overview:\n` + `- Widgets: ${params.widgets.length}\n` + `- Layout: ${params.layout.type} (${params.layout.columns || 4} columns)\n` + `- Theme: ${params.theme || 'sap_horizon'}\n` + `- Refresh: Every ${params.refreshInterval || 60} seconds\n` + `- Filters: ${params.filters?.length || 0}\n\n` + `## Widget Types:\n` + params.widgets.map(w => `- ${w.type}: ${w.title}`).join('\n') + '\n\n' + `## Data Sources:\n` + `- Entity Sets: ${Array.from(new Set(params.widgets.map(w => w.dataSource.entitySet))).join(', ')}\n` + `- Real-time Updates: ${params.refreshInterval ? '✅' : '❌'}\n\n` + `## Features:\n` + `- Export Options: ${Object.entries(params.exportOptions || {}).filter(([k, v]) => v).map(([k]) => k.toUpperCase()).join(', ') || 'Basic'}\n` + `- Responsive Design: ✅\n` + `- Interactive Filters: ${params.filters?.length ? '✅' : '❌'}\n\n` + `Embed this dashboard in your SAP application or use via MCP client.` }, { type: "resource", data: response, mimeType: "application/json" } ] }; } catch (error) { this.logger.error(`❌ Failed to generate dashboard`, error as Error); return { content: [{ type: "text", text: `❌ Failed to generate dashboard: ${(error as Error).message}` }] }; } }