How to Integrate Bolt.new with Microsoft Teams

Teams incoming webhooks are the fastest way to send messages to a Teams channel from Bolt. No Azure registration, no OAuth, no tokens — just a URL that accepts JSON POST requests. The setup takes two minutes. Open Microsoft Teams and navigate to the channel where you want to receive notifications. Click the three-dot menu next to the channel name → Connectors (or in newer Teams UI: More options → Manage channel → Connectors). Search for 'Incoming Webhook' in the connector list, click Add, then click Add again on the confirmation screen. Give the webhook a name (e.g., 'Bolt App Notifications') and optionally upload an icon image. Click Create. Teams will show you a long HTTPS URL — this is your webhook endpoint. Copy it immediately. The URL contains an embedded authentication token and is unique to this channel. Store it as TEAMS_WEBHOOK_URL in your Bolt project's .env.local file. Keep this URL private — anyone with this URL can post to your channel. To send a message, POST a JSON payload to this URL. Teams accepts two message formats: simple MessageCard (JSON with @type: 'MessageCard') or the newer Adaptive Card format. Adaptive Cards are preferred for rich, structured messages — they support buttons, images, tables, and interactive elements. For simple text notifications, MessageCard is faster to implement. The POST request goes directly from your server-side Next.js route to Teams' servers, which makes it work perfectly from Bolt's WebContainer — it's a standard outbound HTTPS call with no CORS concerns.

1// .env.local
2TEAMS_WEBHOOK_URL=https://your-tenant.webhook.office.com/webhookb2/...
3
4// app/api/teams/notify/route.ts
5import { NextRequest, NextResponse } from 'next/server';
6
7const SEVERITY_COLORS: Record<string, string> = {
8  info: '0078D4',     // Teams blue
9  warning: 'FFB900',  // amber
10  critical: 'D13438', // red
11};
12
13export async function POST(request: NextRequest) {
14  const { title, message, severity = 'info', actionUrl, actionLabel } = await request.json();
15
16  const webhookUrl = process.env.TEAMS_WEBHOOK_URL!;
17  const color = SEVERITY_COLORS[severity] ?? SEVERITY_COLORS.info;
18
19  // Adaptive Card format (current Teams standard)
20  const card = {
21    type: 'message',
22    attachments: [
23      {
24        contentType: 'application/vnd.microsoft.card.adaptive',
25        content: {
26          $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
27          type: 'AdaptiveCard',
28          version: '1.4',
29          body: [
30            {
31              type: 'TextBlock',
32              text: title,
33              weight: 'Bolder',
34              size: 'Medium',
35              color: severity === 'critical' ? 'Attention' : severity === 'warning' ? 'Warning' : 'Default',
36            },
37            {
38              type: 'TextBlock',
39              text: message,
40              wrap: true,
41              color: 'Default',
42            },
43          ],
44          ...(actionUrl && actionLabel
45            ? {
46                actions: [
47                  {
48                    type: 'Action.OpenUrl',
49                    title: actionLabel,
50                    url: actionUrl,
51                  },
52                ],
53              }
54            : {}),
55        },
56      },
57    ],
58  };
59
60  const response = await fetch(webhookUrl, {
61    method: 'POST',
62    headers: { 'Content-Type': 'application/json' },
63    body: JSON.stringify(card),
64  });
65
66  if (!response.ok) {
67    const errorText = await response.text();
68    return NextResponse.json({ error: errorText }, { status: response.status });
69  }
70
71  return NextResponse.json({ success: true });
72}

For Graph API access beyond incoming webhooks — sending messages to specific chats, creating meetings, reading team membership — you need to register an Azure AD application. Go to portal.azure.com and sign in with your Microsoft account. In the search bar, type 'App registrations' and click the result. Click New registration. Give the app a name like 'Bolt Teams Integration'. Under Supported account types, choose 'Accounts in this organizational directory only' if you're only integrating with your own tenant, or 'Accounts in any organizational directory' for multi-tenant apps. For the Redirect URI, choose 'Web' and enter https://localhost:3000/api/auth/callback for development (you'll add your deployed URL later). Click Register. You will see the Overview page with your Application (client) ID and Directory (tenant) ID — copy both. Next, create a client secret: click Certificates & secrets → New client secret. Give it a description, choose an expiry (24 months is typical), and click Add. Copy the Value immediately — it's shown only once. Now configure API permissions. Click API permissions → Add a permission → Microsoft Graph. For sending messages to channels and creating meetings, you need: ChannelMessage.Send (Delegated, for user-context messages) and OnlineMeetings.ReadWrite (Delegated, for meeting creation). For server-to-server operations without user login, add Application permissions instead: ChannelMessage.Send (Application) requires admin consent. Click Add permissions, then Grant admin consent if you have admin rights. Store all three values (client ID, client secret, tenant ID) in .env.local. These credentials are sensitive — keep them server-side only.

