Teams App Manifest and Packaging|Mastering Microsoft Teams Bots 5.2

5.2 Teams App Manifest and Packaging

Your bot is live, hosted, and working — but right now, it’s still invisible to most Teams users. It doesn’t appear in the app bar, it can’t be added to chats or channels easily, and it lacks a name or icon.

That’s where the Teams App Manifest comes in.

In Microsoft Teams, everything beyond the built-in features — bots, tabs, extensions — is wrapped as an “app.” That app is defined by a manifest: a simple JSON file that tells Teams who you are, what your app does, and how to display it.

5.2.1 What Is the Teams App Manifest?

The manifest.json is the core descriptor of your Teams app. It includes:

  • Your app's ID, name, description, and developer info
  • What your app includes (bot, tabs, messaging extensions, etc.)
  • How it should appear in Teams (icons, accent color)
  • Permissions and supported scopes (personal, team, group chat)

Teams reads this file to know how to install and show your app.

5.2.2 Manifest File Structure

A basic manifest file might look like this:


{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.13/MicrosoftTeams.schema.json",
  "manifestVersion": "1.13",
  "version": "1.0.0",
  "id": "YOUR-APP-ID",
  "packageName": "com.example.mybot",
  "name": {
    "short": "MyBot",
    "full": "My Bot for Microsoft Teams"
  },
  "description": {
    "short": "A helpful Teams bot",
    "full": "This bot provides reminders, tasks, and automation inside Microsoft Teams."
  },
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "accentColor": "#6264A7",
  "bots": [{
    "botId": "YOUR-BOT-ID",
    "scopes": ["personal", "team", "groupchat"],
    "supportsFiles": false,
    "isNotificationOnly": false
  }],
  "permissions": ["identity", "messageTeamMembers"],
  "validDomains": ["mybot.azurewebsites.net"]
}
  

You’ll customize this depending on what your app includes — tabs, extensions, or just a bot.

5.2.3 Creating Icons

Your Teams app needs two icons:

  • color.png – 192x192px (shown in Teams app bar)
  • outline.png – 32x32px (used in dark mode and in smaller UI)

Keep them clean, readable, and consistent with your bot’s purpose. Tools like Figma or Canva are perfect for this step.

5.2.4 Packaging Your App

To package your Teams app for installation:

  1. Create a folder with:
    • manifest.json
    • color.png
    • outline.png
  2. Zip all three files into a single .zip file
  3. This ZIP is your installable Teams app package

5.2.5 Sideloading Your App

To test your app privately:

  1. Open Teams (desktop or web)
  2. Go to AppsManage your apps
  3. Click Upload a custom appUpload for me or my teams
  4. Select your ZIP file

You’ll now see your bot listed in the Teams app bar — fully branded and interactive.

5.2.6 Permissions and Scopes

Teams apps define where the bot can be used via scopes:

  • personal: 1:1 chat with user
  • team: in a Teams channel
  • groupchat: in a group chat (3+ users)

Use this to control how your bot is installed and activated.

5.2.7 App Studio vs Manual

You can either:

  • Edit manifest.json manually (great for CI/CD)
  • Use the Developer Portal for Teams (GUI-based, great for beginners)

Both generate valid app packages. You can even import/export between them.

5.2.8 Summary

Packaging your bot as a Teams app makes it feel real — like a polished, installable product. It also unlocks discoverability, deployment, and publishing pathways.

In the next section, we’ll take a final step toward operational excellence: monitoring, logging, and diagnostics — because a bot in production is only as good as your ability to support it.

2025-04-16

Shohei Shimoda

I organized and output what I have learned and know here.