Vibe Modify

Vibe Modify is a Chrome extension that lets you customize websites with natural language.

The flow is:

1. Open a website.
2. Describe the change you want.
3. The extension sends the rendered HTML plus your request to the selected AI provider.
4. The provider returns JavaScript.
5. The extension runs that JavaScript on the page and saves it for matching URLs.

The extension currently supports:

• Anthropic
• OpenAI
• User-provided API keys stored locally in the extension

There is no backend yet.

Stack

• Chrome Extension MV3
• React 18
• TypeScript strict
• Tailwind 4
• Webpack
• Dexie

Installation

npm install
npm run dev
npm run build

Then load the unpacked extension in Chrome:

1. Open chrome://extensions/
2. Turn on Developer mode
3. Click Load unpacked
4. Select this project's dist/ directory

If you edit source files while npm run dev is running, reload the extension in Chrome.

First Run

When a user opens the extension for the first time, they see onboarding instead of the normal prompt UI.

They save their own Anthropic or OpenAI API key. Shared invite-code keys are intentionally disabled because secrets embedded in a browser extension can be extracted from the bundle.

After successful setup, the extension stores the selected provider and routes the user into the main customization UI.

Using Your Own API Key

Users can configure their own key directly inside the popup.

Supported providers:

• Anthropic
• OpenAI

Provider selection is explicit. Vibe Modify does not silently fall back to another provider during generation. If the selected provider has no key configured, the UI shows an error and points the user back to Settings.

Settings

The popup includes a Settings screen where the user can:

• Change the selected provider
• Save or replace an Anthropic key
• Save or replace an OpenAI key
• Remove stored keys
• Test the selected connection
• Toggle automatic reapply of saved customizations

Stored keys are masked in the UI and are never shown in full after saving.

Models

Default models are centralized in:

src/shared/aiModels.json

Current defaults:

• Anthropic: claude-sonnet-4-6
• OpenAI: gpt-4.1-mini

Optional build-time model overrides can be set in .env:

ANTHROPIC_MODEL=claude-sonnet-4-6
OPENAI_MODEL=gpt-4.1-mini

.env is not used for API keys anymore.

Funnel analytics

The popup uses the official PostHog browser SDK build that does not load external code, which is compatible with Chrome Extension MV3. Configure the same PostHog project used by the landing page:

POSTHOG_PROJECT_TOKEN=phc_...
POSTHOG_HOST=https://us.i.posthog.com
LANDING_PAGE_ORIGIN=https://your-vibe-modify-domain.example

The project token is public. Do not put a PostHog personal API key in the extension. LANDING_PAGE_ORIGIN must exactly match the deployed checkout origin, without a trailing slash; it lets the paid success page hand off the anonymous distinct id and campaign labels to the extension.

Tracked events are install_or_signup_started, install_or_signup_completed, first_modification_started, first_modification_completed, and return_visit. Analytics never includes prompts, page URLs, page HTML, generated scripts, provider API keys, or email addresses.

Storage

Two storage layers are used:

• chrome.storage.local
  • AI provider selection
  • API keys
  • onboarding completion
  • automatic reapply toggle
• IndexedDB via Dexie
  • learned URL templates
  • saved generated scripts

Security Note

This beta intentionally stores API credentials locally inside the extension.

That is acceptable only for trusted private testing.

If shared credits or invite codes are added later, generation and redemption must move behind a backend. Never embed a shared provider key in the extension bundle.

Project Layout

src/
  manifest.json
  Popup.tsx
  background.ts
  content.ts
  styles.css
  popup/
    PromptForm.tsx
    HistoryList.tsx
    OnboardingSetup.tsx
    ProviderSelector.tsx
    SettingsPanel.tsx
  background/
    aiFactory.ts
    aiProvider.ts
    anthropicProvider.ts
    openaiProvider.ts
    injection.ts
    pageContent.ts
  lib/
    database.ts
    htmlStripper.ts
    promptBuilder.ts
    settings.ts
    sandbox.ts
    urlTemplate.ts
  shared/
    ai.ts
    aiModels.json

Development Notes

• chrome.userScripts is still required for CSP-resistant script execution.
• The sandbox shim still blocks cookies, storage, and iframe creation inside USER_SCRIPT world, but it does not block all network egress.

Testing

There are no automated tests yet.

Before shipping changes, run:

npm run typecheck
npm run lint
npm run build

Manual smoke test:

1. Build and load dist/
2. Open the extension and complete onboarding with your own key
3. Open a normal http(s) page
4. Apply a prompt such as Hide the navigation bar
5. Confirm the change applies immediately
6. Reload the page and confirm it reapplies
7. Open Settings and verify provider status, masked keys, and Test Connection