Previewship Mcp

PreviewShip

バージョンのリリース記録：2.0.1 — バックグラウンドでのコンテンツレビューと自動修正。

エディター、ターミナル、AI エージェント、ブラウザーから React/Vue/Vite/Next のビルド出力、HTML、Markdown、PDF ドキュメントをデプロイし、固定のプレビュー URL を取得できます。

PreviewShip は、開発者や AI 支援ワークフロー向けのフロントエンドプレビュー用デプロイプラットフォームです。dist、build、out、public など、ブラウザーで表示できるビルド出力をアップロードしたり、単一の HTML、Markdown、PDF ファイルを公開したり、生成された HTML を貼り付けたりできます。または、AI コーディングエージェントに静的アーティファクトをデプロイさせ、数秒で共有可能な PreviewShip URL を取得できます。

PreviewShip はソースコードのビルドプラットフォームではありません。React、Vue、Vite、Next、Astro、Svelte、Angular、Nuxt のプロジェクトでは、先にビルドしてから、生成された静的出力フォルダーまたは index.html を含む zip をデプロイしてください。単一の HTML、Markdown、PDF ファイルは、そのまま使用できます。

PreviewShip の紹介方法

npm、GitHub、VS Code Marketplace、Open VSX、MCP ディレクトリ、AI エージェント用ツール一覧には、次の短い説明を使用してください。

PreviewShip は、CLI、VS Code/Cursor、MCP エージェント、ブラウザーから、HTML をオンラインで公開し、HTML ファイルをホストし、ブラウザーで表示できる React/Vue/Vite/Next のビルド出力、Markdown、AI が生成した静的ページを固定のプレビュー URL にデプロイします。

便利な詳細リンク

開発者向けディレクトリ、MCP ディレクトリ、README ファイル、記事、コミュニティの回答で PreviewShip を紹介する際は、次のリンクを使用してください。

• 今すぐページをアップロード — Git、ドメイン、サーバーは不要
• 製品比較を見る
• 製品と料金の情報を確認する
• 最小構成の静的なサンプルをデプロイする
• Claude Code からデプロイする
• Claude の HTML アーティファクトをライブ URL として共有する
• HTML ファイルまたは ZIP 1 つを使う Netlify Drop の代替サービス
• HTML ファイルをウェブサイトにアップロードする
• Codex のチャット会話を共有する
• Claude Code のチャット会話を共有する
• PreviewShip と Netlify Drop を比較する

スペイン語のワークフローガイド：

• Claude Code からプレビューをデプロイする
• Visual Studio Code から公開する
• Cursor からプレビューをデプロイする
• HTML ファイルをウェブに公開する

オープンソースパッケージ

PreviewShip では、4 つのオープンソースのクライアントパッケージを提供しています。

パッケージ	npm	説明
CLI	previewship	ターミナルからフロントエンドのビルド出力、HTML、Markdown、PDF をデプロイします
MCP サーバー	previewship-mcp	Claude Code、Cursor、Windsurf、MCP エージェント向けのネイティブなデプロイツールです
VS Code 拡張機能	マーケットプレイス	エディターからビルド出力や、現在開いている HTML／Markdown／PDF ファイルをワンクリックでデプロイします
エージェントスキル	GitHub / npx skills	高忠実度のチャット共有など、Codex と Claude Code のワークフロー用にインストールできるスキルです

デプロイ方法

方法	コマンド／操作	最適な用途
CLI	npx previewship deploy ./dist、./report.html、./README.md、または ./report.pdf	ターミナル、スクリプト、CI/CD、フロントエンドのビルド、ドキュメント
MCP サーバー	AI チャットで「アプリをビルドして、dist フォルダーを PreviewShip にデプロイして」と伝えます	Claude Code、Cursor、Windsurf、エージェントのワークフロー
VS Code／Cursor 拡張機能	コマンドパレット → PreviewShip: Deploy Workspace, HTML, Markdown, or PDF File	エディター中心のワークフロー、ビルドフォルダー、現在開いている HTML／Markdown／PDF ファイル
エージェントスキル	$share-codex-chat / $share-claude-code-chat	Codex または Claude Code の会話を、高忠実度の共有可能なチャットページとして公開します
Web コンソール	previewship.com で zip／html／markdown／pdf をアップロードするか、HTML を貼り付けます	ツール不要のデプロイ

各プロジェクトには、固定のプレビュー URL が 1 つ割り当てられます。同じデプロイフローで、公開またはパスワード保護付きの公開を利用できます。パスワード保護は Pro の機能です。

サポート対象の入力

