Next.js と AI SDK で作った AI アプリを AWS のサーバーレス環境にデプロイできる AWS Blocks を試した

Google Tag Manager のカスタムHTMLタグと Google Apps Script をプロキシとして組み合わせることで、Claude API キーをブラウザに露出させずにチャットボットをWebサイトに埋め込める。GAS のスクリプトプロパティにキーを保管し、フロントエンドからは GAS Webアプリの URL のみで通信する構成により、安全性を確保したまま実装できる。

バックエンド未完成やテスト環境がない場合に、Claude にモックサーバーのコードを生成させて開発を進める手法を解説。API 仕様をプロンプトで指示するだけで、実際に curl で動作確認できるサーバーがその場で用意でき、開発効率を大幅に短縮できる。

iOS ライブラリ検証のため Claude API キーが必要な場合、事前に Claude Console でクレジット購入が必須。請求ページでの金額選択（$5/$20/$100 等）から住所・カード情報入力、購入確定、API キー作成までの全手順と、検証用途でのセキュリティベストプラクティス（有効期限を短く設定）を解説。

紙の契約書をスキャンした画像から Claude Vision API を使って記入済みフィールドを自動読み取り、JSON で構造化データとして出力するパイプラインを Python で実装。Pillow による前処理（EXIF 回転補正、リサイズ）と pydantic によるバリデーションで、転記ミスなく DB 書き込みや CSV 生成に対応できる形に整える。