Zoom Apps Sdk
Ship a Zoom App that runs in the client WebView with OAuth on your server and `@zoom/appssdk` for meeting context and SDK bridge calls.
Overview
Zoom Apps SDK is an agent skill for the Build phase that explains Zoom App architecture—WebView frontend plus OAuth backend wired through `@zoom/appssdk`.
Install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill zoom-apps-sdkWhat is this skill?
- Two-part model: frontend in Zoom WebView plus backend for OAuth, tokens, and Zoom REST APIs
- Uses `@zoom/appssdk` as the bridge (`config`, meeting context, client capabilities)
- Architecture diagram ties embedded app `fetch('/api/...')` to Express/Node-style backend
- Covers distribution inside Zoom client constraints (embedded browser, not a standalone SPA deploy)
- Pairs official SDK patterns with server-side secret handling for production Zoom marketplace apps
- Two-part architecture: frontend WebView plus backend server
Adoption & trust: 830 installs on skills.sh; 19.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to run a web app inside Zoom with meeting context and APIs, but it is unclear how the embedded frontend, SDK bridge, and server OAuth should connect.
Who is it for?
Solo builders adding a Zoom marketplace or in-meeting app with Node/Express (or similar) and the official Apps SDK.
Skip if: Teams only needing Zoom Meeting REST webhooks with no in-client UI, or Cobrowse screen-share flows (use Zoom Cobrowse SDK instead).
When should I use this skill?
You are implementing or planning a Zoom App with `@zoom/appssdk` and need OAuth/backend architecture.
What do I get? / Deliverables
You get a clear frontend/backend split, SDK initialization patterns, and a server-owned OAuth path so your Zoom App can call your API safely from the client.
- Architecture-aligned Zoom App frontend + API layout
- OAuth and SDK config checklist
Recommended Skills
Journey fit
Zoom Apps are built when you integrate your product into Zoom’s embedded browser and server-side OAuth—not during idea or launch-only work. Canonical shelf is integrations: third-party client (Zoom) + your backend REST/OAuth, not generic frontend polish alone.
How it compares
Architecture and OAuth patterns for Zoom Apps in-client—not generic React SPA hosting or an MCP server.
Common Questions / FAQ
Who is zoom-apps-sdk for?
Indie and solo developers building Zoom Apps: embedded web UI plus a backend that handles OAuth and Zoom API calls.
When should I use zoom-apps-sdk?
During Build when you integrate with Zoom’s client WebView, configure `@zoom/appssdk`, and stand up OAuth/token exchange on your server before marketplace submission.
Is zoom-apps-sdk safe to install?
Treat it as documentation guidance; review the Security Audits panel on this Prism page before trusting the package in production.
SKILL.md
READMESKILL.md - Zoom Apps Sdk
# Zoom Apps Architecture ## Overview A Zoom App is a web application that runs inside the Zoom client's embedded browser. It consists of two parts: - **Frontend**: Your web app loaded inside Zoom (HTML/CSS/JS + `@zoom/appssdk`) - **Backend**: Your server handling OAuth, REST API calls, and business logic The SDK (`@zoom/appssdk`) is the bridge between your frontend and the Zoom client. ## Architecture Diagram ``` ┌─────────────────────────────────────────────────────┐ │ ZOOM CLIENT │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ Embedded Browser (WebView) │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ │ │ YOUR FRONTEND WEB APP │ │ │ │ │ │ │ │ │ │ │ │ import zoomSdk from '@zoom/appssdk' │ │ │ │ │ │ zoomSdk.config({...}) │ │ │ │ │ │ zoomSdk.getMeetingContext() │ │ │ │ │ │ │ │ │ │ │ │ fetch('/api/data') ──────────────────────── YOUR BACKEND │ │ └─────────────────────────────────────────┘ │ │ (Express/Node.js) │ │ │ │ │ - OAuth token exchange │ │ │ SDK Bridge │ │ - REST API calls │ │ ▼ │ │ - Business logic │ │ Zoom Client APIs │ │ - Token storage │ │ (meeting, user, UI) │ │ │ └──────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘ ``` ## Embedded Browser Details Zoom uses different browser engines per platform: | Platform | Browser Engine | Notes | |----------|---------------|-------| | Windows | WebView2 (Chromium) | Modern, good DevTools | | macOS | WKWebView (WebKit) | Safari-like behavior | | iOS | WKWebView | Mobile viewport | | Android | WebView | Mobile viewport | | Some surfaces | CEF (Chromium Embedded) | Camera mode uses this | **Limitations:** - No browser extensions - Limited `window.open` support (use `zoomSdk.openUrl()` instead) - No access to browser-level storage across different apps - CSP must allow `frame-ancestors zoom.us *.zoom.us` - Cookies require `SameSite=None; Secure` ## App Lifecycle ### Initial Install (Web OAuth) ``` User clicks "Add" in Marketplace │ ▼ Browser opens Zoom OAuth page (https://zoom.us/oauth/authorize?client_id=...&code_challenge=...) │ ▼ User clicks "Allow" │ ▼ Zoom redirects to your redirect URI with ?code=... │ ▼ Your backend exchanges code + code_verifier for access_token │ ▼ Backend calls GET /v2/zoomapp/deeplink with access_token │ ▼ Backend redirects user to deeplink URL │ ▼ Zoom client opens, loads your frontend URL in embedded browser │ ▼ Frontend calls zoomSdk.config({...}) │ ▼ App is ready ``` ### Subsequent Opens (In-Client OAuth) ``` User opens your app in Zoom client │ ▼ Zoom loads your frontend URL in embedded browser │ ▼ Frontend calls zoomSdk.config({...}) │ ▼ Frontend calls zoomSdk.authorize({ codeChallenge, state }) │ ▼ User approves in Zoom popup (no browser redirect) │ ▼ onAuthorized event fires with authorization code │ ▼ Frontend sends code to backend │ ▼ Backend exchanges code + code_verifier for tokens │ ▼ App is authorized ``` ## Deep Linking After web-based OAuth, your backend must get a deeplink to open the app in Zoom: ```javascript // After token exchange, get deeplink const response = await fetch('https://api.zoom.us/v2/