azukiazusa.dev

AI SDK の MCP Events 対応で MCP サーバーからのイベントを Webhook で受け取る

MCP のクライアントがサーバー側の変化を知るには、ポーリングするか接続を張り続ける必要がありました。MCP Events はサーバーが購読者へイベントを通知するための実験的な拡張で、poll、push、webhook の 3 つの配信モードを定義しています。この記事では MCP Events の概要を説明したうえで、AI SDK の webhook モードの対応を使ってイベントの購読から受信、購読の更新と解除までを試します。

react-devtools-cdt-mcp で AI エージェントが React のコンポーネントツリーを調べられるようにする

Chrome DevTools MCP で AI エージェントはブラウザを操作できますが、DOM からはどのコンポーネントが描画したのか、なぜ遅いのかがわかりません。react-devtools-cdt-mcp はページで import すると、コンポーネントツリーやレンダリング時間を調べるツールを Chrome DevTools MCP に登録する実験的なライブラリです。仕組みとセットアップ、各ツールの出力、Claude Code による調査を試します。

Claude Code の Mods で Claude Code 自身に機能を追加する

Claude Code の Mods は、Claude Code のプロセス内で動く TypeScript/JavaScript の関数でイベントを観察・書き換え・代わりに応答できる仕組みです。settings hooks では難しかった UI の描画や組み込み機能の置き換えもできます。この記事では、危険な Bash コマンドを止めてプロンプトの上に件数を表示する mod を作りながら、Mods の仕組みと設計の背景、セキュリティ上の注意点を紹介します。

Void でフルスタックアプリを構築して Cloudflare にデプロイする

Void は VoidZero が開発した、Vite でフルスタックアプリを構築して Cloudflare にデプロイするためのツールキットです。void/db などの import から必要なリソースを推論し、void deploy コマンド 1 つでD1 データベースの作成、ビルド、マイグレーション、公開までを行います。この記事では、D1 を使ったメモアプリを React で構築し、Cloudflare にデプロイするまでの手順を紹介します。

GitHub Actions の依存関係を lockfile で固定する

GitHub Actions でタグやブランチを参照すると、ワークフローを変更しなくても実行するコードが変わる可能性があります。Workflow dependency lockfiles を使うと、読みやすいタグ表記を残しながら依存先をコミット SHA に固定できます。この記事では GitHub Actions の依存関係を lockfile で固定する方法を紹介します。

Element-scoped View Transitions で要素ごとに View Transition を実行する

`document.startViewTransition()` の遷移はドキュメント全体で 1 つしか実行できず、ページ全体の上に描画されます。`element.startViewTransition()` を使うと、遷移を特定の要素に限定して、複数の遷移を同時に実行できます。この記事では、2 つのリストを同時にアニメーションさせる例を通じて基本的な使い方を紹介します。

Go でデスクトップアプリを作る MyGo を試してみた

MyGo は Go でデスクトップアプリを作るフレームワークです。OS の WebView に Web の画面を表示し、Go のメソッドから生成した TypeScript クライアントでネイティブ機能を呼び出せます。この記事ではテキストをファイルに保存するメモアプリを作り、macOS で起動・保存・ビルドを試します。

CSS の margin-trim でコンテナーの端の余白を取り除く

カードの内側に padding を設定しても、先頭の見出しや最後の段落の margin が加わり、上下の余白が意図より大きくなることがあります。margin-trim を使うと、要素間の余白を保ったまま、コンテナーの端のマージンを取り除けます。カードの例を通して、基本的な使い方を紹介します。