azukiazusa のテックブログ2

azukiazusa のテックブログ2

azukiazusa.dev/
25
Articles
8月30日 19:01
Last updated
AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

azukiazusa のテックブログ2
tool
LLM へのプロンプトを構造化された文書で管理する POML

LLM へのプロンプトを構造化された文書で管理する POML

POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。

azukiazusa のテックブログ2
api tool
AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI

AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI

MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。

azukiazusa のテックブログ2
api tool
コーディングのための LLM モデル Qwen3-Coder を試してみた

コーディングのための LLM モデル Qwen3-Coder を試してみた

Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。

azukiazusa のテックブログ2
api library tool
Claude Code でカスタムサブエージェントを作成する

Claude Code でカスタムサブエージェントを作成する

Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。

azukiazusa のテックブログ2
api tool
AWS の エージェント IDE Kiro を使ってみた

AWS の エージェント IDE Kiro を使ってみた

Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。

azukiazusa のテックブログ2
library tool
サンドボックス環境を MCP サーバーで提供する Container Use

サンドボックス環境を MCP サーバーで提供する Container Use

AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。

azukiazusa のテックブログ2
api tool
MCP の Structured tool output を試してみる

MCP の Structured tool output を試してみる

MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。

azukiazusa のテックブログ2
api tool
ブラウザから MCP サーバーに接続する use-mcp React フック

ブラウザから MCP サーバーに接続する use-mcp React フック

use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。

azukiazusa のテックブログ2
api tool
Mastra の A2A プロトコルサポート

Mastra の A2A プロトコルサポート

Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。

azukiazusa のテックブログ2
framework tool
React Router の Server Components 対応

React Router の Server Components 対応

React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。

azukiazusa のテックブログ2
Vercel で MCP サーバーを構築する

Vercel で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2
Cloudflare で MCP サーバーを構築する

Cloudflare で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2
Error インスタンスかどうか判定する Error.isError() メソッド

Error インスタンスかどうか判定する Error.isError() メソッド

Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。

azukiazusa のテックブログ2
Docker の MCP Toolkit を試してみる

Docker の MCP Toolkit を試してみる

Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。

azukiazusa のテックブログ2
ESLint を MCP サーバーとして実行する

ESLint を MCP サーバーとして実行する

ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM(大規模言語モデル)は ESLint のルールを使用してコードを修正することができるようになります。

azukiazusa のテックブログ2
actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す

actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す

actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。

azukiazusa のテックブログ2
UI の一部を非表示にする React の Activity コンポーネント

UI の一部を非表示にする React の Activity コンポーネント

React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。

azukiazusa のテックブログ2
AIと本音トーク:エンジニアの仕事、これからどうなる?

AIと本音トーク:エンジニアの仕事、これからどうなる?

「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか?」というテーマについて AI と人間のインタビューを通じて探ります。

azukiazusa のテックブログ2
Ink を使って CLI アプリを React で書く

Ink を使って CLI アプリを React で書く

Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。

azukiazusa のテックブログ2
MCP サーバーの Streamable HTTP transport を試してみる

MCP サーバーの Streamable HTTP transport を試してみる

MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。

azukiazusa のテックブログ2
AI エージェントの連携を標準化する A2A プロトコルを試してみる

AI エージェントの連携を標準化する A2A プロトコルを試してみる

AI エージェント同士の連携を標準化するために Agent2Agent プロトコル(A2A)を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。

azukiazusa のテックブログ2
コーディング AI エージェントを自作してみよう

コーディング AI エージェントを自作してみよう

好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。

azukiazusa のテックブログ2
Vercel AI SDK で MCP クライアントをツールとして利用する

Vercel AI SDK で MCP クライアントをツールとして利用する

MCP(Model Context Protocol)は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。

azukiazusa のテックブログ2
::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る

カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。

azukiazusa のテックブログ2