Build Zoom Video SDK App

From the author

Use when using Video SDK.

— the description by Zoom

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured workflow for developers building custom video applications. It emphasizes the distinction between the Video SDK and the Meeting SDK, focusing on app-owned user experiences, server-side authentication via JWTs, and the session lifecycle. It covers platform selection, secure token generation, and implementation steps for media and session management.

What it does

Guides developers through the Video SDK integration lifecycle.
Provides patterns for secure server-side JWT signature generation.
Defines the session creation process based on topic strings.
Outlines the role-based access control for hosts and participants.
Offers troubleshooting steps for common SDK integration issues.
Supports multiple platforms including web, mobile, and desktop.

When to use it

When building a custom video experience with a unique UI.
When you need full control over the session lifecycle and media.
When implementing video features that do not require standard Zoom meeting controls.
When setting up server-side authentication for video sessions.

Advantages

Enables fully branded, custom-built video interfaces.
Decouples session management from standard Zoom meeting workflows.
Ensures security by mandating server-side token generation.
Provides a clear path for scaling from basic connectivity to advanced media features.

Usage examples

“How do I authenticate a user for a Video SDK session?”: The agent explains the JWT structure, provides a Node.js example for generating a signature server-side, and emphasizes keeping the SDK Secret secure.
“What is the difference between a host and a participant in the Video SDK?”: The agent clarifies that roles are defined by the role_type claim in the JWT, with role 1 acting as host/co-host and role 0 as a participant.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/openai/build-zoom-video-sdk-app/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip build-zoom-video-sdk-app.zip -d .agents/skills

Documentation by Zoom

Use this skill when the user needs a custom video session rather than a real Zoom meeting. If the user needs meeting numbers, waiting rooms, hosts, or normal Zoom meeting controls, route to Meeting SDK.

Workflow

Confirm product fit: Video SDK is for custom sessions with app-owned UX and lifecycle.
Choose the target platform: web, Android, iOS, macOS, Windows, Linux, Flutter, React Native, Unity, or UI Toolkit.
Validate auth: generate Video SDK session tokens server-side and keep SDK credentials out of client code.
Implement join, media permissions, audio/video publish-subscribe, screen share, chat, and leave before advanced media features.
Add custom layouts, raw media, recording, live transcription, or storage integrations only after the session lifecycle is stable.
Debug by isolating token generation, SDK version, browser isolation, platform permissions, media device behavior, and entitlement limits.

References

Full preserved guide: references/full-guide.md
Web: web/SKILL.md
Android: android/SKILL.md
iOS: ios/SKILL.md
Windows: windows/SKILL.md
Linux: linux/SKILL.md
UI Toolkit: ../ui-toolkit/SKILL.md
Session lifecycle: references/session-lifecycle.md

Files

ATTRIBUTION.mdAdded by AutoGineer880 B
LICENSELicence file added by AutoGineer1.1 KiB
RUNBOOK.md2.4 KiB
SKILL.md1.5 KiB
agents/openai.yaml142 B
references/authorization.md3.9 KiB
references/environment-variables.md1.3 KiB
references/forum-top-questions.md1.9 KiB
references/full-guide.md13.2 KiB
references/licensing-and-entitlements.md759 B
references/session-lifecycle.md958 B
references/token-contract-test-spec.md1.6 KiB
references/triage-intake.md1.2 KiB
references/troubleshooting.md1.8 KiB
references/ui-toolkit.md5.6 KiB

references/ui-toolkit.md

Video SDK UI Toolkit

Pre-built, low-code video chat UI powered by Zoom Video SDK.

Overview

The Video SDK UI Toolkit provides ready-to-use video components so you don't have to build the UI from scratch. Available for Web, iOS, and Android.

Platform Availability

Platform	UI Toolkit	Package/Repo
Web	Yes	`@zoom/videosdk-zoom-ui-toolkit`
iOS	Yes	zoom/videosdk-zoom-ui-toolkit-ios
Android	Yes	zoom/videosdk-uitoolkit-android-sample
React Native	No	Use SDK + custom UI
Flutter	No	Use SDK + custom UI

Web Installation

npm

npm install @zoom/videosdk-zoom-ui-toolkit --save

import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";

CDN

<link rel="stylesheet" href="https://source.zoom.us/uitoolkit/2.3.5/videosdk-zoom-ui-toolkit.css" />
<script src="https://source.zoom.us/uitoolkit/2.3.5/videosdk-zoom-ui-toolkit.min.umd.js"></script>
<script>
  const uitoolkit = window.UIToolkit;
</script>

Angular

Add CSS to angular.json:

"styles": [
  "node_modules/@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css"
]

