Building Web Apps for Meta Ray-Ban Display Glasses

Developers have been experimenting and building hands-free experiences on Meta AI glasses using camera, audio, and voice. Now, there's a way to present information visually, directly in the moment. This guide will help you build Web Apps optimized for the display, input, and device capabilities of Meta Ray-Ban Display glasses (MRBD).

What You Can Build

Web Apps open up new possibilities for wearable experiences:

• 1Information overlays — Contextual data displayed right when you need it
• 2Real-time data displays — Live scores, status updates, and notifications
• 3Micro-apps and utilities — Quick tools for everyday tasks
• 4Experimental interactions — New ways to interact with digital content
• 5Streaming media — Audio and visual content delivery

What Are Web Apps?

Web Apps are standard HTML/CSS/JavaScript applications rendered on Meta Ray-Ban Display (MRBD) glasses — an easy and familiar way to build experiences for the glasses, especially with AI-assisted coding tools. They run in a constrained environment optimized for the wearable form factor.

Setup: Install AI Skills

The fastest way to get started is with the Meta Wearables Web App AI Toolkit. It contains plugins for Claude Code, Codex, Cursor, and GitHub Copilot.

Option A — Plugin Marketplace (Recommended)

For Claude Code:

# Add the marketplace (one-time)
/plugin marketplace add https://github.com/facebookincubator/meta-wearables-webapp

# Install the plugin
/plugin install meta-wearables-webapp@meta-wearables

# Update plugin
/plugin marketplace update meta-wearables && /plugin update meta-wearables-webapp@meta-wearables

For Codex CLI:

# Add the marketplace (one-time, run in your terminal)
codex plugin marketplace add https://github.com/facebookincubator/meta-wearables-webapp

# Install the plugin (run in your terminal)
# Start Codex, and type /plugins → tab to [Meta Wearables] → install.

# Update plugin
# Refresh the marketplace source
codex plugin marketplace upgrade meta-wearables
# Then inside Codex: go to /plugins — if a newer version is available, select the option to update.

Option B — Install Script (All Tools)

# Clone this repo and install for your preferred tool
git clone https://github.com/facebookincubator/meta-wearables-webapp.git

./install-skills.sh claude      # Claude Code
./install-skills.sh cursor      # Cursor
./install-skills.sh copilot     # GitHub Copilot
./install-skills.sh all         # All tools + AGENTS.md

# Or remote install (no clone needed)
curl -sL https://raw.githubusercontent.com/facebookincubator/meta-wearables-webapp/main/install-skills.sh | bash

Build Your Web App

Once you have the AI skills installed, building is as simple as describing what you want. Open your project in an AI-assisted editor and prompt:

The AI will scaffold the basic files following the display glasses design system:

index.html    # Main HTML structure
styles.css    # Styling for 600x600 viewport
app.js        # JavaScript logic and D-pad handling

Design Constraints

All content should render within a fixed 600 x 600 pixel viewport and avoid scrolling. Include these essential elements:

<meta name="viewport" content="width=600, height=600, initial-scale=1, maximum-scale=1, user-scalable=no">

Set overflow: hidden on the body element to ensure no content extends beyond the viewport boundary:

body {
  overflow: hidden;
  width: 600px;
  height: 600px;
}

Navigation with D-Pad

Glasses are controlled via a D-pad (up, down, left, right, and select). Add the .focusable class to interactive elements:

<button class="focusable">Select me</button>
<div class="focusable menu-item">Menu Option</div>

AI-Assisted Skills Included

• create-webapp

  Scaffold a new Web App

• add-screen

  Add a new screen

• add-button

  Add focusable buttons

• connect-api

  Connect external APIs

• add-sensors

  Access device sensors (geolocation, IMU)

Test in Browser

Your Web App will run on any browser, like on your computer or mobile phone. If it works on your computer with up/down/left/right arrow keys and Enter, it should also work on your glasses.

Local Development

Start your web app locally however your project requires:

# Option 1: Open index.html directly
open index.html

# Option 2: Run a dev server
npm run dev

# Option 3: Use Python's simple server
python -m http.server 8000

Chrome DevTools Setup

If you use Chrome debugging tools, set the viewport to 600 x 600 px to match the glasses display:

1. Open Chrome DevTools (F12)
2. Click the device toolbar (phone icon) or press Ctrl+Shift+M
3. Set dimensions to 600 x 600
4. Test with arrow keys to simulate D-pad input

Testing Sensors

To test sensor data like geolocation or IMU sensors:

1. Open Chrome DevTools (F12)
2. Click the ⋮ (three-dot menu) in the top-right of DevTools
3. Go to More tools → Sensors
4. Override Location with custom latitude/longitude and change Orientation as needed

Deploy to Glasses

Your web app must be hosted at a publicly available HTTPS URL. The toolkit supports deploying to Vercel, but any hosting provider works as long as the result is publicly accessible.

Option A — QR Code (Recommended)

Use the plugin's publish skill to generate a QR code. Scan it with your phone to deep link directly into the Meta AI app and add the web app to your glasses.

Option B — Manual Setup

1. Open the Meta AI app on your phone
2. Go to Devices → Display Glasses settings
3. Navigate to App connections → Web apps
4. Tap Add a web app
5. Enter the app name and your deployed URL

Sharing with Others

After testing your Web App, you can easily share it with other users. In the Meta AI app, go back to App Settings → App connections → Web apps, then share the app details.

AI-Assisted Development

The AI toolkit makes building for glasses remarkably fast. Skills are authored once and distributed across multiple AI coding tools:

Also supported: Gemini CLI, Windsurf, and Devin via AGENTS.md

Example Apps

The toolkit includes example applications in the examples/ directory:

Resources & Next Steps