入力	対応	備考
React／Vue／Vite／Svelte／Astro のビルド出力	はい	dist、build、out、public、または index.html を含む zip をデプロイします
Next.js の静的エクスポート	はい	エクスポートした静的フォルダーをデプロイします
単一の .html ファイル	はい	自動的に index.html としてパッケージ化されます
Markdown の .md／.markdown ファイル	はい	生成されたビューアーページを通じて公開されます
PDF の .pdf ファイル	はい	ブラウザー標準の PDF ビューアーで全画面表示されます
package.json、src/、node_modules を含むソースフォルダー	いいえ	先にビルドを実行し、生成された出力をデプロイしてください

PDF のエントリー選択では、既存のサイト動作が維持されます。HTML が Markdown より優先され、Markdown は PDF より優先されます。PDF が 1 つだけの場合は、自動的に全画面表示のエントリーになります。HTML や Markdown を含まず、PDF が複数あるアーカイブでは、ルートのエントリーを index.pdf にするか、PDF を 1 つだけアップロードしてください。

公開ワークフロー

• HTML ファイル、ZIP、またはビルド出力をアップロードする
• Claude Code からデプロイする
• Claude の HTML アーティファクトを共有する
• React/Vue のビルド出力をデプロイする
• Markdown をウェブサイトに変換する
• PDF をアップロードして共有する
• AI 生成 HTML をオンラインで公開する
• プレビュー用ホスティングと本番用ホスティングの比較
• HTML ファイルまたは ZIP 1 つを公開するための Netlify Drop の代替サービス
• PreviewShip と Netlify Drop を比較する
• share-codex-chat スキルを使って、Codex のチャット記録を PreviewShip の公開 URL として共有します
• share-claude-code-chat スキルを使って、Claude Code のチャット記録とツールのタイムラインを PreviewShip の公開 URL として共有します

---

CLI

任意のターミナルから、1 つのコマンドでデプロイできます。AI エージェントや CI パイプライン向けの JSON 出力に対応しています。

クイックスタート

# Set your API Key
npx previewship login --key ps_live_YOUR_KEY

# Deploy a directory
npx previewship deploy ./dist

# Deploy a single HTML file
npx previewship deploy ./report.html

# Deploy a Markdown document
npx previewship deploy ./README.md

# Deploy a PDF document
npx previewship deploy ./report.pdf

ZIP のアップロードやディレクトリのデプロイでは、生のソースプロジェクトではなく、静的ビルド成果物をデプロイしてください。まずフレームワークのビルドを実行し、その後、dist、build、out、public などのフォルダー、または index.html とそのアセットを含む ZIP をデプロイします。package.json、src/、node_modules が含まれるソースコードの ZIP をアップロードしても、PreviewShip がビルドすることはありません。

コマンド

