In this lesson we'll go from design editor to production code installed in a hero section in just a few moments, using the Shaders MCP. We'll cover installing the MCP from scratch, authenticating, and how to prompt for the MCP to install your shader correctly.
What's covered in this lesson
- Installing the Shaders MCP from scratch
- Authenticating the MCP with your Shaders account
- Prompting your AI assistant to install a shader into your project
- Going from a finished design to a working hero section in moments
Key concept
The MCP connects your AI coding assistant directly to your Shaders account. Instead of exporting code and wiring it up by hand, you can simply ask your assistant to install a shader, and it lands in your project correctly configured.
Next steps
That wraps up the design editor basics. I'd encourage you to explore the rest of the Shaders design editor, try out different components, and have fun shipping magic. If you're ready for more, check out the component spotlights, starting with shape effects and turning your SVG artwork into liquid glass, metal, and more.
