How to Integrate Bolt.new with Microsoft Power BI

1// .env.local
2POWERBI_TENANT_ID=your_azure_ad_tenant_id
3POWERBI_CLIENT_ID=your_azure_ad_app_client_id
4POWERBI_CLIENT_SECRET=your_azure_ad_client_secret
5POWERBI_WORKSPACE_ID=your_power_bi_workspace_id
6POWERBI_REPORT_ID=your_power_bi_report_id

1// lib/powerbi.ts
2import { ConfidentialClientApplication } from '@azure/msal-node';
3
4let msalApp: ConfidentialClientApplication | null = null;
5
6function getMsalApp() {
7  if (!msalApp) {
8    msalApp = new ConfidentialClientApplication({
9      auth: {
10        clientId: process.env.POWERBI_CLIENT_ID!,
11        clientSecret: process.env.POWERBI_CLIENT_SECRET!,
12        authority: `https://login.microsoftonline.com/${process.env.POWERBI_TENANT_ID}`,
13      },
14    });
15  }
16  return msalApp;
17}
18
19export async function getPowerBIAccessToken(): Promise<string> {
20  const app = getMsalApp();
21  const result = await app.acquireTokenByClientCredential({
22    scopes: ['https://analysis.windows.net/powerbi/api/.default'],
23  });
24  if (!result?.accessToken) throw new Error('Failed to acquire Power BI access token');
25  return result.accessToken;
26}
27
28// app/api/powerbi/embed-token/route.ts
29import { NextRequest, NextResponse } from 'next/server';
30import { getPowerBIAccessToken } from '@/lib/powerbi';
31
32const PBI_API = 'https://api.powerbi.com/v1.0/myorg';
33
34export async function GET(request: NextRequest) {
35  const { searchParams } = new URL(request.url);
36  const workspaceId = searchParams.get('workspaceId') ?? process.env.POWERBI_WORKSPACE_ID!;
37  const reportId = searchParams.get('reportId') ?? process.env.POWERBI_REPORT_ID!;
38
39  const accessToken = await getPowerBIAccessToken();
40  const headers = { Authorization: `Bearer ${accessToken}` };
41
42  // Step 1: Get the report's embed URL
43  const reportResponse = await fetch(
44    `${PBI_API}/groups/${workspaceId}/reports/${reportId}`,
45    { headers }
46  );
47  if (!reportResponse.ok) {
48    return NextResponse.json({ error: 'Failed to fetch report metadata' }, { status: reportResponse.status });
49  }
50  const report = await reportResponse.json();
51
52  // Step 2: Generate the embed token
53  const tokenResponse = await fetch(
54    `${PBI_API}/groups/${workspaceId}/reports/${reportId}/GenerateToken`,
55    {
56      method: 'POST',
57      headers: { ...headers, 'Content-Type': 'application/json' },
58      body: JSON.stringify({ accessLevel: 'view' }),
59    }
60  );
61  if (!tokenResponse.ok) {
62    return NextResponse.json({ error: 'Failed to generate embed token' }, { status: tokenResponse.status });
63  }
64  const tokenData = await tokenResponse.json();
65
66  return NextResponse.json({
67    reportId,
68    embedUrl: report.embedUrl,
69    embedToken: tokenData.token,
70    tokenExpiry: tokenData.expiration,
71  });
72}

1// components/PowerBIReport.tsx
2'use client';
3import { useEffect, useState, useCallback } from 'react';
4import { PowerBIEmbed } from 'powerbi-client-react';
5import { models, Report } from 'powerbi-client';
6
7interface EmbedConfig {
8  embedUrl: string;
9  embedToken: string;
10  reportId: string;
11  tokenExpiry: string;
12}
13
14interface PowerBIReportProps {
15  reportId?: string;
16  workspaceId?: string;
17  height?: number;
18}
19
20export function PowerBIReport({ reportId, workspaceId, height = 600 }: PowerBIReportProps) {
21  const [config, setConfig] = useState<EmbedConfig | null>(null);
22  const [loading, setLoading] = useState(true);
23  const [error, setError] = useState<string | null>(null);
24
25  const fetchEmbedToken = useCallback(async () => {
26    try {
27      const params = new URLSearchParams();
28      if (reportId) params.set('reportId', reportId);
29      if (workspaceId) params.set('workspaceId', workspaceId);
30
31      const response = await fetch(`/api/powerbi/embed-token?${params.toString()}`);
32      if (!response.ok) throw new Error('Failed to fetch embed token');
33
34      const data = await response.json();
35      setConfig(data);
36      setError(null);
37    } catch (err) {
38      setError(err instanceof Error ? err.message : 'Failed to load report');
39    } finally {
40      setLoading(false);
41    }
42  }, [reportId, workspaceId]);
43
44  useEffect(() => { fetchEmbedToken(); }, [fetchEmbedToken]);
45
46  if (loading) return <div style={{ height }} className="animate-pulse bg-gray-100 rounded" />;
47  if (error) return (
48    <div className="flex flex-col items-center justify-center" style={{ height }}>
49      <p className="text-red-500">{error}</p>
50      <button onClick={fetchEmbedToken} className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">
51        Retry
52      </button>
53    </div>
54  );
55  if (!config) return null;
56
57  return (
58    <PowerBIEmbed
59      embedConfig={{
60        type: 'report',
61        id: config.reportId,
62        embedUrl: config.embedUrl,
63        accessToken: config.embedToken,
64        tokenType: models.TokenType.Embed,
65        settings: {
66          navContentPaneEnabled: false,
67          filterPaneEnabled: false,
68        },
69      }}
70      cssClassName="powerbi-report-container"
71      getEmbeddedComponent={(embeddedReport) => {
72        (embeddedReport as Report).on('tokenExpired', () => {
73          fetchEmbedToken();
74        });
75      }}
76      style={{ height: `${height}px`, width: '100%' }}
77    />
78  );
79}