Claude Code × Google Stitch MCP 接続奮闘記 — Windows環境で「Failed to connect」と戦った記録

2026.04.01

概要

こんにちは、クラスメソッド製造ビジネステクノロジー部の田中聖也です。
私は2025年2月にクラスメソッドに転職しており、ちょうど1年が経ちました。
Google StitchとClaude Codeを連携しようとしたらめっちゃ詰まったので記録を残します。。。

この記事の対象者

Google Stitch を開発ワークフローに組み込みたい人

環境

項目	バージョン
OS	Windows 11
Claude Code	2.1.86
Node.js	nvm4w で管理
@_davideast/stitch-mcp	0.5.1

前提条件

以下の項目が実施されていること

gcloud auth application-default login
gcloud config set project your-project-name
gcloud auth application-default set-quota-project your-project-name
gcloud beta services mcp enable stitch.googleapis.com

やろうとしたこと

Google Stitch は AI でUIデザインを生成できるサービスです。このデザインデータにClaude Codeからアクセスできれば、「AIが生成したデザインを、AIがコードに変換する」というワークフローが実現でききて、スマートじゃないかなと思って実践しようとしました。
Google StitchとClaude Codeと橋渡しをするのがMCP（Model Context Protocol）です。
公式の @_davideast/stitch-mcp パッケージを使えば簡単に繋がるはず...でした。

流れとしては↓のような感じ。

Claude Code ←(MCP)→ stitch-mcp ←(HTTP)→ Google Stitch API

失敗の手順

失敗1:公式手順通りにやってみた

公式READMEに従いMCPの設定を行いました。

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

失敗2: Windows の .cmd ラッパー問題

MCPはstdin/stdoutで純粋なJSONデータをやり取りします。しかし Windows の .cmd ラッパー（npx.cmd）がこのパイプを妨害していました。

対処: .cmd を経由せず、Node.js で直接 JavaScript ファイルを実行する設定に変更。

{
  "command": "C:\\nvm4w\\nodejs\\node.exe",
  "args": ["C:\\nvm4w\\nodejs\\node_modules\\@_davideast\\stitch-mcp\\bin\\stitch-mcp.js", "proxy"]
}

失敗3: stderr へのログ出力

stitch-mcp は接続状況のログをすべて stderr に出力していました。

[stitch-proxy] Connecting to https://stitch.googleapis.com/mcp...
[stitch-proxy] Connected to Stitch, discovered 12 tools
[stitch-proxy] Proxy server running

失敗4: stitch-mcp の stdio 実装バグ?

Claude Code と stitch-mcp の間で「何か」がうまくいっていないのは確実でしたが、「何が」うまくいっていないのかが分からない状態なので、以下の仮説を立てました。

仮説A: Claude Code が stitch-mcp にリクエストを送れていない
仮説B: stitch-mcp がリクエストを受け取れていない
仮説C: stitch-mcp がレスポンスを返していない
仮説D: Claude Code がレスポンスを受け取れていない

以下の検証をすることで、どの仮説が正しいかを確認しました。

Claude Code の代わりに自分が MCP クライアントになる

stdin にリクエストを送る → 仮説A/Bの検証
stdout のレスポンスを見る → 仮説C/Dの検証

検証結果

# 5秒待ってからinitializeを送信
$proc.StandardInput.WriteLine($initializeMessage)

# stdout: 空
# stderr: [stitch-proxy] Connected to Stitch, discovered 12 tools

この結果から仮説Cが正しいことが分かり、stitch-mcp はリクエストを受け取っているはずなのに、stdout にレスポンスを一切返していないことが分かりました。

失敗5: 認証問題

これは単純でAPI Key 認証では一部の操作で権限不足でした。OAuth2 認証 + quota project ヘッダーが必要でした。

解決方法

自作 stdio プロキシを作成しました。

Claude Code ←(stdio)→ stitch-proxy.js ←(HTTPS)→ Stitch API

