はてなブックマーク

{ "scripts": { "dev": "tsx watch src/index.ts" } } AG-UI リクエストを解析する まずは、AG-UI リクエストを解析して返すだけのエンドポイントを作成します。src/index.ts ファイルを作成し、以下のコードを追加します。 import express from "express"; import { RunAgentInputSchema, RunAgentInput } from "@ag-ui/core"; const app = express(); app.use(express.json()); app.post("/awp", async (req, res) => { try { // Zod スキーマでリクエストボディを検証 const input: RunAgentInput = RunAgentInputS

コーディングエージェントの現状の整理とエンジニアの仕事の変化について AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。 コーディングの仕事における AI 技術の関わりといえば、GitHub Copilot を代表するエディタ補完型が主たるものとして認識されてきました。補完型の AI はユーザーが途中まで書いたコードを補完する形で提案を行うことから、ペアプログラムの相方のような存在として捉えられていました。例えば function add と書き始めると、AI は (a: number, b: number): number { return a + b; } といった形で関数の定義を提案します。ユーザーは Tab

Claude Code Action で Claude Code を GitHub に統合しよう Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。 Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼できます。 Claude Code Action のセットアップ Claude Code Action のセットアップは非常に簡単です。ターミナル上で Claude Code を使用してコマンドを実行するだけです。前提として Cla

Mastra の A2A プロトコルサポート Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 A2A プロトコルは AI エージェント間の連携を実現するために設計されたオープンな標準です。異なるチームや組織が開発した AI エージェントが相互に通信し、協力してタスクを実行することを可能にします。 Mastra は TypeScript で AI エージェントを構築するためのフレームワークであり、A2A プ

TypeScript で AI エージェントを構築する VoltAgent VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。構築した AI エージェントの監視やデバッグを行うためのツールとして VoltAgent Console が提供されている点も特徴です。このツールを使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化したりで

React Router の Server Components 対応 React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React Router はプレビュー版として Server Components に対応しました。これにより以下のような機能が追加されました。 loader や actions を使用してデータを返す際にコンポーネント渡せる

Today we're announcing Integrations, a new way to connect your apps and tools to Claude. We're also expanding Claude's Research capabilities with an advanced mode that searches the web, your Google Workspace, and now your Integrations too. この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。完成したコードは以下のリポジトリで確認できます。 Next.js プロジェクトを作成する まずは以下のコマンドを実行して Next.js プロジェクトを作成します。 npx create-next-app@late

Cloudflare で MCP サーバーを構築する Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。従来の MCP サーバーは stdio を使用してローカルで実行されることが一般的であったため、デスクトップアプリケーションや

Docker の MCP Toolkit を試してみる Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。従来ローカルで MCP サーバーを実行するためには JavaScript の npm や Python の uv といったパッケージ管理ツールを使用して直接コ

ESLint を MCP サーバーとして実行する ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 ESLint v9.26.0 から、ESLint を[MCP（Model Context Protocol](feat: Add MCP server by nzakas · Pull Request #19592 · eslint/eslint) サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正できるようになります。 ESLint を MCP サーバーとして実

actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 actions/ai-inference は GitHub Actions のワークフローから GitHub Models を呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単

UI の一部を非表示にする React の Activity コンポーネント React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React の新しい実験的なコンポーネントとして <Activity> が追加されました。これは UI の表示非表示を切り替えるために使用されます。 import { unstable_Activity as Activity } from "react"; function App({ isVisible }: { isVisible: boolean }) { return (

AIと本音トーク：エンジニアの仕事、これからどうなる？ 「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。 AI インタビュアーです: ポッドキャスト『未来の働き方』へようこそ。 本日のテーマは「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」です。 技術の進化によって、私たちのプログラミングの方法や開発プロセスが大きく変わりつつある今、エンジニアの皆さんにとって、この変化はどのような意味を持つのでしょうか。 まずは、AI コーディングエージェントについてのご経験や印象からお聞かせいただけますか？日常の開発作業の中で、すでに何らかの形で AI ツールを活用されていますか？ azukiazusa: 最近は、コードを書く量を意識的に減らすようにしていて、出来る限り

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

MCP サーバーの Streamable HTTP transport を試してみる MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。 MCP（Model Context Protocol）では JSON-RPC を使用してメッセージをエンコードしています。クライアントとサーバー間のトランスポート方式として以下の 2 つが定義されています。 stdio: 標準入出力を介した通信（主にローカル実行向け） Streamable HTTP: HTTP ストリーミングを介した通信（リモートサーバ

AI エージェントの連携を標準化する A2A プロトコルを試してみる AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。 AI エージェントとはユーザーに代わって目標達成のために自律的に選択してタスクを遂行する AI 技術のことです。従来のチャット型の AI ツールは 1 つのタスクを完了するたびに再度ユーザーの指示を待つ必要がありました。AI エージェントは実行したタスクのフィードバックを元に次のタスクを選択し、ユーザーにの介入を最小限に抑えることができます。 AI エージェントが効果的に目

コーディング AI エージェントを自作してみよう 好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。 好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。The End of Programming as We Know It という記事ではプログラミングが終焉を迎えるのではなく、「今日私達が知っているプログラミングの終わり」であると述べられています。AI に置き換えられるのはジュニアおよび中級レベルのプログラマーではなく、新しいプログラミンツールやパラダイムを受け入れず過去に固執するプログラマーであるとというのです。 It is not

Vercel AI SDK で MCP クライアントをツールとして利用する MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。 MCP（Model Context Protocol）は、LLM（大規模言語モデル）に追加のコンテキストや機能を提供するための標準化されたプロトコルであり、AI アプリケーション開発において注目を集めています。MCP を利用することで、LLM は外部ツールやデータソースと連携し、より高度なタスクを実行できるようになります。 MCP サーバーの例としては、以下のようなものが

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。 カルーセルは Web アプリケーションでよく使われる UI コンポーネントの 1 つです。複数の画像をスライド形式で表示する手法であり、ユーザーは左右にスクロールすることで操作できます。カルーセルは一般的な UI パターンであるにも関わらず、標準化された実装方法が存在し

TypeScript で MCP サーバーを実装し、Claude Desktop から利用する MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。 MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。多くの LLM ではユーザーに適切な回答を提供するために追加のコンテキスト情報を必要とします。例えば、今日の天気の情報をユーザーから求められたとしても LLM

TypeScript 製の AI エージェントフレームワーク Mastra Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りできます。Mastra は AI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。 Ma

Note 2025 年 3 月現在では llms.txt は標準化されていない仕様です。この記事に書かれている内容は今後の変更により古くなる可能性があります。 ChatGPT や Grok, Claude, Gimini などの大規模言語モデルはますますウェブサイトの情報に依存してきています。特に最近登場した Deep Research はエージェント型のモデルがウェブサイトを巡回し、多段階のリサーチを自動で実行できるように設計されています。Deep Research が効果的に機能するためには AI エージェントが効率的にウェブサイトの情報を取得できることが重要です。 しかし従来のウェブサイトは人間向けのマークアップが主であり、AI ボットが情報を収集する際には多くの障壁があります。装飾のための CSS, 広告, 複雑な JavaScript などの要素は、本質的な情報の抽出を困難にして

Note 2025 年 3 月現在 if() 関数は Chrome Canary で Experimental Web Platform Features フラグを有効にすることで利用可能です。 if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。 if() 関数の概要 CSS の if() 関数は引数に <条件>:<値> のペアのリストを取り、最初に <条件> が真となる値を返します。条件のリストは ; で区切られます。 .foo { color: if(style(--variant: dark): white; else: black); } <条件> には以下を指定できます。 supports()：指定した CSS の構文がサポートされている場合

Note Observable API は 2025 年 2 月現在 Chrome v135 以降で Experimental Web Platform features フラグを有効にしている場合のみ利用可能です。 Observable API は非同期イベントストリームを処理するための API です。EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。 .when() メソッドが呼び出された際に Observable インスタンスを返します。Observable インスタンスは rxjs の observable とよく似ています。.subscribe() メソッドが呼び出されると、Observable はイベントストリームを開始し、next ハンドラにイベントが通知されるたびにコール

ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール 2025.02.22 Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。 ブラウザによる CSS のサポート状況の差異は、Web 開発者にとって頭痛の種です。新しい CSS プロパティや値を使用する際には、それがどのブラウザでサポートされているかを確認する必要があります。Baseline はそのような問題を解決するためのプロジェクトです。ブラウザで利用可能な JavaScript や CSS のブラウザのサポート状況を明確化することで、We

ボタンが押し込まれた状態を表す Press Button の提案 2025.02.22 UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。 UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。代表的な例としてミュートボタンがあります。ミュートボタンは音声の入力をミュートにするためのボタンで、押し込まれた状態であればミュートになり、押し込まれていない状態であればミュートが解除されていることを表します。 今まではボタンが押し込まれた状態を表現するためにいくつかの

アップグレードされた CSS の `attr()` 関数を使う 2025.02.22 `attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。 attr() 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。よくある使われ方として data-* 属性の値を読み取りその値をコンテンツに表示するというものです。 <ul> <li data-fruit="🍎">Apple</li> <li data-fruit="🍌">Banana</li> <li

Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる 2025.02.22 Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。 Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。OpenTelemetry は分散トレーシングのためのオープンソースの規格です。OpenTelemetry の規格に従うことで、トレース・メトリクス・ログなどのテレメトリーデータをベンダーやツールにとらわれずに収集・エクスポートできるようになります。 一般的に OpenTelemetry を使用してテレメトリーデータを計装するにはプログラミング言語ごとに用意され