Turso MCPサーバーの準備
前回の動画でデザインの準備ができましたので、最後にMCPの準備をしていきます。これが終わったらハーネスを実質的に動かしていきます。
まず1つ目のMCPはTursoです。データベースを用意していきます。Tursoはまだ使ったことがない方が大半だと思いますので、新規登録あたりから説明していきます。
Tursoの新規登録
Googleで「Turso database」と検索するとヒットしやすいです。一番上に表示される「Turso Database Everywhere」をクリックしましょう。
そして「Get Started」をクリックし、「Production Ready」のTurso Cloudを選択してください。GitHubアカウントを持っている方はGitHub認証が一番簡単です。Googleアカウントでのサインアップも可能です。
グループの作成
サインアップが完了するとダッシュボード画面が表示されます。「Create Database」で手動でデータベースを作ることもできますが、MCPサーバーをつなげばデータベース自体もClaude Codeが作ってくれるので、ここでは作らなくて大丈夫です。
作らなければいけないのは「Create Group」です。グループを作成し、名前を適当に決めて、リージョンは東京を選択して「Create Group」をクリックしましょう。グループの中にいろんなデータベースが作成されていきます。
MCPサーバーの設定方法
MCPサーバーの設定方法について、Googleで「Turso MCP Server」と検索すると、設定方法が書かれた記事が見つかります。
必要になるのは以下の情報です。
- Turso API Token（必須）
- Organization（必須）
- Default Database（オプション、設定不要）
Claude Codeに設定方法を聞く
Claude Codeに「TursoのMCPサーバーを設定したいのですがどうすればいいでしょうか」と聞いてみましょう。Claude Code Guideのスキルを発動させるとより正確な回答が得られます。このスキルが結構重要です。
Claude Code自身も日々アップデートしているので、今まで設定していた方法よりも良い方法を提示してくれるかもしれません。その意味も込めてClaude Codeに聞くのがおすすめです。
設定方法としては、以下の2つの方法があります。
claude mcp addコマンドを使う方法.mcp.jsonファイルを作成して読み込ませる方法
API TokenとOrganizationの取得
ダッシュボードに戻り、「Platform API Tokens」のアイコンをクリックすると、トークン発行画面が出てきます。「Create Token」で名前を適当に決めて、スコープを設定し、トークンを発行します。
このトークンは誰にも見せないようにしてください。
Organizationに関しては、グループ名を使用します。
セキュリティに関する注意事項
APIキーやOrganizationなどの秘密情報に関しては、Claude Codeには基本的に直接渡さないほうがいいです。Claude Codeに一度APIキーを送ってしまうと履歴として残ります。履歴に残るということは、Claude Codeのクラウドでもアクセスできる可能性がありますし、漏洩する危険性があります。
セキュリティに気をつけたい方は、秘密情報は自分で手入力で設定するようにしましょう。
.envファイルに秘密情報を書くsettings.local.jsonでClaude Codeが.envファイルを読み込まないように設定する- 万が一APIキーを読み取られてしまった場合は、APIキーを再発行する
ただし、GitHubに間違えてAPIキーをアップロードするほどのセキュリティリスクではないので、気にならない方はそのままでも大丈夫です。しっかりと漏洩を防ぎたい場合は上記の方法を取るようにしてください。
MCPサーバーの接続確認
設定が完了したら、.mcp.json ファイルも自動で作成されます。/mcp コマンドで接続状態を確認しましょう。追加したばかりだと認識してくれないことがあるので、Claude Codeを再起動してください。
再起動後に /mcp を実行すると、接続状態が「Connecting」から接続完了に変わります。
Playwright MCPの接続
もう一つのMCPはPlaywright MCPです。こちらはAPIキーなどが必要ないため、一番簡単に接続できます。
Claude Codeに「Playwright MCPも接続したい」と伝えると、マークダウンで設定方法を教えてくれます。そのまま貼り付けるだけでOKです。
設定できたら再起動してあげるとMCP接続ができるようになります。Playwright MCPを入れておくと、AIが目を持って視覚的にUIを評価してくれるようになりますので、ぜひ入れておいてください。
まとめ
これで2つのMCPサーバー（TursoとPlaywright）の準備ができました。続いての動画から早速ハーネスで自律的に実装を進めていきます。
