nightglass について
nightglass は、nightglass screenshot API を使ってウェブサイトのスクリーンショットを MCP クライアントに提供する MCP サーバーです。ページ全体の撮影、複数の出力形式、ブラウザーフレームのモックアップ表示に対応します。
主な機能
- 01ウェブサイトのスクリーンショット撮影
- 02PNG、JPEG、WebP の出力
- 03スクロール可能なページ全体の撮影
- 04ビューポートと待機時間の設定
- 05ダークモードのエミュレート
- 06残高と撮影クレジットの確認
活用シーン
- 01会話内でウェブサイトの画像を確認する
- 02長いページを撮影して確認する
- 03ブラウザーフレーム付きで画像を表示する
- 04残りの撮影クレジットを確認する
MCP 対応
MCP サーバーは take_screenshot と check_balance をクライアントに提供します。nightglass screenshot API で画像を生成し、PNG などの形式で返します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
2掲載時のツール一覧 · 2 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| url | string | はい | スクリーンショットを撮影するウェブサイトの URL |
| delay | integer | いいえ | ページ読み込み後、キャプチャ前に待機する時間(ミリ秒)。JavaScript を多用するサイトで便利です。 |
| style | enum | いいえ | raw = 通常のスクリーンショット、mockup = ブラウザーのフレーム内に表示するスクリーンショットraw | mockup |
| format | enum | いいえ | 画像形式(デフォルト:png)png | jpeg | webp |
| dark_mode | boolean | いいえ | prefers-color-scheme: dark を使ってダークカラースキームをエミュレートします。 |
| full_page | boolean | いいえ | ビューポートだけでなく、スクロール可能なページ全体をキャプチャする |
| viewport_width | integer | いいえ | ビューポートの幅(ピクセル単位、デフォルト:1280) |
| viewport_height | integer | いいえ | ビューポートの高さ(ピクセル単位、デフォルト:720) |
詳細
nightglass MCP サーバー
Claude Desktop、Cursor、Windsurf、Claude Code など、MCP 対応クライアントからウェブサイトのスクリーンショットを撮影できます。
nightglass のスクリーンショット API を利用しています。
ツール
take_screenshot
任意のウェブサイトのスクリーンショットを撮影します。PNG 画像が会話に直接返されます。
パラメーター:
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
url | string | 必須 | スクリーンショットを撮影する URL |
format | png | jpeg | webp | png | 出力形式 |
style | raw | mockup | raw | mockup はスクリーンショットをブラウザーのフレームで囲みます |
full_page | boolean | false | スクロール可能なページ全体を撮影します |
viewport_width | number | 1280 | ビューポートの幅(320~3840) |
viewport_height | number | 720 | ビューポートの高さ(200~2160) |
delay | number | 0 | ページ読み込み後の待機時間(ミリ秒) |
dark_mode | boolean | false | ダークカラースキームをエミュレートします |
check_balance
アカウント残高と、残っているスクリーンショットクレジットを確認します。
セットアップ
1. API キーを取得する
api.nightglass.xyz/dashboard で登録し、API キーを作成します。最初に 50 枚分の無料スクリーンショットを利用できます。
2. インストールする
npm install -g nightglass-mcp
3. MCP クライアントを設定する
Claude Desktop — claude_desktop_config.json に追加します:
{
"mcpServers": {
"nightglass": {
"command": "nightglass-mcp",
"env": {
"NIGHTGLASS_API_KEY": "ng_live_your_key_here"
}
}
}
}
Claude Code — プロジェクトの .mcp.json に追加します:
{
"mcpServers": {
"nightglass": {
"command": "nightglass-mcp",
"env": {
"NIGHTGLASS_API_KEY": "ng_live_your_key_here"
}
}
}
}
Cursor / Windsurf — Claude Desktop と同じ形式で、それぞれの設定ファイルに追加します。
料金
| プラン | 価格 | クレジット | スクリーンショットあたり |
|---|---|---|---|
| Free | $0 | 50 | — |
| Starter | $5 | 500 | $0.010 |
| Growth | $20 | 2,500 | $0.008 |
| Scale | $50 | 10,000 | $0.005 |
| Enterprise | $200 | 50,000 | $0.004 |
AI エージェント: nightglass は x402 にも対応しています。Base 上の USDC による自律型エージェント決済を利用できます。API キーは不要です。
リンク
ライセンス
MIT
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。