Bolt.new launches Shaders MCP connector for animated WebGPU backgrounds
Bolt.new has released a Shaders MCP connector that lets users add animated WebGPU backgrounds and visual effects to projects via natural-language prompts, without writing custom graphics code.
Score breakdown
Bolt.new users can now add production-ready animated WebGPU visual effects to their projects through natural-language prompts alone, bypassing the need to write custom shader code.
- 01Bolt.new has released a Shaders MCP connector for adding animated WebGPU backgrounds to projects.
- 02The connector integrates Shaders, described as a component library for creative WebGPU effects including glass wave distortion, linear gradients, and mouse interactivity.
- 03Users can prompt the Bolt agent to generate shader backgrounds and add live parameter control panels to fine-tune visuals.
Bolt.new has introduced a Shaders MCP connector, announced in a tutorial published by the Bolt.new channel on April 22, 2026. The connector integrates Shaders — described as a component library for creative WebGPU effects — directly into the Bolt environment, allowing users to add animated backgrounds such as glass wave distortion, linear gradients, and mouse-interactive effects to hero sections, cards, and other components through natural-language prompts rather than custom graphics code.
The tutorial walks through two main workflows. In the first, a user prompts the agent to create a wavy, moving hero background using the Shaders MCP connector, then adds a right-side control panel with adjustable parameters (demonstrated with presets named Deep Signal, Calm Tide, and Aurora) to fine-tune the shader's appearance live in the browser. In the second, the user browses the Shaders preset library — which contains over 550 presets — selects a stainless steel effect, customizes it in the Shaders editor by importing a custom SVG (a Bolt logo), and brings it into the project either by copying the exported React code or by referencing the saved Shader project directly through the connector.
The tutorial also covers a correction step: when the agent initially referenced an incorrect SVG URL from the Shaders user file upload section, a follow-up prompt instructed it to upload the correct SVG to the project's assets and use that instead. Using the Shaders connector requires a Shaders pro account, priced at $15/month, $120/year, or $200 for a lifetime license.
Key facts
- 01Bolt.new has released a Shaders MCP connector for adding animated WebGPU backgrounds to projects.
- 02The connector integrates Shaders, described as a component library for creative WebGPU effects including glass wave distortion, linear gradients, and mouse interactivity.
- 03Users can prompt the Bolt agent to generate shader backgrounds and add live parameter control panels to fine-tune visuals.
- 04The Shaders preset library contains over 550 presets that can be customized in the Shaders editor.
- 05Custom SVGs can be imported into the Shaders editor and applied as shader shapes.
- 06Shaders can be brought into Bolt either by exporting React code from the editor or by referencing saved Shader projects through the MCP connector.
- 07A Shaders pro license is required: $15/month, $120/year, or $200 lifetime.