タグ: typescript

AI活用

ReactでComfyUIの生成状況を表示する｜状態管理とプレビューの作り方

ReactでComfyUIの生成状況を表示する設計を解説。idle/queued/running/success/error/cancelledの6状態とuseReducerの遷移、WebSocketをHookに閉じ込める形、進捗率を捏造しない表示、Cancel・Retry、リロード後の復元まで分かります。

AI活用

Next.jsからComfyUIを呼ぶ画像生成アプリ｜APIを安全に隠す構成

Next.jsのRoute Handlerを間に置き、ComfyUIの接続先とworkflowをサーバー側に閉じ込める3層構成を解説。zodによる入力検証、client層の分離、画像の中継、外部公開前の認証・レート制限・タイムアウトまで分かります。

AI活用

ComfyUIをTypeScriptから実行する｜公式SDKでWorkflowを呼び出す方法

ComfyUIをTypeScriptから動かすには、公式SDK「@comfyorg/sdk」（Comfy API v2用、Beta 0.1.x）を使い、ローカルはcomfy-api-proxy経由で接続します。最小プロジェクト、Workflowと入力値の分離、型付きの結果取得、失敗とTimeoutの区別、SDK更新に強いラッパー層の作り方を解説します。

AI活用

MCPクライアントの作り方｜TypeScriptでServerへ接続してToolを呼ぶ

公式TypeScript SDKでMCPクライアントを作り、stdio接続、Tool一覧取得・実行、結果とエラーの判定、タイムアウト、切断までを実行ログ付きで解説します。

AI活用

MCPサーバーの作り方｜Node.js・TypeScriptで最初のToolを実装する

MCPサーバーをNode.jsとTypeScriptで作り、公式SDK、Zod、stdioを使ってノート検索Toolを登録し、接続設定と安全対策まで解説します。

AI活用

Claude Structured Outputsの使い方｜TypeScriptでJSON Schema準拠の出力を得る

Claude Structured OutputsをTypeScriptから使い、output_config.format、JSON解析、strict tool use、拒否・max_tokens・スキーマ制限への対処を解説します。

AI活用

Vercel AI SDKの使い方｜Next.jsでマルチモデル対応AIアプリを作る

Vercel AI SDKをNext.jsで使い、OpenAI・Claude・Geminiをprovider設定で切り替える最小構成、generateText、streamText、本番確認を解説します。

AI活用

Claude APIをTypeScriptで使う方法｜Messages APIの最小実装

Claude APIの公式TypeScript SDKとMessages APIで最初の応答を取得し、content block、system、エラー、request IDを扱う最小構成を解説します。