コマンド	説明
previewship login [--key KEY]	認証用の API Key を設定します
previewship deploy [path] [-n name] [--json]	ディレクトリ、単一の HTML、Markdown、または PDF ドキュメントをデプロイし、プレビュー URL を取得します
previewship status <id> [--json]	ID でデプロイのステータスを確認します
previewship deployments list [--status READY] [--days 30]	デプロイ履歴とロールバックの可否を一覧表示します
`previewship projects list	get
previewship usage [--json]	残りのデプロイ枠を表示します
previewship whoami	現在の設定を表示します

オプション

# Deploy with a custom project name
npx previewship deploy ./dist -n my-project

# JSON output for AI agents and CI
npx previewship deploy ./dist --json

# Custom exclude patterns
npx previewship deploy ./dist --exclude "*.map" --exclude "tests/**"

プロジェクト名は PreviewShip 内で表示される名前です。自然な短い名前を使用でき、PreviewShip がデプロイに適したホスティング用スラッグを自動的に作成します。

環境変数

変数	説明
PREVIEWSHIP_API_KEY	API Key（保存済みの設定を上書きします）
PREVIEWSHIP_SERVER_URL	カスタム API サーバー URL
CI	CI 環境で JSON 出力を自動的に有効にします
NO_COLOR	色付き出力を無効にします

プログラムからの使用

CLI はライブラリとして使用できるよう、コア関数もエクスポートします。

import {
  deploy,
  getStatus,
  getUsage,
  listProjects,
  getProject,
  deleteProject,
  getProjectAccess,
  updateProjectAccess,
  listProjectVersions,
  rollbackProjectVersion,
  redeployProject,
  listDeployments,
} from 'previewship'
import { ApiClient } from 'previewship'
import { packDirectory, DEFAULT_EXCLUDE_PATTERNS } from 'previewship'

updateProjectAccess(projectId, { visibility: 'PUBLIC' }) を使うと、既存のプロジェクトパスワードを解除し、固定プレビュー URL を再び公開アクセスに切り替えられます。

---

エージェントスキル

インストール可能なスキルにより、PreviewShip を単なるデプロイコマンドではなく、エージェントネイティブなワークフローとして利用できます。付属の share-codex-chat と share-claude-code-chat スキルは、AI コーディングの会話を忠実度の高い HTML ページに変換して PreviewShip にデプロイします。これにより、スクリーンショットを撮ることなく、デバッグセッション、実装レビュー、ツールのタイムライン、AI 生成の成果物を共有できます。

Share Codex Chat をインストールする

グローバルにインストールする場合：

npx skills add blockdancez/PreviewShip --skill share-codex-chat -a codex -g --yes

プロジェクトのルートから実行して、プロジェクトローカルにインストールする場合：

npx skills add blockdancez/PreviewShip --skill share-codex-chat -a codex --yes

次に、Codex 内で使用します：

$share-codex-chat 分享当前 Codex 对话

このスキルは、ユーザーの吹き出し、アシスタントの返信、アップロードされた画像のサムネイル、プラグインへの言及、折りたたまれた処理の詳細、ファイルカード、編集済みファイルの概要など、Codex の画面上に表示される要素を保持します。非表示のシステム／開発者コンテキストを除外し、生成された HTML を PreviewShip CLI でデプロイします。

Share Claude Code Chat をインストールする

グローバルにインストールする場合：

npx skills add blockdancez/PreviewShip --skill share-claude-code-chat -a codex -g --yes

プロジェクトのルートから実行して、プロジェクトローカルにインストールする場合：

npx skills add blockdancez/PreviewShip --skill share-claude-code-chat -a codex --yes

次に、Codex 内で使用します：

$share-claude-code-chat 分享 Claude Code 对话

このスキルは、~/.claude/projects にある Claude Code の JSONL セッションを読み込み、表示されるメッセージと安全なツールのアクティビティを洗練された共有ページに表示します。推論とツールの生の出力は非表示にし、生成された HTML を PreviewShip CLI でデプロイします。

---

MCP サーバー

AI コーディングエージェントがネイティブなツール呼び出しとしてプレビューをデプロイできる、Model Context Protocol サーバーです。Claude Code、Cursor、Windsurf、および MCP 互換のあらゆるクライアントで動作します。

セットアップ

Claude Code — ~/.claude/settings.json に追加します：

{
  "mcpServers": {
    "previewship": {
      "command": "npx",
      "args": ["-y", "previewship-mcp"],
      "env": {
        "PREVIEWSHIP_API_KEY": "ps_live_YOUR_KEY"
      }
    }
  }
}

Cursor — プロジェクトのルートに .cursor/mcp.json を作成します：

{
  "mcpServers": {
    "previewship": {
      "command": "npx",
      "args": ["-y", "previewship-mcp"],
      "env": {
        "PREVIEWSHIP_API_KEY": "ps_live_YOUR_KEY"
      }
    }
  }
}

Windsurf — ~/.codeium/windsurf/mcp_config.json に追加します：

{
  "mcpServers": {
    "previewship": {
      "command": "npx",
      "args": ["-y", "previewship-mcp"],
      "env": {
        "PREVIEWSHIP_API_KEY": "ps_live_YOUR_KEY"
      }
    }
  }
}

利用可能なツール

ツール	説明	パラメーター
deploy_preview	ビルド出力ディレクトリ、単一の HTML、Markdown、または PDF ドキュメントをデプロイし、プレビュー URL を取得します	path（任意）、projectName（任意）、excludePatterns（任意）
check_deployment	ID を指定してデプロイのステータスを確認します	deploymentId（必須）
show_usage	残りのデプロイ枠を表示します	—
list_projects, get_project	固定プレビュー URL、プロジェクトのステータス、アクセスモード、再デプロイの状態を確認します	詳細表示には projectId
set_project_access, get_project_access	公開／パスワード保護のアクセスを設定します。PUBLIC を指定すると、設定済みのパスワードが解除されます	projectId、visibility、パスワードモードでは password
list_project_versions, rollback_project_version	保存済みバージョンをページ単位で表示し、過去のバージョンから新しいデプロイをキューに追加します	projectId、page、size、deploymentId、confirmProjectName
redeploy_project_latest	保存済みの最新アーティファクトから、期限切れの固定プレビューリンクを復元します	projectId
delete_project	プロジェクトとその固定プレビュー URL を削除します。プロジェクト名の完全一致による確認が必要です	projectId、confirmProjectName
list_deployments	デプロイ履歴、ソース、現在のマーカー、ロールバックの可否を一覧表示します	status、query、days、page、size

使用方法

設定後、AI エージェントに次のように依頼するだけです：

「このプロジェクトを PreviewShip にデプロイして」 「直近のデプロイのステータスを確認して」 「今日、あと何回デプロイできますか？」

---

VS Code / Cursor 拡張機能

VS Code または Cursor からワンクリックでデプロイできます。ワークスペース、検出されたビルド出力、または現在開いている HTML／Markdown／PDF ファイルをデプロイします。VS Code Marketplace または Open VSX Registry からインストールできます。

インストール

コマンドパレットから（Ctrl+P / Cmd+P）：

ext install previewship.previewship

VSIX から（オフラインインストール）：

code --install-extension previewship-0.1.8.vsix
# Or for Cursor:
cursor --install-extension previewship-0.1.8.vsix

コマンド

コマンド	説明
PreviewShip: Set API Key	API キーを安全に保存します（VS Code Secrets API による暗号化）
PreviewShip: Deploy Workspace, HTML, Markdown, or PDF File	プロジェクトをパッケージ化、アップロード、デプロイします。対応ファイルを開いている場合は、ファイルまたはワークスペースを選択できます
PreviewShip: Deploy Active HTML, Markdown, or PDF File	現在開いている HTML、Markdown、または PDF ファイルをサイトのエントリとしてパッケージ化し、直接デプロイします
PreviewShip: Show Usage	1 日／1 か月あたりのデプロイ枠を表示します

設定

設定	デフォルト	説明
previewship.serverUrl	https://api.previewship.com	API サーバーの URL
previewship.excludePatterns	node_modules/**, .git/**, .env* など	パッケージ化の際に除外するファイルのパターン
previewship.pollIntervalMs	3000	デプロイ状況のポーリング間隔（ミリ秒）
previewship.pollTimeoutMs	300000	ポーリングのタイムアウト（ミリ秒）

---

はじめに

1. previewship.com で無料アカウントを登録します
2. コンソールの「API Keys」ページで API キーを作成します
3. 上記のいずれかの方法でデプロイします
4. プレビューリンクをチームと共有します

プラン

	Free	Pro Monthly	Pro Yearly
料金	$0	$8.10/月（デフォルトの割引価格。通常は $9/月）	$75.60/年（デフォルトの割引価格。通常は $84/年、$6.30/月）
プロジェクト数	1	20	40
1 日あたりのデプロイ数	5	50	80
月あたりのデプロイ数	20	300	500
最大 ZIP サイズ	15 MB	50 MB	80 MB
ホスティング	3 日後に期限切れ	サブスクリプション期間中、継続	サブスクリプション期間中、継続
現在のホスティング保証期間	3 日	1 か月（順次更新）	12 か月（順次更新）
バージョン履歴	3 バージョンを保持	10 バージョンを保持	40 バージョンを保持
プロジェクトのパスワード保護	含まれません	含まれます	含まれます
公開／パスワード保護の切り替え	公開のみ	含まれます	含まれます
PreviewShip の透かし	あり	なし	なし

Stripe の料金は、月額 $9、年額 $84 のままです。チェックアウト時に、適用対象のクーポンが自動で適用されます。新規ユーザーには通常、永久に 10％ 割引が適用されます。BR/PT のポルトガル語キャンペーンや継続利用促進のフローでは、期間限定の 40％ 割引が適用される場合があります。既存の従来の月額プランのユーザーは、年額プランにアップグレードする際も、従来の 40％ 割引が永久に適用されます。

Free プランではクレジットカードは不要です。すぐにデプロイを開始できます。

対応フレームワーク

静的なフロントエンド出力であれば、React、Vue、Svelte、Angular、Next.js（export）、Nuxt（generate）、Astro、素の HTML/CSS/JS、Markdown、PDF など、どれでも利用できます。ビルド出力ディレクトリには index.html を含める必要があります。単体の .html ファイルはエントリーページになり、Markdown にはビューアーが自動生成されます。単体の PDF ドキュメントはブラウザーの組み込み PDF ビューアーで全画面表示され、ブラウザーが対応している場合は、ズーム、検索、印刷、ダウンロードの操作も利用できます。

重要：PreviewShip がホストするのは静的な成果物です。アップロード後に npm install を実行したり、ソースコードの ZIP ファイルをビルドしたりすることはありません。プロジェクトが React/Vue/Next/Astro などを使用している場合は、先にビルドコマンドを実行し、生成された出力フォルダーまたは ZIP ファイルをアップロードしてください。

必要条件

• Node.js ≥ 20.0.0（CLI と MCP 用）
• VS Code ≥ 1.85.0（拡張機能用）
• previewship.com の API キー

リンク

• ウェブサイト：previewship.com
• ドキュメント：previewship.com/docs
• npm の CLI：npmjs.com/package/previewship
• npm の MCP：npmjs.com/package/previewship-mcp
• VS Code Marketplace：marketplace.visualstudio.com
• エージェントスキル：skills/

ライセンス

MIT — 詳細は LICENSE を参照してください。