Developer Documentation – Sparks for Teams
App Marketplace
Sparks is planning an app marketplace where Microsoft Teams apps can be reused with minimal changes. Existing Teams tabs and widgets can be adapted for Sparks.
Adapting MS Teams Widgets for Sparks for Teams
Sparks supports tabs and widgets that follow the Microsoft Teams App Manifest schema. Apps developed for Microsoft Teams can be used in Sparks with few modifications.
Prerequisites
- Manifest: A valid Teams App Manifest (JSON)
- Tabs: Static tabs (
staticTabs) or configurable tabs (configurableTabs) - Domains: All URLs used must be listed in
validDomains
Manifest Structure (Excerpt)
{
"id": "your-app-id",
"version": "1.0.0",
"manifestVersion": "1.16",
"name": { "short": "App Name", "full": "Full App Name" },
"description": { "short": "...", "full": "..." },
"developer": {
"name": "Your Company",
"websiteUrl": "https://example.com",
"privacyUrl": "https://example.com/privacy",
"termsOfUseUrl": "https://example.com/terms"
},
"icons": { "outline": "outline.png", "color": "color.png" },
"staticTabs": [
{
"entityId": "tab1",
"name": "Tab Name",
"contentUrl": "https://your-domain.com/tab",
"websiteUrl": "https://your-domain.com/tab",
"scopes": ["personal", "groupchat", "team"]
}
],
"validDomains": ["your-domain.com"]
}
Package and hosting overview
The figures below summarize how the manifest, tab URLs, and the Sparks shell fit together.
Package contents: manifest.json, icons, and HTTPS tab web content; the manifest ties staticTabs / configurableTabs to validDomains.
Sparks loads the tab in a sandboxed iframe; call microsoftTeams.app.initialize() in that context, as in Teams.
Key Adaptations
| Aspect | Note |
|---|---|
| Teams JavaScript SDK | Sparks uses compatible hosting. Call microsoftTeams.app.initialize() after the page loads. |
| contentUrl / websiteUrl | Must use HTTPS and be listed in validDomains. |
| Scopes | personal, groupchat, team – Sparks supports these contexts. |
| iframe sandbox | Tabs run in iframes; no native plugins. |
Microsoft Documentation (Original)
- Build tabs for Teams – Tabs overview
- App manifest schema for Microsoft Teams – Manifest schema
- Create a personal tab – Static tabs
- Create a channel or group tab – Configurable tabs
- Teams JavaScript client library – SDK reference
- Create tab pages (content, configuration, removal) – Content page
Meeting video and background effects (Vistameet-Teams)
For work on the Vistameet-Teams client repository:
| Topic | Note |
|---|---|
@livekit/track-processors | Blur and virtual background. In-repo: ^0.7.2; npm latest checked 0.7.2 (before bumps run npm view @livekit/track-processors version). Exact pins: root package.json (also livekit-client, etc.). |
| Stopping the processor | Remove background effects cleanly: LocalVideoTrack.stopProcessor() (LiveKit). Without it, the camera preview may stay frozen after turning blur/virtual background off. |
User-facing docs: Join Meeting.