はてなブックマーク

agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。 AI エージェントにより効果的にタスクを実行させるためには、適切なフィードバックループを構築することが重要です。特にフロントエンドの開発においては、ブラウザ上での動作確認が欠かせません。しかし AI エージェントは通常ブラウザを直接操作する能力を持っていないので、ツールを提供して AI エージェントがブラウザを操作できるようにする必要があります。 AI エージェントにブラウザを操作させるツールとして Playwright MCP や ChromeDevTools/chrome-devtools

Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。 Claude Code の下部に表示されるステータスラインは自分好みにカスタマイズできます。これは oh-my-zsh のターミナルプロンプト（PS1）をカスタマイズするのと似ています。ステータスラインをカスタマイズすれば以下のように現在のブランチやコンテキストの使用量などを一目で確認できるようになります。 ステータスラインをカスタマイズする方法は以下の 2 つが用意されています。 /statusline コマンド: Claude Code 自身にステータスラインの設定を支援して

Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。 Motia はバックエンド開発をシンプルにすることを目指したフレームワークです。Motia はコアプリミティブな概念である Step で設計されており、REST API, バックグラウンドジョブ, マルチステップワークフロー, AI エージェントの構築など、さまざまなバックエンド機能を 1 つのフレームワークで一貫した方法で実装できます。 Motia の目的は複雑になりすぎたバックエンドの開発をシンプルにし、開発者体験を向上させることです。現代のバックエンド開発では REST API のためのフレームワーク、SQS のようなジョブキューを通じたバックグラウンドジョブ、更にはバッチ処

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。 AI コーディングエージェントにフロントエンドのコードを書かせる際、デザインの正確なコンテキストを提供することが課題の 1 つです。特に何も指定せずにフロントエンドのコードを書かせると、紫色の配色やグラデーションに偏りすぎたり、Inter や Roboto など特定のフォントばかり使用する傾向があります。これは Tailwind UI のような人気の UI フレームワークの初期設定に Indigo（紫色）を採用しており、それが AI モデルの学習データに多く含まれていることが原因と考えられます。 AI によって誰でも一定水準のフロントエンドコードを書けるようになる一方で、画一的な

Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。 Claude のツール検索ツール は Claude がすべてのツール定義を事前にコンテキストウィンドウに読み込むのではなく、必要に応じてツールを検索・呼び出すことができる機能です。これにより、不必要なツール定義がコンテキストウィンドウに含まれてコンテキストを圧迫する問題を回避できます。 2025 年 12 月現在、環境変数 ENABLE_TOOL_SEARCH=true を有効にすることで実験的に Claude Cod

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。 2025 年はとりわけ AI 関連の書籍が多く出版された年であったように感じました。しかし AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。コーディングの分野でも AI によるコード生成を魔法として捉えるのではなく、自分のプログラマーとしての能力を増幅させるためのツールとして捉え、ツールを熟達し磨き上げより良いものにすることが重要なのです。このことはまさに 達人プログラマー に書かれている内容と通じるものがあります。AI 時代だか

Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。 コーディングエージェントが LSP（Language Server Protocol）を扱えるようになることで、エージェントがより効率的にタスクを遂行できるようになります。文字列でコードベース全体を検索するのではなく、LSP を通じてコードの構造やシンボル情報にアクセスできるため、正確な情報を迅速に取得・編集できるためトークンと時間を大きく節約できます。このことはコーディングエージェントにセマンティックなコード検索・編集

React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。 コーディングエージェントに期待したコードを生成してもらうためには、適切なコンテキストを提供することが重要です。しかし Web フロントエンドの分野ではコーディングエージェントの出力結果を元に修正を依頼する、という一般的なワークフローが困難な場合があります。 例えば実装したコードに対してテストを実行するのであれば、コーディングエージェントはターミナルの出力結果を元に修正できます。しかし UI の見た目や動作に関するフィードバックを提供する場合、コーディングエージェントはブラウザ上で実際に動作している UI を直接確認できません。 そのため、UI のスクリーンショットや DOM

TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。 TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。TanStack Router が提供する型安全なルーティング機能に加えて、サーバーサイドレンダリング（SSR）, ストリーミング, サーバー関数, API ルートなどの機能を備えています。この記事では TanStack Start の概要と基本的な使い方を紹介します。TanStack Start は Next.js

TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。 AI エージェントの開発をする上で LLM の API 呼び出しを抽象化してくれるフレームワークは欠かせないものと言えるでしょう。OpenAI や Anthropic などの主要な LLM プロバイダーはそれぞれ公式 SDK を提供していますが、それぞれ異なるインターフェイスを提供しているため複数の LLM モデルを切り替えながら開発する場合には煩雑さが増してしまいます。 この差異を吸収してくれるフレームワークとして TypeScript なら AI SDK、Python なら LangChain が

