mcpField
N
nightglass

nightglass

ローカル
github.com/mizukaizenブラウザ自動化031 週間前に更新

nightglass について

nightglass は、nightglass screenshot API を使ってウェブサイトのスクリーンショットを MCP クライアントに提供する MCP サーバーです。ページ全体の撮影、複数の出力形式、ブラウザーフレームのモックアップ表示に対応します。

主な機能

  1. 01ウェブサイトのスクリーンショット撮影
  2. 02PNG、JPEG、WebP の出力
  3. 03スクロール可能なページ全体の撮影
  4. 04ビューポートと待機時間の設定
  5. 05ダークモードのエミュレート
  6. 06残高と撮影クレジットの確認

活用シーン

  1. 01会話内でウェブサイトの画像を確認する
  2. 02長いページを撮影して確認する
  3. 03ブラウザーフレーム付きで画像を表示する
  4. 04残りの撮影クレジットを確認する

MCP 対応

MCP サーバーは take_screenshot と check_balance をクライアントに提供します。nightglass screenshot API で画像を生成し、PNG などの形式で返します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"mizukaizen-nightglass": {
"command": "npx",
"args": [
"-y",
"nightglass-mcp"
],
"env": {
"NIGHTGLASS_API_KEY": "<NIGHTGLASS_API_KEY>"
}
}
}
}
起動コマンドnpx -y nightglass-mcp
設定が必要な環境変数
NIGHTGLASS_API_KEYシークレットYour nightglass API key from api.nightglass.xyz/dashboard

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmnightglass-mcp1.0.0

ツール

2

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
urlstringはいスクリーンショットを撮影するウェブサイトの URL
delayintegerいいえページ読み込み後、キャプチャ前に待機する時間(ミリ秒)。JavaScript を多用するサイトで便利です。
styleenumいいえraw = 通常のスクリーンショット、mockup = ブラウザーのフレーム内に表示するスクリーンショットraw | mockup
formatenumいいえ画像形式(デフォルト:png)png | jpeg | webp
dark_modebooleanいいえprefers-color-scheme: dark を使ってダークカラースキームをエミュレートします。
full_pagebooleanいいえビューポートだけでなく、スクロール可能なページ全体をキャプチャする
viewport_widthintegerいいえビューポートの幅(ピクセル単位、デフォルト:1280)
viewport_heightintegerいいえビューポートの高さ(ピクセル単位、デフォルト:720)

詳細

nightglass MCP サーバー

Claude Desktop、Cursor、Windsurf、Claude Code など、MCP 対応クライアントからウェブサイトのスクリーンショットを撮影できます。

nightglass のスクリーンショット API を利用しています。

ツール

take_screenshot

任意のウェブサイトのスクリーンショットを撮影します。PNG 画像が会話に直接返されます。

パラメーター:

パラメーター型デフォルト説明
urlstring必須スクリーンショットを撮影する URL
formatpng | jpeg | webppng出力形式
styleraw | mockuprawmockup はスクリーンショットをブラウザーのフレームで囲みます
full_pagebooleanfalseスクロール可能なページ全体を撮影します
viewport_widthnumber1280ビューポートの幅(320~3840)
viewport_heightnumber720ビューポートの高さ(200~2160)
delaynumber0ページ読み込み後の待機時間(ミリ秒)
dark_modebooleanfalseダークカラースキームをエミュレートします
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$050—
Starter$5500$0.010
Growth$202,500$0.008
Scale$5010,000$0.005
Enterprise$20050,000$0.004

AI エージェント: nightglass は x402 にも対応しています。Base 上の USDC による自律型エージェント決済を利用できます。API キーは不要です。

リンク

ライセンス

MIT

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。