Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/thePrnvBot/dispel-web-stylist/llms.txt

Use this file to discover all available pages before exploring further.

By the end of this guide you will have Dispel installed in your browser, connected to an AI provider of your choice, and you will have applied a live CSS transformation to a real webpage — all without writing a single CSS rule by hand. The whole process takes about five minutes.
1

Install the Extension

Install Dispel from the store that matches your browser:

Chrome Web Store

For Chrome, Edge, Brave, Arc, and all other Chromium-based browsers.

Firefox Add-ons

For Firefox 142.0 and later. The side-panel API is required.
After installation, Dispel opens a welcome page automatically. The Dispel icon (D) appears in your browser toolbar, ready to use.Once installed, you can open the Dispel side panel at any time using the keyboard shortcut Ctrl+Shift+Y (or your browser’s custom key binding for the toggle-sidebar command).
2

Open the Side Panel

Click the Dispel icon in your browser toolbar, or press Ctrl+Shift+Y, to open the side panel. The panel slides in on the right side of the browser window and stays docked while you browse.If this is your first time opening Dispel, the panel prompts you to add an API key before you can generate styles. Continue to the next step to configure a provider.
3

Add an API Key

Click the Settings icon inside the Dispel side panel and enter an API key for at least one of the supported providers. Dispel needs a key to send your prompts to the AI model that generates the CSS.
ProviderDefault Base URLAPI Key Required
OpenAIhttps://api.openai.com/v1Yes
Anthropichttps://api.anthropic.com/v1Yes
Googlehttps://generativelanguage.googleapis.com/v1betaYes
OpenRouterhttps://openrouter.ai/api/v1Yes
Localhttp://localhost:11434/v1 (Ollama default)No
After saving your key, select the model you want to use from the model picker. You can add keys for multiple providers and switch between them at any time.
Local models served via Ollama, vLLM, LiteLLM, or any other OpenAI-compatible server do not require an API key. Set the base URL to your local server address and leave the key field blank.
4

Write a Prompt

Navigate to any webpage you want to restyle, then type a description of the change you want into the Dispel prompt input and press Enter (or click Send).Here are a few prompts taken directly from the README to get you started:
make all headings bold with a blue underline

give this page a dark theme with rounded cards

increase the font size of body text to 18px and add more line height
As soon as the model begins responding, you will see CSS stream into the page live. Each turn builds on the previous one, so you can keep refining with follow-up prompts — for example, “make the underline thinner” or “use indigo instead of blue” — until the result is exactly right.
Use the element picker (the cursor icon in the toolbar) to click directly on any element on the page before submitting your prompt. Dispel captures the element’s sanitized HTML and passes it to the model, which lets the model generate pinpoint-accurate selectors for that exact element rather than guessing from the full-page HTML.
5

Save Your Styles

When you are happy with the result, click the Save button in the side panel. Saving does two things:
  1. The prompt (and the CSS it generated) is added to the prompt history for this site, where you can browse, toggle on or off, edit, or delete it at any time.
  2. The saved CSS is reapplied automatically the next time you visit the same page, so your styling persists across sessions without any extra steps.
If you want to discard a draft without saving, click Discard to clear the current session and start fresh.

Build docs developers (and LLMs) love

Get started for freeTalk to us