自作プロキシ

stitch-proxy.js

const https = require('https');
const readline = require('readline');
const { execSync } = require('child_process');

const STITCH_URL = 'https://stitch.googleapis.com/mcp';
const QUOTA_PROJECT = 'your-project-name';

function getAccessToken() {
  try {
    return execSync('gcloud auth application-default print-access-token', {
      encoding: 'utf8',
      stdio: ['pipe', 'pipe', 'pipe']
    }).trim();
  } catch(e) {
    console.error('[proxy] Failed to get access token:', e.message);
    return null;
  }
}

let cachedToken = null;
let tokenExpiry = 0;

function getToken() {
  const now = Date.now();
  if (cachedToken && now < tokenExpiry) {
    return cachedToken;
  }
  cachedToken = getAccessToken();
  tokenExpiry = now + 30 * 60 * 1000;
  return cachedToken;
}

function sendToStitch(body) {
  return new Promise((resolve, reject) => {
    const token = getToken();
    if (!token) { reject(new Error('No access token')); return; }
    const url = new URL(STITCH_URL);
    const options = {
      hostname: url.hostname,
      path: url.pathname,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + token,
        'x-goog-user-project': QUOTA_PROJECT
      }
    };
    const req = https.request(options, (res) => {
      let data = '';
      res.on('data', (chunk) => data += chunk);
      res.on('end', () => {
        if (!data || data.trim() === '') { resolve(null); return; }
        try { resolve(JSON.parse(data)); }
        catch(e) { reject(new Error('Parse error: ' + data)); }
      });
    });
    req.on('error', reject);
    req.write(JSON.stringify(body));
    req.end();
  });
}

async function initStitch() {
  try {
    await sendToStitch({
      jsonrpc: '2.0', id: 0, method: 'initialize',
      params: { protocolVersion: '2024-11-05', capabilities: {},
        clientInfo: { name: 'stitch-proxy', version: '1.0.0' } }
    });
    await sendToStitch({ jsonrpc: '2.0', method: 'notifications/initialized' });
    console.error('[proxy] Connected to Stitch');
  } catch(e) {
    console.error('[proxy] Init error:', e.message);
  }
}

const rl = readline.createInterface({ input: process.stdin, terminal: false });

rl.on('line', async (line) => {
  try {
    const msg = JSON.parse(line);
    if (msg.method === 'initialize') {
      const resp = {
        jsonrpc: '2.0', id: msg.id,
        result: {
          protocolVersion: '2024-11-05',
          capabilities: { tools: { listChanged: false } },
          serverInfo: { name: 'stitch-proxy', version: '1.0.0' }
        }
      };
      process.stdout.write(JSON.stringify(resp) + '\n');
    } else if (msg.method === 'notifications/initialized') {
      // ignore
    } else {
      const result = await sendToStitch(msg);
      if (result) {
        process.stdout.write(JSON.stringify(result) + '\n');
      }
    }
  } catch(e) {
    console.error('[proxy] Error:', e.message);
  }
});

initStitch();

claude.jsonの設定

ディレクトリ構成は任意です

claude.json

"mcpServers": {
  "stitch": {
    "type": "stdio",
    "command": "C:\\nvm4w\\nodejs\\node.exe",
    "args": ["C:\\Users\\your-name\\mcps\\stitch-proxy.js"],
    "env": {}
  }
}

ディレクトリ構成

C:\Users\your-name\
├── .claude\
│   └── claude.json              ← MCP設定（グローバル）
└── mcps\
    └── stitch-proxy.js          ← 自作プロキシ（これだけ）

最小手数で何をすれば良かったのか

振り返ると、以下の手順でやればよかったです

gcloud CLIの認証設定
自作プロキシスクリプトの作成
claude.jsonの再設定

まとめ

サクッと終わると思っていたMCP連携ですが沼にハマっていました。
トラブルシュートするとMCPとかの技術とかが理解できますね！