Anthony Fu氏は9月16日、Web開発向けツールの作成を支援するフレームワーク「Devframe」のバージョン1.0をリリースした。Devframeを使うと、設定や依存関係の確認、コマンドの実行など、開発作業を助けるツールを作り、Next.jsなどのWebフレームワークやViteなどのビルドツールに組み込んで再利用できる。ツールの機能をAIコーディングエージェントから呼び出す仕組みも持っている。

• Pluggable, Extensible, and Playful DevTools - Devframe

Fu氏は発表記事で、ツールの画面とサーバーの間の通信やデータ同期など、開発者ツールに共通する機能をツールごとに実装してきたと説明する。また、特定のフレームワークや開発サーバーの仕組みに依存するツールが多く、似た機能が環境ごとに作られてきたという。Devframeは共通機能を提供するとともに、作成したツールを異なるフレームワークやビルドツールに組み込めるようにする。

今回のv1.0では、ツール開発に使う公開APIを安定化させた。ソースコードはGitHubでMITライセンスで公開されている。

一つのツール定義を⁠、異なるフレームワークやビルドツールで再利用

Devframeでは、組み込み先に依存しない形でツールを定義する。開発者はdefineDevframe()でツールの名称やサーバー側の処理を記述する。Devframeはこの定義から、ツールへのリクエストを処理する関数（ハンドラー）を生成する。

このハンドラーはWeb標準のRequestを受け取りResponseを返す形式で、Hono、Nitro、Next.js、SvelteKitなど、同じ形式に対応するフレームワークに組み込める。ViteやRsbuildなどのビルドツールには、Node.jsのサーバーへ処理を追加するConnect形式のミドルウェアとして、同じツールを組み込める。

同じツール定義を異なる利用方法に対応させるアダプターも用意されている。フレームワークに組み込まずにツールを起動してブラウザーから利用したり、複数の開発者ツールをまとめるVite DevToolsのプラグインとして組み込んだりできる。

また、ツールの画面とデータを、静的なWebページとして出力できる。出力したページでは、保存済みのデータをブラウザーで閲覧できる。

ブラウザーからツールを利用⁠、複数のツールをまとめるHubも提供

開発するツールには、データの確認やコマンドの実行などをブラウザーから行う画面（Web UI）も設けられる。画面の開発にはVueやSvelte、Solidなどを使える。

Web UIを構成するHTMLやJavaScriptなどのファイルの保存先をツールの定義に指定しておくと、ツールの起動時にその画面をブラウザーで表示できる。ブラウザーとサーバーの連携には、サーバー側の関数を呼び出すRPCや、双方の状態を同期する仕組みを使える。

Devframeには、データの調査やコマンド実行など、開発作業を助けるツールも用意されている。

たとえばData Inspectorでは、Node.jsで動くプログラムの内部データを調べられる。このほか、ブラウザーからコマンドを実行するTerminalsや、Webページのアクセシビリティ上の問題を検出するAccessibility Inspectorなどがある。これらはDevframeを使って作られており、独自のツールを開発する際の実装例にもなる。

複数の開発者ツールをブラウザー上の一つの画面にまとめる仕組みとして、Hubも提供する。各ツールのパネルやコマンド、メッセージ、ターミナルを集約し、利用者がツールごとにURLを開く手間を減らす。Hubの画面には、Devframeが提供するUIのほか、独自に作成したUIも使える。

MCPを通じてAIエージェントからツールの機能を呼び出し

AIエージェントとの連携には、外部ツールやデータへ接続するためのプロトコルとしてMCPを使う。追加パッケージ@devframes/agenticを導入してMCPアダプターを使うと、ツールのサーバー側に実装した機能を、AIエージェントから呼び出せる。

エージェントに公開するRPC関数は、開発者が明示的に指定する。関数の用途や、受け取る引数と返す値の形式も記述できる。

Fu氏は発表記事で、ビルド解析を例に人とエージェントの使い分けも紹介した。人はモジュールのつながりを画面で確認し、エージェントはビルドに時間のかかるモジュールの情報を取得してコードと照合する。

Vite DevToolsやNuxt DevTools v4が採用

公式サイトでは、採用事例として、Vite DevTools、ESLintの設定を確認するESLint Config Inspector、パッケージ間の依存関係を可視化するNode Modules Inspectorなどを紹介している。

発表記事によると、Nuxt DevTools v4はDevframeとVite DevToolsを基盤としている。Nuxt v5に同梱するほか、Nuxt 4でも利用者が手動で導入できるようにする予定。

Vite DevToolsの安定版のリリースも予定されている。Vue DevToolsは、Vite DevToolsを基盤とする構成への移行を進めている。