generate_html_report
Create interactive HTML reports and dashboards with responsive design, charts, and filtering capabilities for Microsoft 365 data analysis.
Instructions
Create interactive HTML reports and dashboards with responsive design, charts, and filtering capabilities.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| action | Yes | Action: create new HTML report, get existing, or list all | |
| fileName | No | Name for the HTML file (for create action) | |
| driveId | No | OneDrive/SharePoint drive ID (default: user's OneDrive) | |
| folderId | No | Folder ID within the drive (default: root) | |
| template | No | Template configuration for HTML report styling | |
| sections | No | Array of HTML sections to create | |
| includeCharts | No | Enable interactive charts with Chart.js | |
| fileId | No | File ID for get action | |
| filter | No | OData filter for list action | |
| top | No | Number of results to return (for list action) |
Implementation Reference
- src/server.ts:1312-1331 (registration)Tool registration in the MCP server, linking the tool name to the handler function handleHTMLReports."generate_html_report", "Create interactive HTML reports and dashboards with responsive design, charts, and filtering capabilities.", htmlReportArgsSchema.shape, {"readOnlyHint":false,"destructiveHint":false,"idempotentHint":false}, wrapToolHandler(async (args: HTMLReportArgs) => { this.validateCredentials(); try { const result = await handleHTMLReports(args, this.getGraphClient()); return { content: [{ type: 'text', text: result }] }; } catch (error) { if (error instanceof McpError) { throw error; } throw new McpError( ErrorCode.InternalError, `Error generating HTML report: ${error instanceof Error ? error.message : 'Unknown error'}` ); } }) );
- Main handler function for the generate_html_report tool. Dispatches to create/get/list actions based on args.action. The 'create' action generates the HTML report.export async function handleHTMLReports( args: HTMLReportArgs, graphClient: Client ): Promise<string> { try { switch (args.action) { case 'create': return await createHTMLReport(args, graphClient); case 'get': return await getHTMLReport(args, graphClient); case 'list': return await listHTMLReports(args, graphClient); default: throw new McpError( ErrorCode.InvalidRequest, `Unknown action: ${args.action}` ); } } catch (error) { if (error instanceof McpError) throw error; throw new McpError( ErrorCode.InternalError, `HTML report operation failed: ${error instanceof Error ? error.message : 'Unknown error'}` ); } }
- Core creation logic for HTML reports. Generates HTML content using sections and template, then uploads to OneDrive/SharePoint.async function createHTMLReport( args: HTMLReportArgs, graphClient: Client ): Promise<string> { if (!args.fileName) { throw new McpError(ErrorCode.InvalidRequest, 'fileName is required for create action'); } if (!args.template) { throw new McpError(ErrorCode.InvalidRequest, 'template is required for create action'); } if (!args.sections || args.sections.length === 0) { throw new McpError(ErrorCode.InvalidRequest, 'At least one section is required'); } // Determine drive location (default to user's OneDrive) const driveId = args.driveId || 'me'; const folderPath = args.folderId ? `/items/${args.folderId}` : '/root'; // Create HTML file const fileName = args.fileName.endsWith('.html') ? args.fileName : `${args.fileName}.html`; // Generate HTML content const htmlContent = generateHTMLContent(args.sections, args.template, args.includeCharts); const uploadedFile = await graphClient .api(`/drives/${driveId}${folderPath}:/${fileName}:/content`) .header('Content-Type', 'text/html') .put(Buffer.from(htmlContent, 'utf-8')); return JSON.stringify({ success: true, fileId: uploadedFile.id, fileName: uploadedFile.name, webUrl: uploadedFile.webUrl, driveId: uploadedFile.parentReference?.driveId, message: `HTML report "${fileName}" created successfully with ${args.sections.length} sections` }, null, 2); }
- Primary helper function that generates the complete HTML document from sections and template. Includes theme styles, Chart.js for interactive charts, responsive design.function generateHTMLContent( sections: HTMLSection[], template: HTMLTemplate, includeCharts?: boolean ): string { const theme = getThemeStyles(template.theme || 'modern'); let html = `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${escapeHtml(template.title)}</title> ${template.author ? `<meta name="author" content="${escapeHtml(template.author)}">` : ''} ${template.description ? `<meta name="description" content="${escapeHtml(template.description)}">` : ''} ${template.includeBootstrap ? '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">' : ''} ${includeCharts || template.includeChartJS ? '<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>' : ''} <style> ${theme} ${template.customCSS || ''} </style> </head> <body> <div class="container"> <header class="report-header"> ${template.companyLogo ? `<img src="${escapeHtml(template.companyLogo)}" alt="Company Logo" class="company-logo">` : ''} <h1>${escapeHtml(template.title)}</h1> ${template.description ? `<p class="report-description">${escapeHtml(template.description)}</p>` : ''} ${template.companyName ? `<p class="company-name">${escapeHtml(template.companyName)}</p>` : ''} <p class="report-date">Generated: ${new Date().toLocaleString()}</p> </header> <main class="report-content">`; // Generate sections sections.forEach((section, index) => { html += generateHTMLSection(section, index); }); html += ` </main> <footer class="report-footer"> ${template.companyName ? `<p>© ${new Date().getFullYear()} ${escapeHtml(template.companyName)}</p>` : ''} <p>Report generated by M365 Core MCP Server</p> </footer> </div> ${includeCharts ? getChartScripts(sections) : ''} </body> </html>`; return html; }
- Zod schema defining input parameters for the generate_html_report tool, including action, template, sections for structured HTML generation.export const htmlReportArgsSchema = z.object({ action: z.enum(['create', 'get', 'list']) .describe('Action: create new HTML report, get existing, or list all'), fileName: z.string().optional() .describe('Name for the HTML file (for create action)'), driveId: z.string().optional() .describe('OneDrive/SharePoint drive ID (default: user\'s OneDrive)'), folderId: z.string().optional() .describe('Folder ID within the drive (default: root)'), template: htmlTemplateSchema.optional() .describe('Template configuration for HTML report styling'), sections: z.array(htmlSectionSchema).optional() .describe('Array of HTML sections to create'), includeCharts: z.boolean().optional() .describe('Enable interactive charts with Chart.js'), fileId: z.string().optional() .describe('File ID for get action'), filter: z.string().optional() .describe('OData filter for list action'), top: z.number().optional() .describe('Number of results to return (for list action)')