サンドボックス環境を MCP サーバーで提供する Container Use
AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボ
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
v0 の SDK を試してみる
v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK
Claude Code で前回の会話の続きを開始する
Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。
値の補間計算を簡潔に記述できる CSS の `progress` 関数
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、
Claude Code の Hooks で作業が終わった後にフォーマッターを実行する
Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では
ワンクリックで MCP サーバーをインストールする .dxt ファイル
Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインスト
MCP の Structured tool output を試してみる
MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールド
Claude Code でカスタムスラッシュコマンドを作成する
Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカス
ブラウザから MCP サーバーに接続する use-mcp React フック
use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth
A2A プロトコルの JavaScript SDK を試してみる
A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。
バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう
バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。
OpenAI Agents の TypeScript SDK
OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用
フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI
AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。
Claude Code のタスクの完了を通知する方法
AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude
コーディングエージェントの現状の整理とエンジニアの仕事の変化について
AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。
Claude Code Action で Claude Code を GitHub に統合しよう
Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができま
Mastra の A2A プロトコルサポート
Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、M
TypeScript で AI エージェントを構築する VoltAgent
VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを
React Router の Server Components 対応
React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファース
Vercel で MCP サーバーを構築する
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して
Cloudflare で MCP サーバーを構築する
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワ
Error インスタンスかどうか判定する Error.isError() メソッド
Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。
Docker の MCP Toolkit を試してみる
Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された D
ESLint を MCP サーバーとして実行する
ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。
actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す
actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになり
UI の一部を非表示にする React の Activity コンポーネント
React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。
AIと本音トーク：エンジニアの仕事、これからどうなる？
「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。
Ink を使って CLI アプリを React で書く
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Code
MCP サーバーの Streamable HTTP transport を試してみる
MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされ
AI エージェントの連携を標準化する A2A プロトコルを試してみる
AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されていま
コーディング AI エージェントを自作してみよう
好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過
Vercel AI SDK で MCP クライアントをツールとして利用する
MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして
::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る
カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカル
Vercel AI SDK を使って Next.js アプリに AI 機能を追加する
Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発
TypeScript で MCP サーバーを実装し、Claude Desktop から利用する
MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コー
TypeScript 製の AI エージェントフレームワーク Mastra
Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りするこ
ブログで llms.txt を提供してみた
従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題と
インラインで条件分岐する CSS の if() 関数
if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。
ブラウザで非同期イベントストリームを処理する Observable API
Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供しま
ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール
Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされてい