Use when you have a written implementation plan to execute in a separate session with review checkpoints
npx skills add tanchunsiong/agent-skills --skill "zoom-rivet"
Install specific skill from multi-skill repository
# Description
|
# SKILL.md
name: zoom-rivet
description: |
Zoom Rivet development toolkit guide. Covers the CLI tool for creating, developing, testing,
and deploying Zoom Apps. Use when scaffolding new Zoom Apps, running local development
servers, or managing app deployment workflows.
Zoom Rivet Toolkit
The official CLI and development toolkit for building Zoom Apps faster.
Overview
Zoom Rivet provides:
- Project scaffolding with templates
- Local development server with hot reload
- OAuth and authentication helpers
- Testing and debugging tools
- Deployment automation
- SDK integration setup
Key Features
| Feature | Description |
|---|---|
| Project Templates | Scaffold React, Next.js, or vanilla JS apps |
| Dev Server | Local server with Zoom SDK integration |
| Auth Flow | Built-in OAuth handling |
| Hot Reload | Live updates during development |
| Tunnel | Public URL for local development |
| Deploy | One-command deployment |
Installation
# Install globally
npm install -g @zoom/rivet
# Or use npx
npx @zoom/rivet <command>
Quick Start
Create a New Zoom App
# Interactive project creation
rivet create my-zoom-app
# Or specify template
rivet create my-zoom-app --template react
rivet create my-zoom-app --template nextjs
rivet create my-zoom-app --template vanilla
Start Development Server
cd my-zoom-app
# Start dev server with tunnel
rivet dev
# Output:
# > Development server started at http://localhost:3000
# > Tunnel URL: https://abc123.rivet.zoom.us
# > Configure this URL in your Zoom App settings
Configure Your App
- Go to Zoom App Marketplace
- Create or select your app
- Set redirect URLs to your Rivet tunnel URL
- Copy Client ID and Secret to
.env
CLI Commands
| Command | Description |
|---|---|
rivet create <name> |
Create new Zoom App project |
rivet dev |
Start development server |
rivet build |
Build for production |
rivet deploy |
Deploy to hosting |
rivet auth |
Test OAuth flow |
rivet tunnel |
Start tunnel only |
rivet logs |
View app logs |
Project Templates
React Template
rivet create my-app --template react
Includes:
- React 18 with hooks
- Zoom Apps SDK configured
- TypeScript support
- Tailwind CSS
- Example components
Next.js Template
rivet create my-app --template nextjs
Includes:
- Next.js 14 App Router
- Server-side OAuth handling
- API routes for Zoom APIs
- TypeScript
- Tailwind CSS
Vanilla JavaScript
rivet create my-app --template vanilla
Includes:
- Plain HTML/CSS/JS
- Zoom Apps SDK
- Minimal setup
Configuration
rivet.config.js
module.exports = {
// App settings
name: 'My Zoom App',
clientId: process.env.ZOOM_CLIENT_ID,
clientSecret: process.env.ZOOM_CLIENT_SECRET,
// Development
dev: {
port: 3000,
tunnel: true,
hot: true
},
// Build
build: {
outDir: 'dist',
minify: true
},
// Deploy
deploy: {
provider: 'vercel', // or 'netlify', 'aws'
env: ['ZOOM_CLIENT_ID', 'ZOOM_CLIENT_SECRET']
}
};
Environment Variables
# .env
ZOOM_CLIENT_ID=your_client_id
ZOOM_CLIENT_SECRET=your_client_secret
ZOOM_REDIRECT_URI=https://abc123.rivet.zoom.us/auth/callback
Development Workflow
1. Initialize Project
rivet create my-zoom-app --template nextjs
cd my-zoom-app
2. Configure Credentials
# Copy example env file
cp .env.example .env
# Edit with your Zoom App credentials
3. Start Development
rivet dev
4. Test in Zoom
- Open Zoom Desktop Client
- Go to Apps -> Add Apps
- Search for your development app
- Click to open and test
5. Deploy
rivet build
rivet deploy
SDK Integration
Rivet automatically configures the Zoom Apps SDK:
// The SDK is pre-configured in Rivet projects
import zoomSdk from '@zoom/appssdk';
// Initialize (Rivet handles this)
await zoomSdk.config({
capabilities: ['shareApp', 'getMeetingContext']
});
// Use SDK methods
const context = await zoomSdk.getMeetingContext();
console.log('Meeting ID:', context.meetingID);
OAuth Helpers
Rivet provides built-in OAuth utilities:
// Rivet handles OAuth token exchange
import { getAccessToken, refreshToken } from '@zoom/rivet/auth';
// Get current access token
const token = await getAccessToken(userId);
// Refresh expired token
const newToken = await refreshToken(userId);
// Make authenticated API call
const response = await fetch('https://api.zoom.us/v2/users/me', {
headers: { 'Authorization': `Bearer ${token}` }
});
Debugging
View Logs
# Real-time logs
rivet logs --follow
# Filter by level
rivet logs --level error
Debug OAuth
# Test OAuth flow
rivet auth --test
# Output:
# > Authorization URL: https://zoom.us/oauth/authorize?...
# > Waiting for callback...
# > Token received successfully
# > Access token: eyJ...
Inspect Requests
# Enable request logging
rivet dev --verbose
Prerequisites
- Node.js 18+ - Required runtime
- Zoom Account - Developer account
- Zoom App - Created in Marketplace
- ngrok or Rivet tunnel - For HTTPS development
Common Use Cases
| Use Case | Command | Description |
|---|---|---|
| New Project | rivet create |
Start a new Zoom App |
| Local Testing | rivet dev |
Test with live Zoom |
| Production Build | rivet build |
Optimize for deployment |
| Quick Deploy | rivet deploy |
Ship to hosting |
| Auth Testing | rivet auth --test |
Verify OAuth setup |
Troubleshooting
| Issue | Solution |
|---|---|
| Tunnel not connecting | Check firewall, try rivet tunnel --debug |
| OAuth failing | Verify redirect URIs match exactly |
| SDK not loading | Check CSP headers, use HTTPS |
| Hot reload broken | Restart dev server |
Resources
- Rivet Documentation: https://developers.zoom.us/docs/zoom-apps/zoom-rivet/
- Zoom Apps Guide: https://developers.zoom.us/docs/zoom-apps/
- GitHub Repository: https://github.com/zoom/rivet
- Zoom Apps SDK: https://developers.zoom.us/docs/zoom-apps/js-sdk/
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.