Quick Start

<div id="sessionContainer"></div>

import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";

const config = {
  videoSDKJWT: "your-jwt-token",
  sessionName: "SessionA",
  userName: "UserA",
  sessionPasscode: "abc123",
  featuresOptions: {
    preview: true,
    video: true,
    audio: true,
    share: true,
    chat: true,
    users: true,
    settings: true,
    leave: true,
  },
};

const sessionContainer = document.getElementById("sessionContainer");
uitoolkit.joinSession(sessionContainer, config);

Feature Components

Toggle components on/off via featuresOptions:

Component	Description	Paid Plan?
`preview`	Pre-session device selection, virtual background	No
`video`	Video layout for sending/receiving	No
`audio`	Audio button and controls	No
`share`	Screen sharing	No
`chat`	In-session chat	No
`users`	Participant list	No
`settings`	Device config, virtual background, stats	No
`viewMode`	Grid/speaker view options	No
`leave`	Leave/end session button	No
`invite`	Invite via link	No
`theme`	Theme color selection	No
`feedback`	Session feedback form	No
`troubleshoot`	Zoom Probe SDK troubleshooting	No
`subsession`	Breakout rooms button	No
`playback`	Media file playback	No
`recording`	Cloud recording	Yes
`phone`	Join by phone audio	Yes
`caption`	Live translations	Yes

React Example

import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit";
import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";
import { useEffect, useRef } from "react";

function VideoSession({ jwt, sessionName, userName }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const config = {
      videoSDKJWT: jwt,
      sessionName,
      userName,
      sessionPasscode: "abc123",
      featuresOptions: {
        video: true,
        audio: true,
        chat: true,
        users: true,
        leave: true,
      },
    };

    if (containerRef.current) {
      uitoolkit.joinSession(containerRef.current, config);
    }

    return () => {
      if (containerRef.current) {
        uitoolkit.closeSession(containerRef.current);
      }
    };
  }, [jwt, sessionName, userName]);

  return <div ref={containerRef} style={{ height: '600px' }} />;
}

Event Listeners

// Session events
uitoolkit.onSessionJoined(() => {
  console.log("Session joined");
});

uitoolkit.onSessionClosed(() => {
  console.log("Session closed");
});

// Unsubscribe
uitoolkit.offSessionJoined(callback);
uitoolkit.offSessionClosed(callback);

Component Visibility Control

// Hide all components
uitoolkit.hideAllComponents();

// Show/hide individual components
uitoolkit.showControlsComponent(container);
uitoolkit.hideControlsComponent(container);

uitoolkit.showChatComponent(container);
uitoolkit.hideChatComponent(container);

uitoolkit.showUsersComponent(container);
uitoolkit.hideUsersComponent(container);

uitoolkit.showSettingsComponent(container);
uitoolkit.hideSettingsComponent(container);

Close Session

uitoolkit.closeSession(sessionContainer);

Live Demo

With SharedArrayBuffer: https://videosdk.dev/uitoolkit/
Without SharedArrayBuffer: https://videosdk.dev/uitoolkit-no-sab/

Sample Repositories

Framework	Repository
React	zoom/videosdk-zoom-ui-toolkit-react-sample
Angular	zoom/videosdk-zoom-ui-toolkit-angular-sample
Vue.js	zoom/videosdk-zoom-ui-toolkit-vuejs-sample
Vanilla JS	zoom/videosdk-zoom-ui-toolkit-javascript-sample

Resources

Official docs: https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/
npm package: https://www.npmjs.com/package/@zoom/videosdk-zoom-ui-toolkit
GitHub: https://github.com/zoom/videosdk-zoom-ui-toolkit-web

Requirements and compatibility

Written for: OpenAI Codex

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement Spec
Matt Pocock· Community
A workflow for implementing technical specifications and tickets using concurrent subagents.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
MCP Builder
AnthropicOfficial
A comprehensive guide for building high-quality Model Context Protocol (MCP) servers to integrate external services with LLMs.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository188.6k
Schema
Corey Haines· Community
Expert guidance for implementing and optimizing JSON-LD schema markup to improve search engine content understanding.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository59k
Postgresql Table Design
Seth Hobson· Community
A comprehensive guide for designing, reviewing, and optimizing PostgreSQL database schemas.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
SQL Optimization Patterns
Seth Hobson· Community
A comprehensive guide to optimizing SQL database performance through indexing, query plan analysis, and efficient coding patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
API Scaffolding Fastapi Pro
Seth Hobson· Community
An expert FastAPI developer focused on high-performance, async-first API architecture and production-ready microservices.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download build-zoom-video-sdk-app.zip