Extension Guide

The gyoza browser extension is how you interact with the AI copilot. It injects a small widget on every page where you can type questions, receive answers, and let the AI take actions on your behalf.

Installation

Chrome Web Store (recommended)

  1. Visit the gyoza Chrome Web Store listing (coming soon).
  2. Click Add to Chrome.
  3. The gyoza bubble will appear in the bottom-right corner of every page.

Load unpacked (development)

  1. Clone the repository: git clone https://github.com/gyozai/web-copilot
  2. Install dependencies: bun install
  3. Build the extension: bun run --filter @gyoz-ai/extension build
  4. Open chrome://extensions in Chrome.
  5. Enable Developer mode (top-right toggle).
  6. Click Load unpacked and select the packages/extension/.output/chrome-mv3 folder.
  7. The extension is now active.

Firefox & Safari

Firefox and Safari support is built using WXT. Build with the appropriate target (--browser firefox or --browser safari) and load the output as a temporary extension.

Configuring your API key (BYOK)

In BYOK (Bring Your Own Key) mode, the extension calls the LLM provider directly from your browser. No data passes through any proxy server — your API key and conversations stay local.

  1. Click the gyoza bubble to open the widget.
  2. Click the gear icon to open Settings.
  3. Under Provider, select your LLM provider: Claude, OpenAI, or Gemini.
  4. Paste your API key into the API Key field.
  5. Optionally choose a specific model (e.g., claude-sonnet-4-20250514).
  6. Close settings. The extension is ready to use.
Security note: Your API key is stored in chrome.storage.local and never leaves your browser. It is sent directly to the LLM provider's API from the extension's background worker, bypassing any CSP restrictions on the page.

Managed mode

If you don't want to manage your own API key, you can use managed mode. Sign in with your gyoza account and choose a plan (Starter, Pro, or Unlimited). The extension will route requests through the gyoza API proxy, which handles authentication and billing.

  1. Click the gyoza bubble and open Settings.
  2. Under Mode, select Managed.
  3. Click Sign in and authenticate with your account.
  4. Choose a model — the proxy supports Claude, OpenAI, and Gemini.
  5. Start using gyoza. Usage is tracked against your plan tier.

Using the widget

The gyoza widget is a floating bubble in the bottom-right corner of every page. Click it to expand the conversation panel.

Asking questions

Type a question or instruction in the input field and press Enter. Examples:

  • "What is the balance on my account?" — the AI reads the page and answers
  • "Navigate to the deposit page" — the AI clicks or navigates
  • "Fill in the amount field with 5000 and submit" — the AI types and clicks
  • "Translate this page for me" — the AI reads content and responds in your language

Action execution

When the AI responds with actions (navigate, click, type, etc.), they are executed automatically. You'll see each action appear in the conversation with a description of what happened. If YOLO mode is off, the extension will ask for confirmation before executing potentially destructive actions.

Conversation history

The conversation persists in chrome.storage.session for the current browser session. Closing the browser clears the history. The AI has memory of recent messages in the conversation, so you can ask follow-up questions.

Importing recipes

Recipes can be imported in several ways:

  1. From the recipe directory — visit the recipe directory, find a recipe, and click Install. The XML file will be downloaded. Open Settings in the extension and import it.
  2. Manual import — open Settings, click Import Recipe, and select an XML file from your computer.
  3. Paste XML — some interfaces allow pasting raw XML content directly.

Once imported, a recipe is stored in chrome.storage.local and automatically activated when you visit the matching domain. You can manage, view, and delete imported recipes from the Settings panel.

Settings

Access settings by clicking the gear icon in the expanded widget.

Setting Description
Mode Choose between BYOK (your own API key) and Managed (gyoza account).
Provider LLM provider: Claude (Anthropic), OpenAI, or Gemini (Google).
Model Specific model to use (e.g., claude-sonnet-4-20250514, gpt-4o).
API Key Your provider API key (BYOK mode only). Stored locally, never sent to gyoza servers.
YOLO mode When enabled, all actions execute immediately without confirmation prompts. When disabled, the extension asks before executing actions that modify the page.
Theme Widget appearance: auto (matches page), light, or dark.
Recipes View, import, and delete imported recipe manifests.

Keyboard shortcuts

Shortcut Action
Ctrl+Shift+G / Cmd+Shift+G Toggle the gyoza widget open/closed.
Escape Close the widget (when focused).
Enter Send the current message.
Shift+Enter Insert a newline in the input field.
Tip: You can customize the keyboard shortcut in chrome://extensions/shortcuts. Look for "gyoza" and set your preferred key combination.