npmパッケージをMCPによって導入しやすくする

MCPの活用方法としてnpm package導入側向けのMCPを学習・用意してみたという内容です。

Transcript

1. npmパッケージを MCPによって 導入しやすくする 2025.11.29 horitks 　@t_pori418
2. 自己紹介 堀 貴詞 Takashi Hori) ラクスル株式会社 エンジニアリングマネージャー 𝕏: @t_pori418 
 Hobby: ボドゲ Language: Ruby, PHP, Go, Python, TypeScript, C#
3. アジェンダ Canvaから学ぶ Dev MCP server ラクスルのデザインシステム のMCP server 作ったnpm package の導入用MCPを作ってみる
4. 近況 ラクスル印刷 EC事業 印刷EC事業の開発チームのEM ラクスルは指定のデザインの名刺やチラシを Webから簡単に注文できるサービス AI開発を活用して Canva連携 印刷ECのラクスルでCanvaからデザイン入稿が直接可 能にできる機能を開発 AI活用でプレイングをしつつ、EMとして参加
5. Canva × ラクスル 一気通貫の 入稿体験を提供 ユーザーはCanvaで作成したデザインを、シームレスにラクスルの 高品質な印刷サービスへ入稿可能です。 canva.com raksul.com
6. 課題感と今回の取り組み 課題感 uikitをnpm packageで配布しているが、導入やコン ポーネントの利用方法のコンテキストを、もっと簡単にAI に与えたい。 やったこと 他のMCP Serverの事例から学び、実際にMCPを作っ てみることで解決策を模索しました。
7. Canvaから学ぶ Dev MCP server 1 Canva Apps SDK / Marketplace • サードパーティ製アプリ作成が可能 • 個人開発者も開発に参加できるエコシステム • 弊社はパートナー企業ですが、Canva Apps SDKを活用す ることでCanva上の動線を作成しました
8. Canvaから学ぶ Dev MCP server 2 Documentation ドキュメント、npm package、サンプルコードが充実して提 供されています。 https://www.canva.dev/docs/apps/ Dev MCP Server Createのスラッシュコマンドも提供されており、サーバーが あって誰でも接続可能です。 https://www.canva.dev/docs/apps/mcp-server/
9. ラクスルのデザインシステムの MCP serverから学ぶ Kamii Kamii ラクスルのデザインシステム npm packageとして各サービスがinstallして利用 https://zeroheight.com/731d8c745/p/018df4-kamii--raksul-design-system MCPの提供 社内のGitHub npm packageとして提供されています。 "command": "npx", "args": ["パッケージ名"],envにPATを設定してMCPを取得可能
10. 作ったnpm packageの導入用MCP 社内向けにWeb標準のWeb Componentsで作った モーダルコンポーネントをnpm packageとして横展開
11. MCPの実装と提供方法 実装プロセス CursorのPlanモードで壁打ちし、 リポジトリ内に /mcp-server/ を実装しました。 提供方法 理想はサーバー提供 今回はミニマムにリポジトリをcloneし、 npm run build した出力結果をargsで指定する形に
12. 工夫した点 : Cursor用コマンドの用意 背景 事業部開発組織の推奨がCursor installコマンドを用意 自動判定 Codebaseを確認し、自動的に フレームワークを判定 サンプル実装 npm packageをinstallし、 サンプル実装まで自動で行う
13. 効果と展望 効果 ・インストレーションガイドの生成とMCPのコード生成は AIが実装から生成できるようにしたためメンテナンスが容 易 ・インテグレーションのしやすさはこれから 展望 ・MCP Server化 ・インストールしたチームからフィードバックを受けてコン ポーネント情報やコマンドの精度向上
14. 所感（まとめ） ・内部向けのものであれば、理解度が低くてもサクッと作ってみるのが良い ・ドメイン知識を MCPで取れるようにすると、利用者はプロンプト量が減り　開発体 験が非常に良い
15. おまけ 今回Geminiのスライド生成を試してみたのですが、デザインについて何も指定しなかったのにラクス ルの話を入れたからか CMYKっぽいデザインになりました