Upgrade to Pro — share decks privately, control downloads, hide ads and more …

自社UIコンポーネントにMCPサーバーを作った話

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takumi takumi
July 14, 2025
Programming
110
1

 自社UIコンポーネントにMCPサーバーを作った話

zenncafe #3 のLT資料です。

Avatar for takumi

takumi

July 14, 2025

More Decks by takumi

See All by takumi
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
550
弊社のAWS事情、大公開！
Avatar for takumi taku271
1
460
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
220
Next.js(SSR)をLambdaでホストしてみる_jaws_education
Avatar for takumi taku271
0
140

Other Decks in Programming

See All in Programming
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
4
1.3k
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
260
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
4
900
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
3
880
The Less-Told Story of Socket Timeouts
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
3
790
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
110
Swift Concurrency Type System
Avatar for Yasuhiro Inami inamiy
1
560
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
1.8k
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
1.1k
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
400
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
790
iOS機能開発のAI環境と起きた変化
Avatar for Ryu-nakayama ryunakayama
0
190

Featured

See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
780
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
100
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
55k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120

Transcript

  1. 自社UIコンポーネントに MCPサーバーを作った話 Zenncafe#3 LT 山下　 拓海

  2. 自己紹介 氏名：山下　 拓海 所属：福井大学・ユニフォームネクスト 趣味：ドライブ・旅行 好きなもの：Zenn・ちいかわ・mofusand 初LTです！お手柔らかにお願いします 年齢：２１歳

  3. はじめに Vibe Codingしてますか！！ 開発

  4. 課題点 Kurage UI（自社UIコンポーネント）が使えない 料金が高そう 先駆者がいない

  5. 課題点 Kurage UI（自社UIコンポーネント）が使えない 料金が高そう 先駆者がいない MCPサーバーを作成すれば良いのでは？

  6. 開発 実装方針 配布 ツール Kurage UIのドキュメントが整っていない コンポーネントとカテゴリの一覧を取得 各コンポーネントのソースコードを取得 Docker Image

    ソースコード自体を返す

  7. 結果 システムグループにVibe Codingの風が！ とはならず Kurage UIを使ってVibe Coding可能に！！ 自分でしか使わないツールに...

  8. 今後の展望 Kurage UIのMCPサーバーを積極的にアピール ドキュメントやコメントのリッチ化 リモートサーバーで利用できるように

  9. まとめ MCPでAIエージェントを使いこなそう あとプロダクトは積極的にアピールして 使ってもらう

  10. 記事 https://zenn.dev/uniformnext/articles/kurage-ui-mcp 参考資料も記事に書いてあります