How to Integrate Microsoft Teams with V0

Set up an incoming webhook in your Microsoft Teams channel to get the URL your Next.js API route will POST to. In Teams, navigate to the channel where you want to receive notifications. Click the three-dot menu (…) next to the channel name and select 'Connectors'. In the Connectors dialog, search for 'Incoming Webhook' and click 'Configure' (or 'Add' if not yet configured). Give the webhook a name that identifies its source — for example, 'Website Form Submissions' or 'Production Alerts'. Optionally, upload a custom icon. Click 'Create' and Teams generates a unique webhook URL. Copy this URL immediately — it's the only time Teams shows it in full, though you can view or regenerate it from the same Connectors page later. The webhook URL has the format: https://your-org.webhook.office.com/webhookb2/{guid}@{tenant-id}/IncomingWebhook/{channel-id}/{token}. This URL is effectively a secret — anyone with this URL can post messages to your Teams channel, so treat it like an API key. Store it in Vercel environment variables, not in your source code. Note: As of 2024-2025, Microsoft is transitioning from the legacy Connectors system to 'Workflows' (Power Automate-based) for incoming webhooks in some tenants. If you don't see the Incoming Webhook connector, look for 'Workflows' instead and use Microsoft's new 'When a Teams webhook request is received' trigger. The POST payload format is slightly different — the Workflows-based webhook accepts the same Adaptive Card JSON payload format.

Build the Next.js API route that receives notification requests from your frontend and posts formatted Adaptive Card messages to the Teams webhook URL. Adaptive Cards give your Teams messages structure — they can show tables, images, action buttons, and color-coded status indicators rather than plain text. The Teams incoming webhook accepts a JSON payload with either a simple 'text' field for plain messages, or a more structured 'attachments' array with Adaptive Card content. Adaptive Cards use a JSON schema defined at adaptivecards.io — you compose cards using a drag-and-drop designer at adaptivecards.io/designer and export the JSON. For a form submission notification, a good Adaptive Card structure includes: a header text element showing the form name and submission time, a FactSet with key-value pairs for each form field (name, email, subject), a separator, and action buttons pointing to your CRM or admin panel. The 'themeColor' field on the message wrapper sets the left accent bar color — use '0078D4' for Microsoft blue, 'ff0000' for red (urgent alerts), or '00b300' for green (success notifications). Return a 200 status from your API route after successfully posting to Teams. The Teams webhook returns '1' as the response body on success (not JSON), so check the HTTP status code rather than parsing the response body. Log errors from the Teams webhook to Vercel's function logs for debugging.

1import { NextResponse } from 'next/server';
2
3const TEAMS_WEBHOOK_URL = process.env.TEAMS_WEBHOOK_URL;
4
5interface NotifyPayload {
6  title: string;
7  message: string;
8  fields?: { label: string; value: string }[];
9  color?: string; // hex color without #
10  actionUrl?: string;
11  actionLabel?: string;
12}
13
14export async function POST(request: Request) {
15  if (!TEAMS_WEBHOOK_URL) {
16    return NextResponse.json(
17      { error: 'Teams webhook URL not configured' },
18      { status: 500 }
19    );
20  }
21
22  const payload: NotifyPayload = await request.json();
23
24  const adaptiveCard = {
25    type: 'message',
26    attachments: [
27      {
28        contentType: 'application/vnd.microsoft.card.adaptive',
29        contentUrl: null,
30        content: {
31          $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
32          type: 'AdaptiveCard',
33          version: '1.4',
34          body: [
35            {
36              type: 'TextBlock',
37              text: payload.title,
38              weight: 'Bolder',
39              size: 'Medium',
40              color: 'Accent',
41            },
42            {
43              type: 'TextBlock',
44              text: payload.message,
45              wrap: true,
46            },
47            ...(payload.fields && payload.fields.length > 0
48              ? [
49                  {
50                    type: 'FactSet',
51                    facts: payload.fields.map((f) => ({
52                      title: f.label,
53                      value: f.value,
54                    })),
55                  },
56                ]
57              : []),
58          ],
59          actions: payload.actionUrl
60            ? [
61                {
62                  type: 'Action.OpenUrl',
63                  title: payload.actionLabel || 'View Details',
64                  url: payload.actionUrl,
65                },
66              ]
67            : [],
68          msteams: { width: 'Full' },
69        },
70      },
71    ],
72  };
73
74  const response = await fetch(TEAMS_WEBHOOK_URL, {
75    method: 'POST',
76    headers: { 'Content-Type': 'application/json' },
77    body: JSON.stringify(adaptiveCard),
78  });
79
80  if (!response.ok) {
81    const errorText = await response.text();
82    console.error('Teams webhook error:', response.status, errorText);
83    return NextResponse.json(
84      { error: 'Failed to send Teams notification' },
85      { status: 502 }
86    );
87  }
88
89  return NextResponse.json({ success: true });
90}

