トップ > アドベントカレンダー2025 > AIにMCPサーバーを作ってもらったら失敗したけど、自社UIコンポーネントにコミットするきっかけになった

AIにMCPサーバーを作ってもらったら失敗したけど、自社UIコンポーネントにコミットするきっかけになった

アドベントカレンダー2025 fluct AI

こんにちは！ 株式会社fluctでエンジニアをしているりんちゃん（@HidakaRIntaro）です。

この記事はCARTA アドベントカレンダー2025の12/22の記事です。

TL; DR

  • 何をしたか: AIに丸投げして、自社UIコンポーネント用のMCPサーバーを構築した。
  • 結果: 期待に反してUI生成の精度が落ちるという「失敗」に終わった。
  • 学び: AIが新たな学びの「1歩目」を無理やり作ってくれたおかげで、腰が重い自分でも新しい技術を学び、自社ライブラリへのコミットに繋げることができた。

はじめに

私のチームでは、自社開発のUIコンポーネントライブラリを活用しています。

最近、 MCPサーバーを作ってUI開発を効率化する という話をいくつか見ました。「私もやってみたい！...けど、MCPの仕様を1から調べて実装するのは正直ちょっと腰が重いな」

そう思っていた私が、「AIに全部丸投げしたら、とりあえず動くものは作れるのでは？」と試してみた結果、失敗したけど学びがあった話です。

※ この記事はあくまで個人の体験記です。MCPの技術的な詳細解説や、具体的な実装方法を紹介するものではない点をご了承ください。

やったこと: AIに「1歩目」を丸投げする

まずはAIに下記のような依頼をしてMCPサーバーの土台を作ってもらいました。

  • 参考になりそうなOSS製MCPサーバーを探してもらう
  • 共通する機能を洗い出してもらう
  • 自社UIコンポーネントの実装を読み共通する機能を実装してもらう
    • 生成された4つのツール
      • list_components - 利用可能な全コンポーネント一覧を取得
      • get_component_details - コンポーネントのPropsと型定義を取得
      • get_component_examples - Storybookのサンプルと説明を取得
      • get_installation_instructions - インストール手順を取得
  • MCP Inspectorで動作確認をする

自力なら数日かかっていただろう「動くもの」が、AIは爆速でコードを生成してくれました。

実際に使ってみた: まさかの「精度低下」

わくわくしながら作成したMCPサーバーを接続し、AIに「お問い合わせフォームを作って」と指示してみました。しかし、結果は意外なものでした。

MCPあり MCPなし
UIコンポーネントは使っているが、レイアウトが崩れて不自然 styled-components主体だが、見た目は整っている

期待していたのは「自社コンポーネントを使いこなすこと」でしたが、実際にはMCPサーバーが返す情報がノイズになったのか、むしろ生成結果が不自然になりました。私の「AI丸投げMCPサーバー」は、この時点で失敗になりました。

なぜうまくいかなかったのか？ から「自発的な学び」

AIが強引に1歩目を連れて行ってくれたおかげで、「なぜ精度が落ちるんだ？」という疑問に自発的に原因を探り始めました。

  • 生成されたMCPサーバーのコードを読む
  • OSSのUIコンポーネント用MCPサーバーの実装を読み、レスポンスを比較し大きく違うことに気づく
  • 自社UIライブラリの型定義などコンポーネントの実装を読む

1歩目が重たいはずの私が、AIが作った実装を直そうとするうちに、気づけばMCPや自社ライブラリ、OSSのUIコンポーネント用MCPサーバーの実装を読み、手を動かしていました。

思わぬ副産物: 自社UIコンポーネントへの初コミット

調査の過程で、自社ライブラリ側にいくつかの不具合や、Node.jsのバージョンが古い箇所を見つけました。

「手元にコードもあるし、原因もわかった。よし、直してしまおう」

MCPサーバーを作ろうとしたことがきっかけで、プロジェクトの枠を飛び越え、自社UIコンポーネント本体にPRを出して修正し、Nodeのバージョンアップまで完遂することができました。

チームメンバーからも感謝の言葉をいただき、単なる「ツール作成」以上の価値を組織に還元することができました。

おわりに: AIは「重い腰」を持ち上げる着火剤

今回、MCPサーバーとしての精度向上という点では失敗だったかもしれません。しかし、私はやってよかったと心から思っています。

「1歩目が重い」私にとって、AIが無理やり形にしてくれた「不完全な1歩目」は、学びのきっかけを作る最高の着火剤でした。

1から調べていたら、おそらく今も「いつかやりたい」と言い続けていたと思います。AIにガッと最初を任せたからこそ、失敗の原因を調べるところから技術を学び、自社UIコンポーネントへのコミットという体験ができました。

これからも、AIを新しいことへの学びのきっかけ作りとして使い倒していこうと思います！