C Claude Code講座by EmpaC
Claude Code講座 / 第3章 MCPと実務での使い方

実際に1つ、つなげてみる

スライド 2 枚 約 8 分 タスク 2 件

ブラウザを操作できるMCPを追加し、実際に動かしてみます。

1 / 2
スライド 1 / 2

実際に1つ、つなげてみる

練習として、ブラウザを操作できるMCP(Playwright)を追加してみます。ターミナルで次のコマンドを打ちます。

claude mcp add playwright -- npx -y @playwright/mcp@latest

つながったかどうかは、次のコマンドで確認できます。

claude mcp list

✔ Connected と表示されれば成功です(初回はダウンロードに少し時間がかかるので、 ✘ Failed to connect と出ても、少し待ってからもう一度確認してみてください)。

スライド 2 / 2

つなげたMCPを使ってみる

つながったら、Claude Codeに話しかけてみましょう。

下のボタンで、実際の動きに近い体験ができます(体験版・本物のブラウザは開きません)。

$ playwrightを使って、うちの会社のサイトを開いて、ページのタイトルを教えて
ブラウザを開いて確認しました。

ページタイトル:「株式会社EmpaC|企業向けSNSマーケティング」

ほかに確認したいページがあれば教えてください。

うまくいけば、実際にはブラウザが開いて、指定したページのタイトルを教えてくれます。 「Claude Codeが外部のツールを実際に操作する」——これがMCPの基本の動き方です。

このレッスンでやること

読み終わったら完了にする 完了にするとサイドメニューにチェックが付きます