1// .env.local (add to existing file)
2AZURE_CLIENT_ID=your_application_client_id
3AZURE_CLIENT_SECRET=your_client_secret_value
4AZURE_TENANT_ID=your_directory_tenant_id
5
6// lib/graph.ts
7let cachedToken: { token: string; expiresAt: number } | null = null;
8
9export async function getGraphToken(): Promise<string> {
10  if (cachedToken && Date.now() < cachedToken.expiresAt - 60_000) {
11    return cachedToken.token;
12  }
13
14  const tenantId = process.env.AZURE_TENANT_ID!;
15  const clientId = process.env.AZURE_CLIENT_ID!;
16  const clientSecret = process.env.AZURE_CLIENT_SECRET!;
17
18  const params = new URLSearchParams({
19    grant_type: 'client_credentials',
20    client_id: clientId,
21    client_secret: clientSecret,
22    scope: 'https://graph.microsoft.com/.default',
23  });
24
25  const response = await fetch(
26    `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
27    { method: 'POST', body: params }
28  );
29
30  if (!response.ok) {
31    throw new Error(`Graph token request failed: ${response.status}`);
32  }
33
34  const data = await response.json();
35  cachedToken = {
36    token: data.access_token,
37    expiresAt: Date.now() + data.expires_in * 1000,
38  };
39  return cachedToken.token;
40}
41
42export async function graphFetch(
43  endpoint: string,
44  method = 'GET',
45  body?: unknown
46): Promise<Response> {
47  const token = await getGraphToken();
48  return fetch(`https://graph.microsoft.com/v1.0${endpoint}`, {
49    method,
50    headers: {
51      Authorization: `Bearer ${token}`,
52      'Content-Type': 'application/json',
53    },
54    ...(body ? { body: JSON.stringify(body) } : {}),
55  });
56}

With the Graph API token utility in place, you can create online meeting links programmatically. The Microsoft Graph endpoint for creating Teams meetings is POST /users/{userId}/onlineMeetings. This creates a meeting and returns a joinWebUrl that any participant can click to join the Teams meeting — no calendar event required. The request body requires at least a startDateTime and endDateTime in ISO 8601 format. You can also set the subject (meeting title), participants (attendee email addresses), and settings like allowAttendeeToEnableCamera or recordAutomatically. The response includes joinWebUrl (the link for attendees), joinMeetingIdSettings, and organizer details. Note: for Application-level token (client credentials, no user login), the POST must use /users/{userId}/onlineMeetings where userId is the Object ID of a real user in your Azure AD tenant — not /me, which requires delegated auth. Find the user's Object ID in Azure Portal → Users → click the user → Object ID. Store this as AZURE_MEETING_HOST_USER_ID in your env variables. The client_credentials token approach works from Bolt's WebContainer — it's an outbound HTTPS call to Microsoft's Graph API. If you need meetings to appear in specific users' calendars or require delegated user permissions, that requires an OAuth user flow with a redirect URI, which needs a deployed URL. For simple 'generate a Teams join link' functionality, client credentials work fine in development.

1// app/api/teams/meetings/create/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { graphFetch } from '@/lib/graph';
4
5export async function POST(request: NextRequest) {
6  const { subject, startTime, durationMinutes = 60, attendeeEmails = [] } = await request.json();
7
8  if (!subject || !startTime) {
9    return NextResponse.json(
10      { error: 'subject and startTime are required' },
11      { status: 400 }
12    );
13  }
14
15  const userId = process.env.AZURE_MEETING_HOST_USER_ID!;
16  const start = new Date(startTime);
17  const end = new Date(start.getTime() + durationMinutes * 60_000);
18
19  const body = {
20    subject,
21    startDateTime: start.toISOString(),
22    endDateTime: end.toISOString(),
23    ...(attendeeEmails.length > 0
24      ? {
25          participants: {
26            attendees: attendeeEmails.map((email: string) => ({
27              upn: email,
28              role: 'attendee',
29            })),
30          },
31        }
32      : {}),
33  };
34
35  const response = await graphFetch(`/users/${userId}/onlineMeetings`, 'POST', body);
36
37  if (!response.ok) {
38    const error = await response.json();
39    return NextResponse.json({ error }, { status: response.status });
40  }
41
42  const meeting = await response.json();
43  return NextResponse.json({
44    joinWebUrl: meeting.joinWebUrl,
45    meetingId: meeting.id,
46    startDateTime: meeting.startDateTime,
47    subject: meeting.subject,
48  });
49}

Incoming webhook notifications work in Bolt's WebContainer preview and can be tested immediately — send a test notification from the Bolt UI and verify it appears in your Teams channel. The Graph API calls (meeting creation, channel messaging) also work in the preview as long as you're using client credentials (application-level auth), not user-delegated OAuth. For features that require user login — accessing the authenticated user's calendar, sending messages as a specific user, or reading personal chat history — you need a delegated OAuth flow. This requires a publicly accessible redirect URI, which means you must deploy first. Add your deployed URL as a redirect URI in your Azure AD app registration (portal.azure.com → App registrations → your app → Authentication → Add URI). Use a URL like https://your-app.netlify.app/api/auth/callback. When deploying to Netlify or Vercel, add all Azure AD environment variables to the hosting platform's environment settings. In Netlify: Site settings → Environment variables. In Vercel: Project settings → Environment variables. Add TEAMS_WEBHOOK_URL, AZURE_CLIENT_ID, AZURE_CLIENT_SECRET, AZURE_TENANT_ID, and AZURE_MEETING_HOST_USER_ID. After deployment, verify both integration paths work: send a test notification through the webhook endpoint and confirm it appears in Teams, then create a test meeting and confirm the joinWebUrl opens a valid Teams meeting. For webhook subscriptions (receiving events from Microsoft Graph when Teams activity occurs), register your subscription endpoint in the Graph API after deployment — the subscription endpoint must be publicly accessible.