はてなブックマーク

Playwright Agents のセットアップ Playwright Agents は Playwright v1.56 以降で利用可能です。以下のコマンドで Playwright のエージェントの定義を追加します。--loop オプションは使用している AI エージェントの種類に応じて変更してください。 npx playwright init-agents --loop=claude コマンドを実行すると以下のファイルが生成されます。 .claude/agents/playwright-test-generator.md: Claude Code の SubAgents として Playwright Generator エージェントを定義 .claude/agents/playwright-test-healer.md .claude/agents/playwright-test-p

Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。 Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。 例えば「Booking.com, 箱根の旅行を提案して」といったプロンプトを入力すると、ChatGPT は Booking.com のア

Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。 Claude Code を使用してコーディングを行う上では、以下の設定を活用することでより効果的に作業を進めることが期待できます。 スラッシュコマンド: よく使う操作をスラッシュコマンドとして登録し、素早くアクセスできるようにする サブエージェント: 特定のタスクに特化したサブエージェントを作成し、複雑なタスクを分割して処理する MCP サーバー: 外部ツールと連携するための MCP サーバーを設定し、Claude Code の機能を拡張する

{ "scripts": { "build": "tsc && chmod 755 build/index.js" } } プロジェクトのルートに tsconfig.json を作成します。 { "compilerOptions": { "target": "ES2022", "module": "Node16", "moduleResolution": "Node16", "outDir": "./build", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } src/inde

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。バックエンドや CLI ツールの開発では、生成したコードはターミナル上で実行されログが表示されるため、AI エージェントはコードの実行結果を容易に取得できます。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行され

cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。 cagent は Docker 社が開発した AI エージェントのフレームワークです。コードを 1 行も書かずに YAML ファイルでエージェントの振る舞い・役割・使用するツールを定義できる点が特徴です。Kubernetes のようにエージェントがどのように動作するかを宣言的に定義できるため、エージェントの構築と管理が容易になるように設計されています。1 つの YAML ファイルで複数のエージェントの動作を定義できるため、エージェントの

現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。 今日ではユーザーの操作を代行する AI エージェントが普及しつつあります。ユーザーが旅行の計画を立てる際には、AI エージェントがウェブサイトを検索し宿泊施設やフライトの手段を提案したり、カレンダーから空き時間を確認してスケジュールを調整するといった操作を委任できます。とはいえすべての操作を AI エージェントに任せるわけには

Agentic Workflows は 2025 年 9 月現在研究目的のデモンストレーションとして提供されており、大幅に機能が変更される可能性があります。本番環境での使用は推奨されません。また自己責任で使用してください。 Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。Agentic Workflows は「あらゆるプラットフォームにおけるあらゆるソフトウェアコラボレーションをサポートする自動化された AI」を指す「継続的 AI（Continuous AI）」を実現します。継続的 AI はドキュメントの作成・コードの改善・Issue のトリアージといった自動化可能で繰り返し行われるタスクを支援することを目指しています。GitHub はこの継続的 AI を研究している段階であり、Agentic W

仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。 Kiro と呼ばれる AI IDE の登場は、仕様駆動開発と呼ばれる AI コーディングエージェントを活用した新しい開発スタイルの可能性を示しました。仕様駆動開発とは、まず AI と対話しながら要件定義・システム設計を行い、その後作成した設計書をもとに AI にコード生成を行わせる開発スタイルです。 ユーザーの要求をまず明確な仕様として定義することで、ユーザーが頭の中で思い浮かべていた要

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。 AI コーディングエージェントが登場して以来、開発者の仕事はコードの生成からコードのレビューや設計、AI エージェントの管理へとシフトしつつあります。AI コーディングエージェントは大量のコードを高速に生成できる一方で、生成されたコードが正しいか、セキュリティ上の問題がないか、プロジェクトのスタイルガイドに準拠しているかを確認する必要があります。また、AI エージェントに適切なプロンプトを与え、タスクを分割して効率的に作業を進めるための管理も重要です。 Vibe Kanba

コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。 コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。AI エージェントは人間よりも早い速度で大量のコードを生成でき、開発者の生産性を大幅に向上させる可能性を秘めています。その一方で AI が生成したコードを正しく理解し、コードベースのアーキテクチャに一貫したスタイルで書かれてい

POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。 高度な AI エージェントを開発する際、システムプロンプトの設計は最も重要な要素の 1 つです。システムプロンプトは AI エージェントが果たす役割や、どのようなツールを使用するか、ユーザーと効率的に会話するための工夫が含まれます。このシステムプロンプトの設計が AI エージェントの性能に大きな影響を与えます。例えばコーディングエージェントである Cline のシステムプロンプトを覗いてみると、800 行ものの長大なプロンプトが定義されていることがわかります

TypeScript SDK を使用して MCP UI を実装する MCP UI では TypeScript と Ruby の SDK が提供されています。ここでは TypeScript SDK を使用します。サーバー向けの SDK とブラウザ向けの SDK がそれぞれ提供されています。 @mcp-ui/server - npm: MCP の Resource を実装するためのヘルパー関数を提供する @mcp-ui/client - npm: インタラクティブな UI コンポーネントを提供する. React コンポーネントと Web コンポーネントの両方が提供される。 まずはサーバー側の実装から始めましょう。MCP サーバーの実装として Cloudflare が提供する agents パッケージを使用します。agents パッケージは Streamable HTTP を使用したリモート M

Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。 Qwen3-Coder は、Alibaba が開発した Qwen3 系列の LLM モデルです。Agentic Coding（エージェントを活用したコーディング⁠）や Agentic Browser-Use（エージェントを通したブラウザ操作⁠）⁠⁠の分野で特筆した成果を上げており、Claude Sonnet 4 に匹敵する性能を持つと言及されています。また 256k トークンの長いコンテキストを持つことができ、長大なドキュメントの処理や複雑なコードベースの理解に優れています。 最新のモデルは Qwen3-Coder-30B-A3B-

LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。 Serena はセマンティックなコード検索・編集能力を追加するオープンソースのツールキットです。MCP（Model Context Protocol） サーバーとして動作しているため、Claude Code や Cursor, VS Code のように MCP に対応しているクライアントであれば利用できます。またエージェントフレームワークとして Agno を使用しているため、特定の LLM モデルに依存せずに動作します。 Serena は LSP（Language Server Protocol）を使用してセマンティックなコードを解析するのが特徴です。LSP はコードの構

SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。 昨今の Web フロントエンド開発においてはサーバーとクライアントが統合されたアーキテクチャが主流となりつつあります。例えば React の Server Components はサーバーサイドもしくはビルド時にコンポーネントを事前にレンダリングし、クライアントに静的な HTML を配信することで、初期表示の高速化や SEO の向上を図ることができます。 Server Components 以前よりも Next.js や Sv

Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。 Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。例えばバックエンド領域に特化したエージェント、コードレビューを専門に行うエージェント、デバッグを行うエージェントといった具合です。 カスタムサブエージェントでは特有のシステムプロンプトやツール、独立したコンテキストウィンドウを持ち、Claude Code はサブエージェントにタスクを委任することでより効

現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。 現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？ 答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。下地となる知識がなければそもそも適切なキーワードで検索できません。また知識として整理されていることを知らずに AI に質問をする発想すら生まれないかもしれません。 書籍は情報の最新性においてインター

Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。 Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。要件や設計を文書化し、プロダクションレベルのアプリケーションを継続的に開発することを念頭に置いて設計されています。 ユーザーは自然言語でアプリケーションのアイディアを伝えることで、Kiro は以下の 3 つのフェーズを経てアプリケーションのスペックを生成します。 要件: EARS 表記法を使用して

AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。 Claude Code, Cline, Cursor といった AI コーディングエージェントは多くの開発者に受け入れられており、生産性の向上に大きく貢献しています。他方で安全のために AI コーディングエージェントの実行には注意を払う必要があることを忘れてはいけません。基本的にはユーザーに都度許可を求めるように設計されているものの、AI コーディングエージェントは任意の Bash コマンドを実行できます。例えば rm -rf ~/ のようなコマンドを実行さ

v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。 v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。 自然言語でアプリケーションの要件を v0 に伝えることで React, Next.js, Tailwind CSS を使用した Web アプリケーションのコードを自動生成します。生成したコードは Web ブラウザ上で実行でき、さらにワンクリックで Vercel 上のインフラストラクチャにデプロイが可能です。デザインのモックアップやプロトタイプを迅速に作成するためのツールとして非常に便利です

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 CSS の progress 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。フォントサイズをレスポンシブに調整する流体タイポグラフィ（Fluid typography）や、画面サイズに応じたレイアウトの調整、スクロール量に応じたプログレスバーの表示など、さまざまな場面で利用できます。progress 関数自体で新しい機能を提供できるわけではありませんが、既存の記述方法と比較してよ

Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。 Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks は LLM の実行判断に依存せずに特定のアクションが常に実行されることを保証します。 よくある例としては、コードのフォーマッターを実行することです。人間がコードを書いていた頃はエディタの自動フォーマット機能を使用していたため、フォーマットを実行するタイミングを意識することはなかったと思います。しかし L

Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。 Model Context Protocol (MCP) LLM が外部のツールと対話する方法として標準的な地位を確立しつつあります。現在では MCP の仕様を提案した Anthropic 社が提供する Claude のみならず、OpenAI の GPT-4o や Google の Gemini Pro など、主要な LLM が MCP をサポートしています。 MCP の抱える課題の 1

MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。 Model Context Protocol (MCP) ではサーバーが LLM が呼び出すことができるツールを公開できます。ツールは LLM が外部のシステムと対話をすることを可能にします。例えばユーザーが LLM に対して旅行の計画を依頼した場合には、予約可能なホテルのリストを取得して正確な情報を提供したり、ユーザーのカレンダーに予定を追加したりできます。 MCP ツールを定義する

Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。 Claude Code では / で始まる文字列が組み込みのスラッシュコマンドとして定義されています。スラッシュコマンドを使用することであらかじめ割り当てられた操作を実行できます。よく使われるスラッシュコマンドには以下のようなものがあります。 /add-dir: 現在のディレクトリに加えて、新しいワーキングディレクトリを追加する /clear: 会話履歴をクリアして、コンテキストウィンドウをリセットする /init: 現在のプロジェクトの構成を調査して、CLAUDE.md ファイルを生成する /r

React コンポーネントから MCP サーバーに接続する use-mcp フックを使用したコンポーネントの例を試してみましょう。2025-06-18 バージョンの MCP の仕様ではクライアントとサーバーのトランスポートの方法として stdio と Streamable HTTP が定義されていますが、use-mcp では Streamable HTTP による接続をサポートしています。HTTP もしくは SSE（Server-Sent Events）を使用して MCP サーバーに接続します。 MCP サーバーとして Git MCP を使用します。これは GitHub の任意のレポジトリを MCP サーバーとして利用できるツールです。public なレポジトリであれば認証無しで接続できます。URL はレポジトリの URL の github.com の部分を gitmcp.io に置き換え

A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。 A2A プロトコルは、エージェント間の通信を標準化するためのプロトコルです。多様なフレームワークやベンダー間での相互運用性を促進することを目的としています。 A2A の仕様に基づいて実装された JavaScript SDK が新たに公開されました。この記事では A2A プロトコルの JavaScript SDK を使って、エージェント間通信を試してみます。 プロジェクトのセットアップ まず、プロジェクトをセットアップします。Node.js と npm がインストールされていることを前提としています。 mkdir a2a-example cd a2a-example npm init -y 次に、必要なパ