AutoGineer
Generated banner for UI Toolkit
Generated logo for UI Toolkit

UI Toolkit

OpenAIOfficialCreated by ZoomDistributed by OpenAI

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Use when using Zoom UI Toolkit.
— the description by Zoom

AutoGineer summary

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

The Zoom Video SDK UI Toolkit provides a pre-built, framework-agnostic library for embedding video conferencing experiences into web applications. It is designed for developers who need a professional, Zoom-like interface without the overhead of building custom video layouts, participant management, or media controls from scratch. The toolkit supports essential features like chat, screen sharing, and virtual backgrounds, while allowing for theme customization and feature toggling. It requires a server-side JWT generation process to authenticate sessions securely.

What it does

  • Provides a ready-to-use video conferencing UI for web applications.
  • Supports integration with major frameworks like React, Vue, Angular, and Next.js.
  • Includes built-in features such as chat, screen sharing, participant management, and settings.
  • Allows for theme customization and selective feature enabling.
  • Handles session lifecycle events like joining and closing via a simple API.

When to use it

  • When you need to implement a video conferencing solution quickly.
  • When you want a consistent, professional video interface without building custom UI components.
  • When your project requires standard video features like chat and screen sharing.
  • When you are building a custom session using the Zoom Video SDK.

Advantages

  • Significantly reduces development time by eliminating custom UI layout work.
  • Framework-agnostic, ensuring compatibility with various modern web stacks.
  • Maintains a consistent, professional user experience out of the box.
  • Highly configurable, allowing developers to toggle features and apply custom themes.

Usage examples

“How do I initialize the Zoom UI Toolkit in a vanilla JavaScript application?”
The agent provides a code snippet demonstrating how to import the toolkit, define the configuration object with JWT and session details, and call the joinSession method on a DOM container.
“What environment variables are required for the UI Toolkit?”
The agent lists the necessary variables, specifically ZOOM_VIDEO_SDK_KEY and ZOOM_VIDEO_SDK_SECRET, while emphasizing that the secret must remain on the server.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/openai/ui-toolkit/download

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

    mkdir -p .agents/skills && unzip ui-toolkit.zip -d .agents/skills

Documentation by Zoom

Zoom Video SDK UI Toolkit

Use this skill when the user wants a prebuilt web UI for a custom Zoom Video SDK session. If the user needs an actual Zoom meeting, route to build-zoom-meeting-sdk-app instead.

Workflow

  1. Confirm product fit: UI Toolkit is for Video SDK custom sessions, not Meeting SDK joins.

  2. Set up the required Video SDK session credentials and server-side signature generation.

  3. Pick the UI Toolkit integration shape and mount it inside the app shell.

  4. Configure session join, leave, media permissions, chat, captions, recordings, and theming based on product requirements.

  5. Keep custom UI needs explicit; if the user needs deep media layout control, route to build-zoom-video-sdk-app.

  6. Debug browser permissions, cross-origin isolation, token generation, package version mismatch, and unsupported paid features separately.

References

Files

troubleshooting/common-issues.md

Common Issues

Quick diagnostics for Zoom Video SDK UI Toolkit (Web).

CSS Not Loading / UI Looks Unstyled

Fix:

  • Ensure you import the toolkit CSS:

    • @zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css

  • For bundlers, verify CSS handling is enabled (Vite/Next.js).

SSR / Next.js Errors ("window is not defined")

Fix:

  • Load UI Toolkit only on the client (dynamic import in a client component).

Session Doesn't Join

Common causes:

  • Missing/invalid videoSDKJWT

  • Expired JWT

  • Using Meeting SDK credentials/signature instead of Video SDK credentials/JWT

  • Session name/passcode mismatch

Fix:

  • Generate JWT server-side; keep TTL short; check clock skew.

  • Log the join errors surfaced by the toolkit callbacks.

UI Renders Blank / Cropped

Common cause: The container has no height (common in flex layouts).

Fix:

  • Ensure the container has an explicit height (for example height: 100vh).

"I Need Granular UI Components"

Reality: UI Toolkit is optimized for fast, prebuilt UI. It’s not meant to expose every internal tile/control as a first-class primitive.

Fix:

  • If you need fully custom layout, use raw Zoom Video SDK and build your own UI.

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.

Attribution and licence

Created by
Zoom
Publisher
OpenAI (Official)
Distributed by
OpenAI
Source
openai/plugins · plugins/zoom/skills/ui-toolkit · commit d420d13
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from plugins/zoom/LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Zoom or OpenAI.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download ui-toolkit.zip