Dispel - AI Web Stylist

Dispel is a browser extension that lets you restyle any webpage by describing what you want in plain English. Type a prompt like "make all headings bold with a blue underline" or "give this page a dark theme with rounded cards" and Dispel generates production-ready CSS that streams into the page live.

Features

• Natural language CSS generation — describe a change, get working CSS back.
• Live preview — styles stream into the page as the model writes them.
• Iterative refinement — drafts accumulate changes turn by turn.
• Element picker — click any element on the page to target it precisely.
• Per-site style memory — your styles reapply automatically on return visits.
• Multi-provider — OpenAI, Anthropic, Google, OpenRouter, and any OpenAI-compatible endpoint (Ollama, vLLM, LiteLLM, etc.).
• Prompt history — browse, edit, toggle, and delete your saved styles.
• Dark / light / system theme — the side panel follows your OS preference.

Install

Browser	Link
Chrome	Chrome Web Store
Firefox	Firefox Add-ons

Quick start

1. Click the Dispel icon in your browser toolbar to open the side panel.
2. Open Settings and add an API key for at least one supported provider.
3. Navigate to any webpage you want to style.
4. Type a prompt describing the change you want.
5. Watch the CSS stream in and apply to the page in real time.
6. Refine with follow-up prompts, or save your work to the prompt store.

Supported providers

Provider	Base URL	Notes
OpenAI	https://api.openai.com/v1	Requires an OpenAI API key.
Anthropic	https://api.anthropic.com/v1	Requires an Anthropic API key.
Google	https://generativelanguage.googleapis.com/v1beta	Requires a Google API key.
OpenRouter	https://openrouter.ai/api/v1	Requires an OpenRouter API key.
Local	http://localhost:11434/v1 (Ollama)	No API key required.

Any provider with an OpenAI-compatible API can be added via a custom base URL.

How it works

• The side panel reads the current tab's URL and viewport.
• When you submit a prompt, the content script extracts the visible HTML of the current viewport, with scripts, hidden elements, and most attributes stripped.
• That HTML, your prompt, and the page context (URL without query string, title, viewport size) are sent to your configured AI provider.
• The provider streams CSS back; Dispel applies it to the page as it arrives.
• Drafts and saved prompts are kept in the extension's local storage. The extension never sends data anywhere except to the provider you configured.

For full details, see PRIVACY.md.

Development

Prerequisites

• Bun 1.3+
• A Chromium- or Firefox-based browser for testing.

Setup

bun install

bun install runs wxt prepare via the postinstall hook to generate .wxt/ types and the manifest.

Dev build

bun run dev          # Chrome
bun run dev:firefox  # Firefox

The dev build opens with hot reload at .output/chrome-mv3-dev/ (or the Firefox equivalent).

Production build

bun run build          # Chrome
bun run build:firefox  # Firefox
bun run zip            # package Chrome for the web store
bun run zip:firefox    # package Firefox for AMO

Lint & typecheck

bun run check    # Biome / ultracite lint + format check
bun run fix      # auto-fix
bun run compile  # tsc --noEmit

Project structure

src/
  entrypoints/   # WXT entrypoints: background, content, options, sidepanel, welcome
  components/    # React UI — custom (project) + ai-elements (vendored) + ui (shadcn)
  stores/        # Zustand stores
  services/      # Cross-cutting workflows (one per user action)
  utils/         # Pure helpers + LLM + storage + content extraction
  hooks/         # React hooks
  platform/      # Chrome/Firefox splits
  lib/           # shadcn cn() helper
  assets/        # styles.css, icons

Contributing

Contributions are welcome. Open an issue to discuss larger changes; for small fixes, send a PR.

Before opening a PR:

• bun run check is clean.
• bun run compile is clean.
• The change is scoped and documented in the PR description.

Security

To report a vulnerability, see SECURITY.md.

License

MIT