generate_html_report
Create interactive HTML reports and dashboards with responsive design, charts, and filtering capabilities for Microsoft 365 data analysis and visualization.
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
- Primary handler function for the 'generate_html_report' tool. Dispatches to create, get, or list HTML reports, generating content with Handlebars-like templating and uploading to OneDrive/SharePoint.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 implementation for creating HTML reports: generates HTML content from sections/template and uploads the file to OneDrive/SharePoint via Microsoft Graph.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); }
- Generates the full HTML content string from template and sections, including CSS themes, tables, interactive charts (Chart.js), cards, alerts, etc.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 for input validation of generate_html_report tool arguments (HTMLReportArgs). Defines structure for actions, template, sections, storage locations.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)') });
- src/tool-metadata.ts:282-285 (registration)Tool metadata registration for 'generate_html_report', including description, title, and annotations for MCP tool discovery.generate_html_report: { description: "Create interactive HTML reports and dashboards with responsive design, charts, and filtering capabilities.", title: "HTML Report Generator", annotations: { title: "HTML Report Generator", readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: true }