Agent UI للمطورين

دع الذكاء الاصطناعي يبني التطبيق، وافتح الكود متى شئت. كل تطبيق يأتي مع خادم MCP خاص به، وتتيح لك CLI سحبه إلى محررك، والعمل عليه مع مساعد البرمجة لديك، ثم نشره من جديد.

npm install -g @agentuiai/cli

يتطلب Node.js 22 أو أحدث.

$ 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
  • عنوان واحد لكل بيئة، ومعطّل حتى تفعّله
  • اتصالات للعرض فقط أو للقراءة والكتابة، ويمكنك إلغاء أي منها
  • قواعد أمان البيانات تُطبَّق في كل استدعاء
  • أدلة وأدوات مخصصة تعلّم المساعدين إجراءات عملك
كيف تفعّل MCP
  • data_orders_list
  • data_orders_get
  • data_orders_count
  • data_orders_create
  • data_orders_update
  • data_orders_delete
  • tool_summarize_overdue_invoices

تطبيقك مجرد مجلد

زامن تطبيقًا وستحصل على كوده الحقيقي: جداول البيانات بصيغة JSON، والصفحات، والمكونات، ودوال الواجهة الخلفية، وأدوات الذكاء الاصطناعي المخصصة. ويعلّم الملفان AGENTS.md وCLAUDE.md مساعد البرمجة لديك كيف تُبنى تطبيقات Agent UI.

  • عدّل في أي محرر
  • تحقق منه بأداة التحقق نفسها التي تستخدمها المنصة
  • انشر وأعد البناء بأمر واحد
acme-stock/
entities/ جداول البيانات بصيغة JSON
pages/
components/
functions/ → /api/<name>
mcp/ أدوات ذكاء اصطناعي مخصصة
Layout.jsx
AGENTS.md
.claude/CLAUDE.md

دورة التعديل

غيّر الملفات بنفسك أو اطلب ذلك من مساعدك. تحقّق، وقارن، وانشر إلى البيئة التي تختارها. لكل بيئة قاعدة بياناتها الخاصة.

  • 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 · development

اربط مساعدك عبر MCP

يتيح خادم MCP في Agent UI لـ 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

أمثلة على ما يمكنك طلبه

  • أنشئ تطبيق بيانات باسم الزيارات الميدانية فيه جدول للزيارات
  • أضف حقل حالة لا يقبل إلا: مخطط لها، أو تمت، أو ملغاة
  • استورد هذه الصفوف الأربعين من جدول البيانات الذي لصقته
  • اعرض كل الطلبات المفتوحة التي تتجاوز 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>. اربط واجهات API لا يدعمها Agent UI بعد، واحفظ المفاتيح في الأسرار، وأرسل رسائل من تطبيقك أثناء تشغيله مباشرة إلى محادثة البناء باستخدام 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 أو أحدث.

اقرأ وثائق CLIابدأ الإنشاء مجاناً

تصفّح حسب ما تريد بناءه

كل أداة أدناه تعمل على البيانات التي لديك أصلًا، مع صلاحيات وصول حسب الأدوار وسجل تدقيق كامل وشخص حقيقي يقف خلفها.

كل حالات الاستخدام →