Quickstart

Claude Code を例に、セットアップから最初の artifact（成果物）の投稿、レビューまでを一通り行います。他の MCP クライアントを使う場合は MCP 連携 を参照してください。

1. workspace と project を作る

https://tray.page にサインインすると workspace の作成画面が開きます。workspace（チームの単位）を作成し、その中に project（成果物の置き場所）を1つ作成します。すでに招待されている場合はこのステップは不要です。

2. MCP サーバーを追加する

ターミナルで次のコマンドを実行します。

claude mcp add --transport http traypage https://tray.page/api/mcp

Claude Code 内で /mcp を実行し、traypage を選んで認証するとブラウザが開きます。サインインして、アクセスを許可する workspace と権限を確認・承認すれば接続完了です。トークンの手動コピーは不要です。

3. 成果物を投稿する

Claude Code に、HTML を作って TrayPage に投稿するよう頼みます。

売上分析レポートをHTMLで作って、TrayPageの
workspace「acme」の project「reports」に投稿して

Claude Code が publish_html_artifact ツールを呼び、レビュー用 URL と閲覧用 URL を返します。

4. レビューして共有する

返ってきたレビュー URL を開くと、成果物のプレビューとコメントパネルが表示されます。チームメンバーはテキストを選択してコメントできます。公開範囲（visibility）は project のデフォルト（project members）が適用され、artifact ごとに変更できます。

5. コメントを反映して修正する

コメントが付いたら、Claude Code に修正を頼みます。

TrayPageのコメントを反映して修正版を投稿して

Claude Code が get_revision_prompt で未解決コメントを修正指示にまとめ、publish_new_artifact_version で新しいバージョンを投稿します。バージョン履歴は自動的に残ります。

うまくいかない場合は MCP 連携のトラブルシューティング を確認してください。