Shaders MCP

The agent-native surface of shaders.com: an MCP server that lets an AI agent browse, search, install, customize, and ship production shaders from a curated WebGPU preset library — no manual GLSL, no leaving the editor.

By the Shaders.com team (@npm_i_shaders). The underlying product is detailed in Shaders.com and Shader Effects Libraries; this page covers the agent integrations. Source: shaders.com/docs/guide/mcp, https://shaders.com/docs/guide/mcp, 2026-06-12

Shaders MCP

An MCP (Model Context Protocol) server that connects a coding agent to a shaders.com account so it can create effects directly: Source: shaders.com/docs/guide/mcp, 2026-06-12

• Browse the user's saved shaders and search the full Pro preset library by description or visual effect
• Install + customize — wire up props/uniforms and modify presets without switching context
• OAuth, no API key — most MCP clients add the server URL and sign in (Cursor one-click deeplink provided)
• Requires an active Shaders Pro account before connecting
• Agent context layer — Pro MCP includes a knowledge base with expert implementation notes and preset-specific context so the agent can pick and wire shader effects with less trial-and-error. Source: Shaders MCP docs, 2026-07-01

Launch: 1,039 bookmarks, 943 likes. "Your agent now finds, tweaks, and ships the perfect shader preset; or designs one from scratch." Source: X/@npm_i_shaders, 2026-04-14

Local video review shows the demo path: Claude Code asks for a shader effect on a hero section, the MCP-branded interstitial appears, and the agent completes navbar, hero content, bottom masking, app assembly, and build steps. The durable signal is that shader libraries are becoming agent-callable design assets, not just visual reference galleries. Source: local artifact review, 2026-07-01

Two more agent surfaces

Local video review of the Bolt connector launch shows the durable integration path: a dark Shaders/Bolt promo, the Bolt.new Connectors panel with Shaders connected, and an agent prompt area reading "Let's make some magic." The official docs confirm the connector uses the Shaders MCP backend after the Pro-account login, so route Bolt-site shader requests here rather than treating the tweet as a standalone promo. Source: X/@npm_i_shaders and local contact sheet /tmp/xreview-next15-videos/2046604973589578050-sheet.jpg, reviewed 2026-07-02

Local video review of the <DOMTexture> demo shows the workflow inside a dark Shaders editor: a plain blue panel with "Your HTML content here," a preset picker/grid, side controls, and a rendered surface where the text gets warped by ripple/glass-like shader effects. This makes the integration concrete: Shaders is not merely postprocessing a screenshot; it is exposing DOM content as a texture primitive that can be selected, wrapped, and distorted from the design tool. Source: X/@npm_i_shaders and local contact sheet /tmp/xreview-next12-videos/domtexture-sheet.jpg, reviewed 2026-07-02

The through-line is the agent-native asset library pattern: treat a shader/design library as a tool surface an agent can call (search → install → ship), the same move Paper Design Tool made with MCP and that Shader Effects Libraries documents for the Bolt connector. Source: compiled from X/@npm_i_shaders, 2026-06-12

When to use which

Kevin holds a Shaders Pro license, so the MCP + Bolt connectors are available in his workflows. Source: User, 2026-04-22

---

Timeline

• 2026-07-02 | Deep-reviewed the Shaders x Bolt local video artifact and refreshed the official docs snapshot: Shaders Pro required, https://shaders.com/mcp remains the MCP endpoint, OAuth is primary, API key is fallback, and Bolt.new exposes Shaders through the Connectors panel with no extra config after account login. Source: Shaders MCP docs, 2026-07-02; Source: X/@npm_i_shaders, 2026-04-21
• 2026-07-02 | Deep-reviewed the <DOMTexture> local video artifact and clarified that Shaders wraps literal DOM content into shader-selectable texture surfaces, still Chrome Canary/flag-gated. Source: X/@npm_i_shaders, 2026-04-10
• 2026-06-26 | Split the base product alias to Shaders.com so "shaders.com" routes to the component/effects source and this page stays scoped to MCP/Bolt/DOMTexture agent integrations. Source: User request, 2026-06-26
• 2026-04-10 | Shaders demos html-in-canvas internally — <DOMTexture> wraps HTML in a shader (glass/ascii/dither/ripples on any surface), Chrome Canary + flag only. 982 bookmarks, 1,133 likes; demo video. Source: X/@npm_i_shaders, 2026-04-10
• 2026-04-14 | Shaders MCP launches — OAuth-based, agent searches/installs/customizes presets from shaders.com without leaving the editor. 1,039 bookmarks, 943 likes; demo video. Source: X/@npm_i_shaders, 2026-04-14
• 2026-04-21 | Official Shaders × Bolt connector for Pro users (SHADERS = 20% off Bolt). 66 bookmarks, 85 likes; demo video. Source: X/@npm_i_shaders, 2026-04-21
• 2026-06-12 | Deep enrichment: corrected hallucinated status URLs to the real bookmarks, scoped page to the agent surfaces (MCP/Bolt/DOMTexture), cross-linked Shader Effects Libraries (product detail) and Shader Lab (visual composition). Source: shaders.com/docs/guide/mcp, 2026-06-12
• 2026-07-01 | Artifact review added the local launch thumbnail/video evidence and refreshed the current docs snapshot: OAuth first, API-key fallback for tools without OAuth, Cursor/Bolt support, framework code exports, prop wiring, SVG-to-SDF generation, and Pro implementation notes. Source: Shaders MCP docs, 2026-07-01