【連載】ReactでMCPクライアントを作る！（第一回）
ReactによるModel Context Protocolクライアントの実装について導入紹介

公開日：2025.04.04　更新日：2025.04.10

皆さん、こんにちは。廣瀬製紙株式会社　稼働率向上PJチームのA.Mです。

今回から「ReactでMCPクライアントを作る！」と題して、全7回の連載記事をお届けします。

別のブログ記事で、Model Context Protocol（MCP）を使ってPostgreSQLのデータベースにアクセスする方法をご紹介しました。

その際はClaude Desktopをクライアントとして使用しましたが、実際の業務ではClaude Desktopを使うケースというのはあまり想定できそうもありません。
なにかしら独自のクライアントアプリケーションを開発する必要があるケースが多いと思います。

そこで今回の連載では、Reactを使ってMCPクライアントを作成する方法を、環境構築から実装まで連載で解説していきます。

弊社では、複数ある中の社内システムのひとつとして、クラウドベースの開発環境の採用を進めています。

そして昨今ではChatGPTやClaudeといった生成AIの活用も急速に広がっており、今後のシステム開発ではシステムと生成AIの連携を前提とした「AIネイティブ」な設計をしていくべき、という問題意識を持っています。

ReactでMCP Clientを作る

弊社では、複数ある中の社内システムのひとつとして、クラウドベースの開発環境の採用を進めています。

また昨今では、生成AIの急速な発展により、企業のシステム開発においても「AIネイティブ」な設計思想が重要になってきています。
つまり、後付けでAIを組み込むのではなく、設計段階からAIとの連携を考慮したシステム作りが求められているのです。

このような背景から、私たちは今回ReactでMCPクライアントを実装することにしました。
Reactはコンポーネントベースのアーキテクチャと豊富なエコシステムを持つフレームワークで、MCPクライアントの実装も容易です。

この連載では、具体的なコード例を交えながら、ReactでMCPクライアントを実装する方法を詳しく解説するほか、Node.jsで構築したMCPサーバーを介してPostgreSQLデータベースにアクセスする方法を紹介します。

全7回の連載を通じて、ひととおり動作するMCP×PostgreSQLのアプリケーションができあがるはずです。
また連載の最後には、Githubでプロジェクトも公開するつもりですので、みなさまからのさらなるContributeをお待ちしております。

初回の今回は導入として、これから学ぶ内容の全体像をつかんでいただければと思います。

七回の連載における、Model Context Protocol (MCP)を活用したシステム構築について、具体的なプロジェクト構成をご紹介します。

Reactを採用し、MCPクライアントを実装します。MCPクライアント上から自然言語でデータを参照する指示を出します（例：「ユーザー一覧を表示して」など）。

Node.jsを使用してMCPサーバーを構築します。また、ChatGPT APIを呼び出し、クライアントから受け取ったプロンプトをSQLクエリに変換させ、MCPサーバーを通じて

データを受け取ります。

PostgreSQLをローカル環境で動作させます。AIが生成したSQLクエリをMCP経由でデータベースに送り、データを受け取ってサーバーサイドに返します。

次回以降の連載では、これらの各コンポーネントの具体的な実装方法について、順を追って詳しく解説していきます。

本記事を皮切りに、ReactでMCPクライアントを作成する連載をスタートいたします。全7回にわたり、段階を追って実装方法をご紹介していきます。

まず第一回となる本記事では、Model Context Protocol（MCP）の概要と、なぜReactでクライアントを作る必要があるのかについて解説いたしました。

第二回では、開発に必要な環境構築について詳しく説明します。Node.js、React、PostgreSQLのインストールから、開発環境の整備までを解説していきます。

第三回では、PostgreSQLにテスト用の仮データを登録します。

第四回では、いよいよReactでMCPクライアントを作成します。

第五回では、Node.jsを使ってMCPサーバーを構築します。

第六回では、クライアント側でのデータポーリングを実装します。

第七回では、これまでの内容を振り返りながら、MCPを活用した開発についてまとめます。

連載を通じて、MCPを取り入れたシステム開発の一端に触れられるようなものになれば、幸いです。
毎週のペースで更新する予定ですので、今後の連載にどうぞご期待ください。