開発者のためのAgent UI
アプリづくりはAIに任せて、コードはいつでも開けます。すべてのアプリに専用のMCPサーバーが付属。CLIを使えば、アプリをエディタに取り込み、コーディングアシスタントと作業して、そのまま公開できます。
npm install -g @agentuiai/cliNode.js 22以降が必要です。
irm https://cdn.agentui.ai/cli/install.ps1 | iexPowerShellで実行してください。Node.jsも管理者権限も不要です。
$ agentui auth login
✓ Signed in as you@acme.com
$ agentui project sync <workflow-id>
✓ entities/ pages/ components/ functions/ mcp/
$ claude "add a reorder button to the stock page"
$ agentui validate --all
✓ No problems found
$ agentui project push --build
✓ Build finished · development- Claude Code
- Cursor
- Codex
- VS Code Copilot
- ChatGPT
- Windsurf
すべてのアプリに、専用のMCPサーバー。
オンにするだけで、Claude、ChatGPT、Cursorなど任意のMCPクライアントが、ユーザーに代わってアプリのデータを検索・変更できます。見えるのは、そのユーザーに許可された範囲だけ。サーバーのホスティングもコードも不要です。
- すべてのテーブルにデータツールを自動生成：list、get、count、create、update、delete
- 環境ごとにひとつのアドレス。オンにするまでは無効
- 閲覧のみ、または読み書き可能な接続。どの接続もいつでも取り消せます
- 呼び出しのたびにデータセキュリティのルールを確認
- アシスタントに社内の手順を教えるガイドとカスタムツール
- data_orders_list
- data_orders_get
- data_orders_count
- data_orders_create
- data_orders_update
- data_orders_delete
- tool_summarize_overdue_invoices
アプリは、ただのフォルダです
アプリを同期すると、本物のコードが手に入ります。JSON形式のデータテーブル、ページ、コンポーネント、バックエンド関数、カスタムAIツール。AGENTS.mdとCLAUDE.mdが、Agent UIアプリの作り方をコーディングアシスタントに教えます。
- 好きなエディタで編集
- プラットフォームと同じバリデーターでチェック
- 公開と再ビルドはコマンドひとつで
編集のサイクル
ファイルを自分で変更しても、アシスタントに頼んでもかまいません。チェックし、差分を確認して、選んだ環境に公開します。環境ごとにデータベースは別々です。
- agentui validate --all
- agentui project diff
- agentui project push --build
$ agentui project diff
M pages/Stock.jsx
A functions/reorder.js
$ agentui project push --build
✓ Uploaded 2 files
✓ Build finished · developmentMCPでアシスタントをつなぐ
Agent UIのMCPサーバーを使えば、Claude、ChatGPT、Cursor、VS Codeからアプリやテーブルを作成し、レコードを読み書きし、アプリの手順を実行できます。常にサインインしたユーザーの権限の範囲内で動作します。インストールも、APIキーのコピーも不要です。
Agent UI Apps
データ専用のアプリを作成し、テーブルを設計して、レコードを最新の状態に保ちます。
https://api.agentui.ai/mcp/apps$ claude mcp add --transport http agentui-apps https://api.agentui.ai/mcp/apps{
"mcpServers": {
"agentui-apps": { "url": "https://api.agentui.ai/mcp/apps" }
}
}Settings → Connectors → Add custom connector
Name: AgentUI Apps
URL: https://api.agentui.ai/mcp/apps
Connect → sign in with Agent UIこんなことを頼めます
- 「現場訪問」というデータアプリを作って、「訪問」テーブルを追加して
- 「予定」「完了」「キャンセル」だけを選べるステータス項目を追加して
- 貼り付けたスプレッドシートの40行をインポートして
- 500を超える未処理の注文をすべて表示して
- 先月の未処理の注文を「遅延」にして
- この顧客の期限切れ請求書を要約して
カスタムMCPツール
期限切れ請求書の要約や、チケットを閉じて担当者に通知するといった、アプリの手順をアシスタントに教えられます。アプリのチャットで頼めば、Agent UIがアプリのmcpフォルダにツールのファイルを作成します。
- サインインしたアプリユーザーとして実行
- データセキュリティのルールはそのまま適用
- ツールごとにオン・オフを切り替え
- ファイルはAgent UIが作成
import { defineTool } from "@/mcp";
import { Invoice } from "@/entities/Invoice";
export default defineTool({
description: "Summarize a customer's overdue invoices",
input: { /* JSON Schema: customerId */ },
annotations: { readOnlyHint: true },
async run({ customerId }) {
const rows = await Invoice.filter({
customer_id: customerId,
status: "overdue",
});
return { count: rows.length };
},
});バックエンド関数、API、アプリからのシグナル
functions/内のファイルは、すべて/api/<name>で呼び出せます。Agent UIがまだ対応していないAPIを接続し、キーはシークレットに保管。console.humanを使えば、動作中のアプリから構築チャットへ直接メッセージを送れます。
- CLIから関数をテストし、ログを確認
- シークレットの値はサーバーの外に出ません
- 開発・ステージング・本番の環境を分離
import { Stock } from "@/entities/Stock";
export default async function (ctx) {
const item = await Stock.get(ctx.body.id);
await Stock.update(item.key, { reorder: true });
return { ok: true };
}CLIをインストールして、最初のアプリを取り込みましょう。
npm install -g @agentuiai/cli無料、MITライセンス。Node.js 22以降が必要です。
作りたいものから探す
以下のツールはすべて、お手持ちのデータで動きます。役割ごとのアクセス権限と完全な監査ログを備え、実際の担当者がサポートします。