私のAIエージェントは視覚を持っていなかった。
テキストを読んだり、コードを書いたり、APIを呼び出したりはできたが、ウェブページと連携させようとした瞬間に壁にぶつかった。 「このランディングページが壊れて見えるかを確認してくれ。」 「今、料金ページには何が書かれているか教えて。」 「この競合のホームページの変更を監視して。」 すべてブロックされた。
明らかな解決策は、それにブラウザを与えることだ。 実際の体験は、Puppeteerをインストールし、Chromeのバイナリパスをデバッグし、Lambdaのメモリ制限に達し、ヘッドレスブラウザを検出するサードパーティCDNで壊れるのを見守る、という毎回の午後の無駄な作業だった。
これを解決するために、SnapAPIを作りました。
SnapAPIとは
ヘッドレスブラウザをラップするREST API。URLを送ると、スクリーンショット、PDF、または構造化されたページデータが返されます。Puppeteerも、コンテナも、Chromeバイナリの管理も不要です。
3行のPython vs. DevOpsの週末作業:
importrequestsresp=requests.get("https://snapapi.tech/v1/analyze",params={"url":"https://example.com"},headers={"X-API-Key":"YOUR_KEY"})data=resp.json()(data["title"])# "Example Domain"(data["text_summary"])# "This domain is for use in illustrative examples..."
The three calls I use constantly
1. Analyze — 構造化されたページ情報
これはAIパイプラインの主力作業です。生のHTMLをそのままコンテキストウィンドウに投入する代わりに、/v1/analyzeを使って、クリーンでトークン効率のよいJSONサマリーを取得します。
curl "https://snapapi.tech/v1/analyze?url=https://news.ycombinator.com" \\
-H "X-API-Key: YOUR_KEY"
レスポンス：
{
"url": "https://news.ycombinator.com",
"title": "Hacker News",
"description": "Links to stuff",
"headings": [
{ "level": 1, "text": "Hacker News" }
],
"links": [
{ "text": "new", "href": "https://news.ycombinator.com/newest" },
{ "text": "past", "href": "https://news.ycombinator.com/front" },
{ "text": "comments", "href": "https://news.ycombinator.com/newcomments" }
],
"text_summary": "Ask HN: What are you working on? | 312 comments
Show HN: ...",
"load_time_ms": 847
}この text_summary を生のHTMLの代わりにGPT-4へ渡します。山括弧のトークンを約150kから、実際の内容は約2kトークンへ削減します。
2. Screenshot — 視覚的検証
AIエージェントがスクリーンショットを見ることで、テキスト解析だけでは見落とす可能性のある点を検証できます：壊れたレイアウト、欠落した画像、視覚的な回帰、レンダリングされなかったフォームなど。
curl "https://snapapi.tech/v1/screenshot?url=https://snapapi.tech&width=1280&height=800&format=png" \\
-H "X-API-Key: YOUR_KEY" \\
--output page.png
知っておくと役立つパラメータ：
-
full_page=true— スクロール可能な全体ページをキャプチャします。ビューポートだけではありません。 -
dark_mode=true— ダークモードでレンダリングします（テスト時に有用） -
block_ads=true— キャプチャ前に広告スクリプトをブロックします -
wait_for_selector=.main-content— 取得前に特定の要素が表示されるまで待機します -
delay=1000— 読み込み後（JSが多いSPA向け）Nミリ秒待機します
私はスクリーンショットを直接GPT-4Vへ渡します：「このページは壊れて見えますか？ 昨日から何が変わりましたか？」
3. Batch — 1回の呼び出しで複数のURLを処理
競合の全料金ページを監視したり、50件の製品ページの新鮮さをチェックしたり、データセットを作成したりするとき：
curl -X POST "https://snapapi.tech/v1/batch" \\
-H "X-API-Key: YOUR_KEY" \\
-H "Content-Type: application/json" \\
-d '{
"urls": [
"https://competitor-a.com/pricing",
"https://competitor-b.com/pricing",
"https://competitor-c.com/pricing"
],
"endpoint": "analyze",
"params": {}
}'
レスポンス：
{
"total": 3,
"succeeded": 3,
"failed": 0,
"duration_ms": 2841,
"results": [
{ "url": "https://competitor-a.com/pricing", "title": "Pricing — CompA", "text_summary": "..." },
{ "url": "https://competitor-b.com/pricing", "title": "Plans — CompB", "text_summary": "..." },
{ "url": "https://competitor-c.com/pricing", "title": "Pricing — CompC", "text_summary": "..." }
]
}
1つのAPI呼び出し。3ページ。レート制限のやりくり、スレッド管理は不要。
私自身のパイプラインからの実際のユースケース
AI研究アシスタント: エージェントに「Company X の製品ページには何が書かれているか？」と尋ねられ、/v1/analyze を呼び出し、生のHTMLの代わりに構造化されたJSONをLLMへ渡します。JSが重いSPAでも安定して動作します。
自動ビジュアル回帰検知: デプロイごとに cron ジョブが複数のページに対して /v1/screenshot を呼び出します。スクリーンショットはS3に保存されます。差分スコアが閾値を超える場合、Slackで通知が発生します。コスト：スクリーンショット1枚あたり約0.001ドル。
競合モニタリング: 毎週のジョブで競合の価格設定と機能ページを取得します。LLMが抽出したテキストを先週版と比較します。意味のある変更があればメールで通知します。
OG画像生成: /v1/render は生のHTMLを受け取り、スクリーンショットを返します。スタイル付きのHTMLテンプレートを渡すと、1200×630のソーシャルシェア画像が返ってきます。キャンバスもサーバーレスChromeも、フォントの読み込みの悩みはありません。
その他のエンドポイント
/v1/pdf — 任意のURLからPDFを生成します。レポート、請求書、アーカイブに役立ちます。カスタム余白、ランドスケープモード、背景印刷をサポートします。
/v1/metadata — 軽量で高速なメタデータ取得（タイトル、og:image、canonical、ファビコン）を、完全なレンダリングなしで行います。JavaScriptを実行せず基本的なページ情報だけが必要な場合に使用してください。
はじめに
無料プランはクレジットカード不要です。ダッシュボードで30秒以内にAPIキーを取得できます。
# 1. Sign up at https://snapapi.tech
# 2. Copy your API key from the dashboard
# 3. Try it:
curl \"https://snapapi.tech/v1/analyze?url=https://example.com\" \\
-H \"X-API-Key: YOUR_KEY\"
Full docs at snapapi.tech/docs.
現在のAIパイプラインがURLを取得して生のHTMLをコンテキストウィンドウに投げ込んでいる場合、これは直接的なアップグレードです。構造化された出力、実際のレンダリング、より低いトークンコスト、より高い信頼性。
