@magicpatterns/helix-shadcn-demo

This is an example design system package showing off:

• A custom NPM package being bundled and consumed by Magic Patterns
• A custom MCP server that exposes existing Storybook files + custom guidelines

This is an opinionated set up for what we've seen working well in terms of production codebases + external AI agents. The two important pieces here are:

Context on Component Usage: Context and examples on how an agent should use your custom design system. The more the better! The implementation in this example is a custom MCP server, but there are many ways to go about this. Other solutions include:

• Directly leveraging Storybook's MCP Server add-on
• Parsing the NPM package when context is bundled in to skip needing to host a MCP server

NPM Package: This helps Magic Patterns use the exact same components your production web app might be using. It also helps the code be more "production-ready", in that it'll be using the same exact props / composition as you would find in the codebase. Magic Patterns uses this to render the preview of a prototype in a Vite app.

Demo Codebase Overview

/guidelines
  # Inside here, you can put .md files that will be automatically exposed as context in the MCP
  # You can put anything in here including product context!
/mcp
  # This is where the MCP server lives
  # This MCP server actually scrapes the rest of the codebase to find stories and guidelines and exposes it in a toolset described in MP_DS_MCP_SPEC.md
/recipes
  # This is where extra resources on how to compose components, common layout patterns, and otherwise important documentation on how components should be used lives
/src
  # Where the design system components live

Running the demo

The MCP is automatically hosted on Render. Any changes pushed to main will automatically deploy to Render in 5-10 minutes. The MCP currently is designed to automatically parse stories in the codebase to use as context. For example, if you create a new component with a story, the MCP when deployed will automatically include that information.