SpritesAdd Sprites to GitHub Copilot
Available on Copilot in VS Code, and Copilot CLI. Any Copilot plan that includes agent mode. You need a Sprites account with Webflow already connected — the connector acts on that connection, so GitHub Copilot never handles a Webflow credential.
Open the MCP configuration
Run MCP: Add Server from the Command Palette and choose Workspace or Global. Workspace writes .vscode/mcp.json, which is worth committing so the team shares the same connector; Global keeps it to you across every project.
VS CodeCommand PaletteMCP: Add ServerWorkspaceAdd Sprites as an HTTP server
The top-level key is servers, not mcpServers, and a remote endpoint needs an explicit type of http. This is the shape VS Code and Copilot share.
.vscode/mcp.json{ "servers": { "sprites": { "type": "http", "url": "https://mcp.sprites.ai/mcp" } } }Authenticate
VS Code shows an Auth action above the server entry once the file is saved. Run it, sign in to Sprites in the browser window that opens, and approve the scopes.
Spriteswants access on behalf of Copilot- Read your connected ad accounts and site data
- Draft campaigns, creatives and pages for your approval
- Apply only the changes you approve
AllowCancelSwitch Copilot Chat to agent mode
MCP tools are only offered to the agent. Pick Agent from the mode dropdown in Copilot Chat, then open the tool picker and confirm Sprites is listed.
Agent modeCopilot Chat → mode dropdown
Official Webflow MCP vs Sprites MCP
Webflow runs its own MCP server at mcp.webflow.com/mcp. Here is what each one covers, so you can pick the one that fits in GitHub Copilot — or connect both.
Webflow publishes its own MCP server, first released as open source in March 2025 and now hosted at mcp.webflow.com/mcp with OAuth sign-in. Its design tools work on the site itself — layouts, elements, styles, components, interactions and custom code — and its content tools reach CMS collections and items, pages, SEO, assets, forms and the sitemap. A few canvas actions, such as reading the current selection or breakpoint, need the Designer open with the MCP Bridge App, which installs during sign-in. Each authorization covers one workspace. See Webflow’s own documentation.
| Webflow officialsince 2025 | Sprites MCPapproval-gated | |
|---|---|---|
| Endpoint | mcp.webflow.com/mcp | mcp.sprites.ai/mcp |
| Setup | OAuth sign-in, one workspace per authorization | Site API token and Site ID pasted into Sprites once; the agent never holds them |
| The canvas | Layouts, elements, styles, components and interactions | Not touched — text on existing elements only |
| Deciding what to write | Writes what the model asks for | Keyword research, Search Console and a read of your pages first |
| Writes | Design and content, applied when the tool is called | An approval card with before and after, then read back from Webflow and verified |
| Copy edits | Whatever text the model sends | Built from the page as read in the same conversation, so Designer edits are not reverted |
| Other channels | Webflow | Webflow plus Search Console, GA4, Google Ads, Meta and more |
If you want an agent to build or restyle pages, Webflow’s own server is the right tool; Sprites does not touch design. Use Sprites when the job is search: what to write, which page to fix, and a change you can read before it lands on your site.
Why run Webflow ads through Sprites
GitHub Copilot is the interface; the connector decides what it can see and what it is allowed to do. Six things change when that connector is Sprites.
Search Console and the site, in one conversation
Sprites reads the queries a page gets impressions for before it rewrites that page’s title, and the posts that already rank before it writes a new one. A Webflow-only connector has neither.
SEO over MCPIt researches before it writes
Keyword volume, difficulty and the pages that currently rank are pulled first, so the post it drafts into your collection targets something you can actually win.
Every write is a diff, then a check
Each change is an approval card with its before and after. After it applies, Sprites reads the record back from Webflow and confirms it matches what you approved.
Scoped to one site, held by Sprites
Webflow is connected with a site API token limited to CMS, Pages and Assets. The token lives in Sprites; Claude or ChatGPT only ever talks to the Sprites endpoint.
Run the first prompt
Ask GitHub Copilot this. It routes to a Sprites door, which reads your Webflow account and answers — no account to name, no confirmation to give first.
- With Sprites, write a post on "webflow vs framer for seo" and add it to our Webflow blog collection as a draft.
- Ask Sprites which Webflow pages have missing or duplicate meta descriptions, and propose new ones.
- Use Sprites to rewrite the SEO title and meta description on our /pricing page.
- Have Sprites find the Webflow blog posts that lost position in the last 28 days and refresh the weakest one.
- With Sprites, update the hero headline on our /features page to lead with the outcome, not the feature.
Open the Copilot Chat tool picker in agent mode; Sprites appears with its tools, each one toggleable.
Running Webflow from GitHub Copilot
The jobs people hand over first, start to finish: what you type, what Sprites does with it, and what comes back to approve.
The metadata sweep
You, in GitHub CopilotWith Sprites, find every Webflow page with a missing or overlong meta description and fix them.
- Sprites does
- Lists your pages, checks titles and descriptions against search-result limits, and reads Search Console for what each page already ranks for.
- You get back
- One approval card per page, with the current and proposed fields side by side.
Post into the CMS
You, in GitHub CopilotAsk Sprites to write a post on "webflow localization seo" and add it to our blog collection.
- Sprites does
- Researches the keyword, reads what ranks, writes the post and maps it onto your collection’s fields.
- You get back
- A draft CMS item. Publishing it is a separate approval.
Refresh a slipping page
You, in GitHub CopilotUse Sprites to find the blog post that lost the most clicks this month and refresh it.
- Sprites does
- Compares Search Console periods, picks the post, re-reads it and the pages now outranking it.
- You get back
- An updated item with the changed fields shown before and after, ready to approve.
What GitHub Copilot can do with Webflow
The same doors, whichever client you are in. Marketing data inside the editor where the tracking code lives, so a conversion event can be checked against what GA4 actually recorded before the pull request is opened.
Posts land in your CMS collection
The article is mapped onto your collection’s own fields — name, slug, the rich-text body and the meta fields when the collection has them — and created as a draft item, not pasted into the chat.
Page titles and meta, page by page
Page title, slug, SEO title, meta description and Open Graph title and description, each change shown with its before and after, and the length search results display noted beside it.
Copy edits that do not undo the Designer
A text change is built from the page as it reads now, in the same conversation. An edit drafted from an older copy would quietly revert work done in the Designer since, so Sprites refuses to send one.
Every write is checked after it lands
After an approved change applies, Sprites reads the record back from Webflow and compares it with what you approved, so “done” means the site now says it.
Search Console in the same conversation
Queries you rank 8–20 for, pages that slipped, and the post or metadata change that would close the gap — asked and answered without changing tools.
Going live is its own yes
CMS items are created as drafts. Publishing one is a separate action with its own approval card.
How approvals work here
GitHub Copilot renders tool results as text, so a Webflow change comes back written out rather than as a card. Nothing is applied until you approve it, and the approval waits for you in Sprites — open it there and the same run continues.
What it reads
- Your Webflow pages, CMS collections, their field schemas and items
- Page content, read fresh before any copy edit
- Your asset library
- Search Console queries, impressions, clicks and average position
- Keyword volume, difficulty and what currently ranks
What it can change
- CMS items, created as drafts and published only on a separate approval
- Page titles, slugs, SEO titles, meta descriptions and Open Graph fields
- Text on existing pages, replaced node by node from a same-conversation read
- Assets uploaded from a URL or renamed, and new CMS collections
- Every one of these is an approval card first, and read back from Webflow after
When it does not work in GitHub Copilot
Three things go wrong in this client specifically, and each has a one-line fix.
Sprites is configured but Copilot never uses it.
Chat is not in agent mode. Ask mode does not call MCP tools at all.
The config is ignored.
The top-level key is servers. mcpServers is the shape other clients use and VS Code does not read it.
Teammates do not see the connector.
It was added Globally rather than to the Workspace. Move it to .vscode/mcp.json and commit that file; each person still signs in as themselves.
And on the Webflow side
Sprites says no Webflow Site ID is available.
Reconnect Webflow in Sprites and paste the Site ID from Site settings → General alongside the token.
Webflow rejects a write with a permissions error.
The site API token needs read and write access to CMS, Pages and Assets. Generate a new token with those scopes in Webflow and reconnect.
The new post is in the CMS but not on the live site.
Items are created as drafts on purpose. Ask Sprites to publish it, and approve the publish card.
Webflow and GitHub Copilot: questions
Which URL do I paste into GitHub Copilot?
https://mcp.sprites.ai/mcp. There is one endpoint and every client uses it — every OAuth grant is bound to exactly that address, so a variant of it will not be honoured.
Can GitHub Copilot change my Webflow account without asking?
GitHub Copilot renders tool results as text, so a Webflow change comes back written out rather than as a card. Nothing is applied until you approve it, and the approval waits for you in Sprites — open it there and the same run continues.
Do I need a Webflow API key or developer token?
No. Webflow is connected once inside Sprites through Webflow (a site API token with CMS, Pages and Assets access), and the connector acts on that connection. GitHub Copilot never sees a credential for it.
Why GitHub Copilot for Webflow specifically?
Marketing data inside the editor where the tracking code lives, so a conversion event can be checked against what GA4 actually recorded before the pull request is opened.
Is there an official Webflow MCP server?
Yes. Webflow runs its own MCP server at mcp.webflow.com/mcp, signed in with OAuth, one workspace per authorization. It reaches site design — elements, styles, components, interactions and custom code — and content: CMS collections and items, pages, SEO, assets, forms and the sitemap. A few canvas actions need the Webflow Designer open. Sprites is a separate server that decides what to write before it writes it.
What is the difference between Webflow’s server and Sprites?
Webflow’s server gives an agent Webflow’s controls, including the canvas, which Sprites does not touch. Sprites brings the SEO side: keyword research, Search Console and a read of your existing pages before it writes, then every change as an approval card that is checked against Webflow after it applies.
Keep going
The same GitHub Copilot connector reaches every other channel — nothing else to add.
Webflow, from GitHub Copilot
Paste one URL, sign in once, and the next Webflow question you ask GitHub Copilot gets answered from the live account.