# How to Deploy Web Apps and Integrate Data Using OpenAI Plugins

> Deploy web apps and integrate Supabase data using OpenAI plugins. Streamline your development with this modular ecosystem, avoiding boilerplate infrastructure.

- Repository: [OpenAI/plugins](https://github.com/openai/plugins)
- Tags: how-to-guide
- Published: 2026-09-10

---

**OpenAI Plugins provide a modular ecosystem of skills, agents, and commands that let you deploy web apps to Vercel or Expo and integrate Supabase databases without writing boilerplate infrastructure.**

The `openai/plugins` repository organizes deployment capabilities into self-contained modules that surface **skills**, **agents**, and **commands** for platforms like Expo, Vercel, Supabase, and Zoom. Each plugin follows a declarative architecture where YAML configurations and Markdown documentation drive an AI gateway to invoke the correct toolchain, allowing you to spin up production-grade web apps and connect managed data stores through natural language interactions.

## Architecture of OpenAI Plugins for Web Deployment

OpenAI Plugins separate concerns into five distinct layers that transform a user prompt into executed infrastructure code.

### Skill Definitions

**Skills** are declarative YAML and Markdown files that describe specific capabilities, such as deploying an Expo web app or querying Supabase Postgres. These files drive the AI gateway to select the appropriate toolchain. Key examples include [`plugins/expo/skills/expo-deployment/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/SKILL.md) and [`plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md).

### Agents

**Agents** are lightweight LLM-driven bots defined in YAML files like [`plugins/expo/skills/expo-deployment/agents/openai.yaml`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/agents/openai.yaml). They orchestrate multi-step workflows by keeping prompts short and encapsulating procedural knowledge, such as installing CLIs, running builds, and pushing artifacts.

### Commands

**Commands** provide slash-style entry points that users invoke from the OpenAI UI. Files like [`plugins/expo/commands/deploy-expo-web.md`](https://github.com/openai/plugins/blob/main/plugins/expo/commands/deploy-expo-web.md) and [`plugins/vercel/commands/vercel-deploy.md`](https://github.com/openai/plugins/blob/main/plugins/vercel/commands/vercel-deploy.md) surface skills to end-users and trigger the corresponding agent.

### Runtime Integrations

**Runtime integrations** are language-specific adapters (Node, Python, Rust) that agents call to perform real work. The skill remains abstract while concrete implementations execute shell commands like `eas-cli` or `vercel` on the host environment. The OpenAI Gateway runs these CLI commands during the workflow.

### Execution Flow

When you request a deployment, the system follows this sequence:

1. **Prompt → Command** – You select a command (e.g., `/deploy-expo-web`).
2. **Command → Agent** – The command route loads the associated agent YAML.
3. **Agent → Skill** – The agent follows step-by-step instructions in the skill Markdown.
4. **Skill → Runtime** – The skill's embedded shell snippets execute on the host via the gateway.
5. **Result → User** – The agent reports success, URLs, and post-deployment artifacts like Supabase connection strings.

## Deploying Web Apps with OpenAI Plugins

You can deploy React and Expo applications using platform-specific CLI tools orchestrated through plugin skills.

### Deploy to Vercel

The Vercel plugin, documented in [`plugins/vercel/vercel.md`](https://github.com/openai/plugins/blob/main/plugins/vercel/vercel.md), exposes CLI commands for preview and production deployments.

```bash

# Install the Vercel CLI (once)

npm i -g vercel

# Deploy a preview (for PRs)

vercel

# Deploy to production (creates a stable URL)

vercel --prod

```

*Reference:* [`plugins/vercel/vercel.md`](https://github.com/openai/plugins/blob/main/plugins/vercel/vercel.md)

### Deploy to Expo EAS Hosting

The Expo deployment skill in [`plugins/expo/skills/expo-deployment/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/SKILL.md) manages the full EAS workflow.

```bash

# 1. Install EAS CLI and log in

npm i -g eas-cli
eas login

# 2. Initialise the project (creates eas.json)

npx eas-cli@latest init

# 3. Build for web

npx expo export -p web

# 4. Deploy to production

npx eas-cli@latest deploy --prod

```

*Reference:* [`plugins/expo/skills/expo-deployment/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/SKILL.md)

## Integrating Data with Supabase

The Supabase plugin provides best practices for connecting Postgres databases to your web frontend, stored in [`plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md).

### Connecting Postgres to Your Frontend

Use the `@supabase/supabase-js` client to fetch data from your deployed web app. Store credentials in environment variables scoped to your deployment platform.

```javascript
import { createClient } from '@supabase/supabase-js'

// Replace with your Supabase URL and anon key (stored in Vercel env vars)
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

// Example: fetch rows from a table called "todos"
async function loadTodos() {
  const { data, error } = await supabase.from('todos').select('*')
  if (error) console.error('Supabase error', error)
  return data
}

```

The skill reference files enumerate required variables like `NEXT_PUBLIC_SUPABASE_URL` and advise on secure storage patterns.

## Embedding Apps in External Platforms

Because each plugin is self-contained, you can embed a Vercel-deployed frontend inside collaboration tools like Zoom.

### Running Inside Zoom

The Zoom Apps SDK skill, documented in [`plugins/zoom/skills/zoom-apps-sdk/references/full-guide.md`](https://github.com/openai/plugins/blob/main/plugins/zoom/skills/zoom-apps-sdk/references/full-guide.md), lets your web app run inside Zoom's embedded browser.

```html
<!-- Include the Zoom Apps SDK -->
<script src="https://source.zoom.us/2.0.0/zoom-apps-sdk.min.js"></script>

<script>
  const client = ZoomAppsSDK.client
  client.initialize().then(() => {
    // Fetch user info from Zoom
    client.auth.getUserInfo().then(info => console.log(info))
  })
</script>

```

This allows hybrid deployments where a Supabase-backed, Vercel-hosted React app operates within a Zoom meeting context.

## Summary

- **OpenAI Plugins** use a five-layer architecture (skills, agents, commands, runtime, references) to turn natural language prompts into executed infrastructure code.
- **Skills** are declarative Markdown files like [`plugins/expo/skills/expo-deployment/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/SKILL.md) that define capabilities and embed CLI commands.
- **Agents** orchestrate multi-step workflows by loading skill definitions and executing runtime commands through the OpenAI Gateway.
- **Commands** such as `/deploy-expo-web` and [`vercel-deploy.md`](https://github.com/openai/plugins/blob/main/vercel-deploy.md) provide slash-style entry points in the OpenAI UI.
- You can mix plugins—deploying a React app to Vercel while connecting it to Supabase Postgres and embedding it in Zoom—because each module remains self-contained.

## Frequently Asked Questions

### What is the deployment flow when using OpenAI Plugins?

The flow follows five steps: you invoke a **Command** (e.g., `/deploy-expo-web`), which loads an **Agent** YAML configuration. The agent reads the **Skill** Markdown instructions, executes **Runtime** shell commands via the OpenAI Gateway (such as `eas-cli` or `vercel`), and returns the result with deployment URLs and connection strings.

### How do I secure database credentials when using Supabase with these plugins?

Store sensitive values like `NEXT_PUBLIC_SUPABASE_ANON_KEY` as environment variables on your hosting platform (Vercel, Expo, etc.). The Supabase skill in [`plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md) explicitly enumerates required variables and documents secure storage patterns, ensuring credentials never appear in client-side code or skill definitions.

### Can I combine multiple plugins like Vercel and Supabase in one project?

Yes. Because each plugin is **self-contained**, you can mix and match capabilities. A common pattern involves deploying a React frontend to Vercel using the Vercel skill while connecting it to a Supabase Postgres backend using the Supabase best-practices skill. The Build Web Apps plugin ([`plugins/build-web-apps/README.md`](https://github.com/openai/plugins/blob/main/plugins/build-web-apps/README.md)) demonstrates this integration by stitching together frontend, Stripe, and Supabase skills.

### Where are the skill definitions stored in the repository?

Skill definitions reside in platform-specific subdirectories under `plugins/`. For example, Expo deployment logic lives in [`plugins/expo/skills/expo-deployment/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/expo/skills/expo-deployment/SKILL.md), Vercel commands are in [`plugins/vercel/vercel.md`](https://github.com/openai/plugins/blob/main/plugins/vercel/vercel.md), and Supabase best practices are documented in [`plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/supabase/skills/supabase-postgres-best-practices/SKILL.md).