๐ฐ Introduction
Note: A quick note before we dive in: the implementation described in this article was carried out in the spring of 2025, nearly a year before I sat down to write about it. The AI ecosystem moves at a breathtaking pace, so some specifics may feel a bit dated by now. That said, I believe the core ideas and approach still hold value, and I hope this article proves useful to at least some of you.
I recently published the following article, which introduces a project I've been working on since March 2023 called "Blazing Story", a Storybook clone fully reimplemented in Blazor (licensed under Mozilla Public License 2.0).
This article is a follow-up to that one. Here, I'll walk you through how I added an MCP server feature to Blazing Story.
For an introduction to Storybook, Blazor, and Blazing Story itself, please refer to the article linked above.
๐ค What is MCP?
If you're reading this, you're probably already familiar with MCP. But just in case, here's a quick overview.
MCP stands for Model Context Protocol. It is a standard interface that allows generative AI to interact with the outside world. In a typical setup, the generative AI acts as the MCP "client," while the systems that provide information to the AI (or receive instructions from it) are called MCP "servers." When both sides follow the MCP specification, they can communicate with each other seamlessly.
Before MCP came along, connecting generative AI to external systems was still possible, but every AI platform had its own proprietary way of doing it. When MCP emerged as a shared standard, a flood of MCP servers were released in a short time, and AI platforms quickly adopted support for it. Working with generative AI in real-world applications became dramatically easier as a result.
๐ก The Idea: Exposing an In-House Design System via MCP
In the spring of 2025, the following article made quite a splash in the Japanese developer community:
zenn.dev
(This article is written in Japanese.)
It describes how a team built an MCP server that scans the source code of their in-house UI components (written in JavaScript/TypeScript) and returns information about them. By connecting this MCP server to a generative AI, when they asked the AI to generate UI through a text prompt, the AI correctly used those in-house components instead of making things up.
This addresses a real pain point. Without such a setup, when you ask generative AI to write UI code, it tends to build everything from scratch using something like Tailwind CSS directly, creating its own ad-hoc components. Having an MCP server that informs the AI about your existing UI component library is a genuine game-changer for AI-assisted UI development.
But do you always have to build this kind of MCP server from scratch? Is there a way to reuse something you already have?
๐คฉ Wait, Doesn't Storybook Already Know Everything?
That's when an idea hit me.
In many frontend development teams, Storybook is already in use, and Storybook actually "knows a lot" about the components in a project:
- What components exist, with usage examples (from story definitions)
- The purpose and overview of each component (from JSDoc)
- Real markup examples (from story definitions)
- What parameters a component accepts, including their types and descriptions (from type definitions and JSDoc)
So the idea was simple: What if Storybook could talk to the AI through MCP?
โก Adding an MCP Server Feature to Blazing Story
Personally, I work more with Blazor (C#/.NET) than with JavaScript/TypeScript-based frontend frameworks. Blazing Story is a Blazor-based alternative to Storybook, and I develop and maintain it myself.
Since I know the internal structure of Blazing Story well (and can actually make changes to it), I decided to implement this idea for real.
Fortunately, a C#/.NET SDK for building MCP servers was already available. Using this SDK, adding MCP server functionality to Blazing Story turned out to be surprisingly straightforward.
๐งช Trying It Out
With the MCP server feature in place, I tried asking a generative AI to generate UI code, just to see what it would come up with.
๐ ๏ธ Setting Up the Environment
This experiment was done around July 2025, so the tooling is a bit dated, but here's what I used:
- Visual Studio Code with GitHub Copilot
- Claude Sonnet 4 as the AI model
- .NET SDK for the Blazor project
For the MCP integration, I configured two things in advance:
- In
.vscode/mcp.json, I specified the HTTP Streaming API endpoint of Blazing Story's MCP server - In
.github/copilot-instructions.md, I added a custom instruction: "When generating UI code, query the Blazing Story MCP server and prioritize using the available components"
โ๏ธ First Try: Generating UI from a Text Prompt
As a first step, I typed the following prompt into the GitHub Copilot chat in VSCode:
Please implement a checkout form for an e-commerce site inside the currently open Checkout.razor file.
- Add a "Checkout" title at the very top of the page.
- Below that, place a stepper component showing the following 3 steps.
- Information
- Confirmation
- Complete
- For now, focus on building the "Information" form.
- The form should include the following sections and fields.
- Shipping Information
- Full Name
- Postal Code
- Address
- Phone Number
- Email Address
- Shipping Options
- Preferred Delivery Date
- Preferred Delivery Time (choose from Morning, Afternoon, or Evening)
- Payment Method (choose from Cash on Delivery, Credit Card, or PayPay)
- A "Next" button
- Use a select component for the Preferred Delivery Time field.
- Use a vertically stacked radio group component for the Payment Method field.
The result was honestly surprising. The AI generated exactly the Razor component UI code I was looking for. It used the components already registered in Blazing Story rather than making up its own. And because it understood what parameters those components accept, it produced perfectly working code with no build errors on the very first prompt. ๐
๐ผ๏ธ Second Try: Generating UI from a Sketch Image
Next, I tried generating UI from an image. Instead of using Figma, I drew a rough "hand-drawn style" sketch of the desired layout in PowerPoint, exported it as an image, and submitted it to the same Copilot chat setup.
This also worked without any trouble. Just like with the text prompt, the AI generated Razor component source code based on the layout shown in the sketch, using the component info provided by Blazing Story's MCP server. It worked so well that it felt almost too easy. ๐
You can also watch a video of this experiment here:
https://blazingstory.github.io/docs/mcp-server-feature?_highlight=mcp#summary
๐ What We Learned
Those results revealed something important.
By feeding UI component information to the AI through an MCP server, the AI generated highly accurate UI source code from a single prompt. It used the existing components rather than inventing its own. And it avoided the hallucinations that generative AI is often prone to, like confidently setting parameters that sound plausible but simply don't exist.
I also noticed something interesting on the software engineering side. The principles that have always mattered in human team development still matter just as much when working with generative AI:
- Write documentation carefully (JSDoc or XML doc comments in C#/Blazor), because the AI reads them too
- Use clear, meaningful names for your components and parameters
If these are neglected, the AI produces incorrect or confusing code for the exact same reasons human developers would struggle. Good practices remain good practices.
๐คท But Isn't Writing Stories a Lot of Work?
Fair question. Building the MCP server described above still requires humans to write stories one by one. If your only goal is to expose UI component info to the AI, it might actually be more efficient to implement a lightweight MCP server that scans component source code directly.
But here's the thing: in practice, frontend teams often need Blazing Story (or Storybook) anyway, for component-level E2E testing, visual regression testing, and as a reference resource for developers learning the codebase. Since you're already building stories for those reasons, it makes total sense to let that existing setup serve as the MCP server too. You get the best of both worlds without extra overhead.
๐ What About the Official Storybook?
When I first looked into this in July 2025, the official Storybook did not yet have this kind of MCP integration. Some community-made add-ons existed, but they were focused on helping AI write stories, not on feeding component information to AI for UI generation. The Storybook GitHub repo had active discussions about the need for something like this, but nothing official had landed yet.
Since then, the Storybook team has moved in exactly this direction. Starting in late 2025, they released official MCP server packages (a standalone library and a Storybook addon) that expose component metadata to AI agents so they can generate UI code using the right components and props. By late February 2026, the project had seen 40+ releases and continues to be actively developed.
It's encouraging to see the same core idea validated by the broader ecosystem. The Blazor/.NET world that Blazing Story serves is a different territory from the JavaScript-centric official Storybook, but the underlying principle of giving AI structured knowledge about your components is clearly the right direction regardless of the tech stack.
๐ Conclusion: It Works at a Practical Level
To sum up: I added an MCP server feature to Blazing Story, used it to let generative AI generate Blazor UI code, and the results were genuinely practical and useful.
Even in the age of AI, UI component catalogs like Blazing Story continue to play an important role in development workflows, and now they can directly power your AI-assisted development as well.
If you're developing Blazor applications, I strongly encourage you to consider adopting Blazing Story along with its MCP server feature. It can make a real difference in your day-to-day workflow.
For step-by-step instructions on setting up the MCP server feature in your own Blazing Story project, check out the official documentation:
blazingstory.github.io
I hope this article was helpful, and I hope you enjoy building Blazor apps even more. โค๏ธ Happy coding!
Top comments (0)