# Storybook MCP: Maintaining software quality in the Vibe coding era

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/gtKENBeM2sB56jx1TCjdXa

> 開始做筆記

2018 Moved to Taiwan!
2020 Became d dad

How do you see AI in SW development?
- Tool
- Helper?
- God?

Faster keyboard > Know to Code -> Key mate

The frontend workflow is evovling
build -> debug loop now AI participles

Your code beautiful but inference ...

- High quality
- AI Slop
- Fast
- Cheap

Storybook
- Existing Human workflow
- Future Agentic workflow
- Storybook MCP
- https://storybook.js.org/addons/@storybook/addon-mcp

3 in 1
Dev + Docs + Test

You just joined a project and are asked to build a new feature, what will you do?

plan -> build -> verify
docs -> dev -> test

# Demo of Storybook
"MealDrop"
https://mealdrop.vercel.app/storybook/?path=/story/getting-started-with-mealdrop--page
原始碼：https://github.com/yannbf/mealdrop/tree/main/src/components
:point_up: 藏在每一個 component 內的 \*.stories.\* 內

# Agentic Workflow
（同樣的問題再問一次，再跑一次同樣的流程）
They doesn't know anything about the context
- Plan: not know enough
- Build: hard to insepect
- Verify: not enough guardrails

# Demo 2
- Building a web app of restaurant
- Calude Code cli
- Worried about network issue as morning
- Calling styrbook-mcp
- Downloading and making it available to human
- show Component manifests
- MCP Generated
- Test
- Component

# Storybook MCP
Agents
https://github.com/storybookjs/mcp

Refining MCP
- Including Radix

Storybook Early Access Plan

# Slides

- [Slides Link]

# Slido Remaining Question
1. What grain size would you recommend for Storybook components? Should we apply the process you mentioned at the page level?

---

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}