Agentic Integration Reference
Connect your AI assistants directly to css-extractor. Supports both standard IDE MCP servers and browser-native WebMCP tools.
1. Standard MCP Server (IDEs & Desktop)
Connect Cursor, VS Code (Cline/Roo Code), or Claude Desktop directly to our hosted server. AI agents can crawl URLs or parse CSS content on your behalf in your coding workspace.
Connection Configuration
Add the following configuration to your client's settings file (e.g. claude_desktop_config.json or Cursor's MCP Settings panel):
Connection Configuration
{
"mcpServers": {
"css-extractor": {
"url": "https://css-extractor.com/api/mcp/sse"
}
}
}Exposed Tools
| Tool Name | Arguments | Description |
|---|---|---|
extract-css |
url (string, required)css (string, optional)
|
Extracts design tokens, colors, typography scales, and CSS variables from a public URL or pasted raw stylesheet rules. Returns a developer-friendly Markdown design system overview. |
2. WebMCP Protocol (Browser-Native)
WebMCP is an early preview browser API enabling browser-native AI sidebars and extensions to discover page capabilities directly from the active tab.
Declarative Form Spec
<form id="extractor-form"
toolname="extract-css"
tooldescription="Extract CSS custom properties, color swatches, typography..."
toolautosubmit>
<input type="url"
name="url"
toolparamdescription="The absolute HTTP or HTTPS URL of the webpage..." />
<textarea name="css"
toolparamdescription="Optional. Raw CSS stylesheet rules to parse..."></textarea>
</form>Agent Submission Capture
extractorForm.addEventListener('submit', (event) => {
if (event.agentInvoked) {
event.preventDefault();
const formData = new FormData(event.target);
const promise = fetch('/api/extract', { ... })
.then(res => res.json())
.then(data => data.exports.markdown);
event.respondWith(promise);
}
});