ツールの実行について Claude に明確なガイドラインを与えるため、両方を許可するのではなく ['direct'] または ['code_execution_20250825'] のいずれかを指定することが推奨されます。 実際にコードを実行してみましょう。以下のようなレスポンスが得られるはずです。 { "model": "claude-sonnet-4-5-20250929", "id": "msg_xxx", "type": "message", "role": "assistant", "content": [ { "type": "text", "text": "最新のTypeScriptの新機能について調べます。" }, { "type": "server_tool_use", "id": "srvtoolu_xxx", "name": "code_execution", "in

Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。 Claude Code v2.0.51 のリリースノートでは「Plan Mode now builds more precise plans and executes more thoroughly（プランモードがより正確な計画を立て、より徹底的に実行するようになりました）」と記載されています。リリースノートでは 1 行だけの説明で具体的な改善内容がわからないのですが、実際に Claude Code のプランモードは定期的に新しい機能が追加されており、プランモードが生まれた当初と比べて大きく進化していることがわかります。 プランモードの改善点は主に以下の 3 つです。 プランの計画に専用のサブエージェントを使用する

MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。 Model Context Protocol (MCP) の問題点の 1 つとしてツールの定義が LLM のコンテキストを圧迫することが挙げられます。ほとんどの MCP クライアントはツールの定義を LLM のシステムプロンプトにすべて渡す設計となっています。これは LLM に事前に利用可能なツールを認識させるために必要な手法です。しかし、タスクの実行に不要なツールの定義まで渡されてしまうため、LLM のコンテキストが無駄に消費されてしまいます。 多くの場

すべての本が正確で信頼できることを主張しているわけではないことに注意してください。信頼性が高い情報が含まれる割合の高さという観点で本とインターネット情報を比較しています。本の中にも誤った情報や偏った情報が含まれることがあります。すべてを鵜呑みにせずに批判的思考を持って情報を評価することが重要です。 本を読む環境を整える この章で私が伝える内容は「スマホを捨てろ」以上です。スマホには多くの誘惑があります。SNS、メール、通知、ゲームなど、スマホは注意を引く要素が満載です。 特に SNS は短時間で多くの情報を消費するように設計されており、集中力を削ぐ最大の要因です。スワイプするたびに「良い情報が得られるかも」という期待感がドーパミンを分泌させます。これはガチャと同じ仕組みです。 スマホが手元にあるだけで、集中力が落ちてしまったという研究結果もあります。ですから読書をする際には、（いえ読書する

MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。 ChatGPT の Apps SDK や MCP-UI のように AI エージェントがチャット形式の対話だけでなく、インタラクティブな UI を通じてユーザーとやり取りできる仕組みが注目されています。AI エージェントが UI を返すことで、会話の流れの中で以下のような体験を提供できます。 「おすすめのランニングシューズを探して」と尋ねると、複数のシューズの画像と価格が表示され、ユーザーは気に入ったものをクリックしてカートに追加できる ホテルの予約を依頼すると、利用可能な部屋のリストが表示され、ユーザーは日付や人数を選択して予約手続きを進められる 希望にあった賃貸物件を探す

Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。 Web アプリケーションにおいてルーティングは重要な要素です。URL はアプリケーションの状態を表現し、ユーザーが特定のリソースにアクセスするための手段となります。id や slug のような一意な識別子を URL に含めることによる動的なコンテキストの提供は、一般的な手法として広く採用されています。 動的なルーティングを実現するために標準的な手法は存在していませんが、Express や Hono, Next.js のような多くの Web フレームワー

MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。 Model Context Protocol (MCP) は登場からおよそ 1 年が経過し、事実的な標準としての地位を確立しつつあります。MCP が普及するにつれて、MCP ツールの課題点も浮き彫りになってきました。その課題の 1 つが、1 つのタスクを達成するために多くのツールが読み込まれ、結果として多くのコンテキストが消費されてしまうという問題です。 前提として、LLM がタスクの達

Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。 Claude Code をはじめとする AI コーディングエージェントは、ファイルの作成・編集・削除やコードの検証を行うためにホストマシンのファイルシステムにアクセスしたり、任意の bash コマンドを実行できる強力な機能を備えています。しかしこれらの機能は誤用や悪用されるリスクも伴います。例えば、エージェントが誤って重要なシステムファイルを削除したり、悪意の

Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。 Claude ではスプレッドシートやスライドを作成するためにスキルと呼ばれる機能を利用します。例えば「以下のマークダウンを元にスライドを作成してください」という指示を与えると、pptx スキル・html2pptx.md ファイルを読み込みスライドの作成方法を確認したうえで、アーティファクトとして pptx ファイルを生成します。 このスキルではスライドの元になる HTML ファイルを作成し、PptxGenJS ライブラリを使用して pptx ファイルを生成する JavaScript コードをサンドボックス内で実行している様子が確認できます。 2025/10/17

2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。 2025 年 10 月 10 日に行われた Remix Jam 2025 にて、Remix v3 が発表されました。Remix v3 は React から離れ、独自のフレームワークとして再設計されるという大きな変更が行われています。Remix v3 で新しいアーキテクチャが導入された理由について、以下の 3 つが挙げられています。 従来のフロントエンドエコシステムの複雑性の解消 Web 標準への回帰とシンプルなモデルの追求 AI エージェント時代への対応 この記事では、Remix v3 の新機能と変更点を実際に動かして試してみた内容を紹介します

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