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://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

RUNBOOK.md

UI Toolkit 5-Minute Preflight Runbook

Use this before deep debugging. It catches the most common UI Toolkit failures quickly.

Skill Doc Standard Note

  • Agent-skill standard entrypoint is SKILL.md.

  • This runbook is an operational convention (recommended), not a required skill file.

  • SKILL.md is also a navigation convention for larger skill docs.

1) Confirm Token Source

  • UI Toolkit still needs Video SDK JWT.

  • Generate JWT server-side only (never expose SDK secret client-side).

2) Confirm Basic Config

  • videoSDKJWT, sessionName, userName must be present.

  • Verify enabled features match your expected UI behavior.

3) Confirm Framework Constraints

  • Validate your installed package peer dependencies (React version mismatch is common).

  • In SSR frameworks, load toolkit client-side and clean up on unmount.

4) Confirm CSS and Lifecycle

  • Ensure toolkit CSS is loaded.

  • Call closeSession/destroy on teardown to avoid stale UI state.

5) Confirm Deployment Paths

  • In basePath/subpath deployments, verify API route URLs and asset paths.

  • If API returns HTML instead of JSON, re-check route mapping/proxy.

6) Quick Probes

  • Token endpoint returns JSON token.

  • joinSession succeeds and session events fire.

  • Closing session cleans up container without errors.

Copy/Paste Validation Commands
# 1) Verify token endpoint responds with JSON
curl -sS -i "$UI_TOOLKIT_BASE_URL/api/token"

# 2) Verify app route is reachable
curl -sS -i "$UI_TOOLKIT_BASE_URL"

Expected: valid JSON for token endpoint and valid HTML for app route.

7) Fast Decision Tree

  • Session won't join -> invalid/missing JWT or bad session config.

  • UI partially broken -> missing CSS or unsupported feature config.

  • Works local, fails prod -> basePath/proxy mismatch.

8) SDK Selection Guardrail

  • Use UI Toolkit for low-code prebuilt Video SDK UI.

  • Use raw Video SDK for full custom rendering and control.

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