Your Teams webhook URL must be stored as an environment variable in Vercel — not hardcoded in your source code. The webhook URL acts like a password: anyone with it can post messages to your Teams channel, so it must be treated as a secret. Open your Vercel Dashboard, select your project, navigate to Settings → Environment Variables, and create a new variable named TEAMS_WEBHOOK_URL. Paste the full webhook URL (starting with https://your-org.webhook.office.com/...) as the value. Select all three scopes: Production, Preview, and Development. Click Save. For local development, add TEAMS_WEBHOOK_URL=your_webhook_url to your .env.local file. This file is automatically excluded from Git in standard Next.js projects — check that .gitignore contains .env.local before proceeding. If you manage notifications to multiple Teams channels (for example, a 'Sales Leads' channel and a 'Support' channel), create separate webhook URLs for each channel and store them as separate environment variables: TEAMS_WEBHOOK_SALES, TEAMS_WEBHOOK_SUPPORT. Your API route can accept a 'channel' parameter and select the correct webhook URL based on the notification type. After adding the variable in Vercel, redeploy your application — go to the Deployments tab, click the latest deployment's three-dot menu, and select 'Redeploy'. Environment variable changes do not take effect until the next deployment.

1# .env.local
2TEAMS_WEBHOOK_URL=https://your-org.webhook.office.com/webhookb2/...
3
4# If using multiple channels:
5TEAMS_WEBHOOK_SALES=https://your-org.webhook.office.com/webhookb2/sales...
6TEAMS_WEBHOOK_SUPPORT=https://your-org.webhook.office.com/webhookb2/support...

If you want to embed your V0-generated page directly inside Microsoft Teams as a Tab, you need to create a Teams app manifest — a JSON file that describes your app to Teams. This lets employees access your dashboard or tool as a native Teams tab without opening a separate browser window. A Teams Tab app is simply your Vercel-hosted Next.js page rendered in an iframe inside Teams. Teams adds an app bar entry and tab navigation, but your page provides all the UI and functionality. The minimum requirement is that your app is served over HTTPS (Vercel handles this automatically) and allows being embedded in iframes from teams.microsoft.com. Next.js includes a Content Security Policy that by default allows iframes from any origin. However, some Next.js configurations add X-Frame-Options headers that block embedding. To allow Teams to embed your app, ensure your next.config.ts does not set X-Frame-Options: DENY. You can add specific frame-ancestors permissions in your Content-Security-Policy header to restrict embedding to only Microsoft Teams domains. Create a manifest.json file and a small app package (ZIP containing manifest.json and two icons) and upload it to the Teams Admin Center or directly to a team via the Apps store. The manifest includes your Vercel URL as the content URL for the tab. Once uploaded, team members can add your app as a tab to any channel. This approach requires no Azure AD app registration for read-only tabs.

1// manifest.json — Teams app manifest
2// Package this with icon-color.png (192x192) and icon-outline.png (32x32)
3// as a .zip file and upload to Teams
4{
5  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.17/MicrosoftTeams.schema.json",
6  "manifestVersion": "1.17",
7  "version": "1.0.0",
8  "id": "your-unique-app-guid-here",
9  "packageName": "com.yourcompany.dashboard",
10  "developer": {
11    "name": "Your Company",
12    "websiteUrl": "https://your-vercel-app.vercel.app",
13    "privacyUrl": "https://your-vercel-app.vercel.app/privacy",
14    "termsOfUseUrl": "https://your-vercel-app.vercel.app/terms"
15  },
16  "icons": {
17    "color": "icon-color.png",
18    "outline": "icon-outline.png"
19  },
20  "name": {
21    "short": "My Dashboard",
22    "full": "My Company Dashboard"
23  },
24  "description": {
25    "short": "Internal dashboard for team",
26    "full": "View key metrics and project status directly within Microsoft Teams."
27  },
28  "accentColor": "#0078D4",
29  "staticTabs": [
30    {
31      "entityId": "dashboard",
32      "name": "Dashboard",
33      "contentUrl": "https://your-vercel-app.vercel.app/dashboard",
34      "websiteUrl": "https://your-vercel-app.vercel.app/dashboard",
35      "scopes": ["personal", "team"]
36    }
37  ],
38  "permissions": ["identity", "messageTeamMembers"],
39  "validDomains": ["your-vercel-app.vercel.app"]
40}