النشر التلقائي من Claude Code / Cursor إلى Vercel — ثلاثة سير عمل لعصر Vercel Agent Skills (مايو 2026)

"عدّل Claude Code الملف — والآن انتقل إلى الطرفية، نفّذ git push، انتقل إلى المتصفح، افتح لوحة Vercel…" كان هذا اعتياديًا حتى 2025. اعتبارًا من مايو 2026، أطلقت Vercel رسميًا Agent Skills (عبر MCP) وإضافة Claude Code Plugin، وتتصل Cursor بملف .cursor/mcp.json واحد. "تعديل الكود → بناء → نشر → فحص رابط المعاينة → تحديث env → التراجع" يحدث كله داخل وكيل الذكاء الاصطناعي. زالت ضريبة "الانتقال إلى المتصفح".

بصراحة من البداية: واقع 2026 هو مزج المقاربات الثلاث وتطعيمها. 1) الحد الأدنى (git push → نشر تلقائي في 60–90 ثانية) يكفي للمطور المنفرد. 2) MCP المباشر (Vercel Agent Skills) يتيح لـ Cursor / Claude Code استدعاء vercel deploy مباشرة — الأنسب للمطورين الذين ينتقلون بين البيئات يوميًا. 3) GitHub Actions + Claude Code Action يمنح الفرق "التعليق @claude على PR → الذكاء الاصطناعي يصلح ويعيد نشر المعاينة تلقائيًا" — مثالي لثقافات المراجعة المكثفة. لا يوجد "أفضل" — هناك "أفضل لسير عملك."

الرأي الشخصي مقدمًا: المنفرد بـ 1–3 مشاريع → 1)، عمل يومي بعدة بيئات → 2)، فريق مدفوع بالمراجعة → 3). أكبر الألغام: تسرب env و"الذكاء الاصطناعي ينشر تلقائيًا → انفجار التكلفة." الدفاع بـ Spending Limit + معاينات مقيدة + Cloudflare كوسيط أمامي — هذه هي مجموعة الحراسة المعيارية في 2026. اقرأ بالتوازي مع الذكاء الاصطناعي يوصي بـ Vercel، وشرح Cursor، وهل يستطيع الذكاء الاصطناعي إدارة البنية التحتية؟ للسياق الكامل. تستعرض هذه المقالة التطبيقات الثلاثة، واستراتيجية المعاينة، والفخاخ الأربعة — كله بكود يعمل، مستند إلى مايو 2026.

1. لماذا أصبح "وكيل الذكاء الاصطناعي + نشر Vercel" معيار 2026

حتى 2025، كان "جعل الذكاء الاصطناعي يكتب الكود" و"النشر" عالمَين منفصلَين. التعديل في Cursor / Claude Code → الانتقال إلى الطرفية، git add . && git commit -m "fix" && git push → الانتقال إلى المتصفح، فحص لوحة Vercel → نسخ رابط المعاينة → لصقه في Slack. تبديل السياق هذا كان يحدث عشرات المرات يوميًا، يسمم تجربة المطور ببطء.

تغير شيئان كبيران في 2026. 1) أصدرت Vercel Agent Skills (Model Context Protocol = MCP) — الآلية التي تتيح لوكلاء الذكاء الاصطناعي استدعاء واجهات Vercel "كأدوات، مباشرة." 2) أصدرت Anthropic إصدار Claude Code GitHub Actions v1.0 — اكتب @claude fix this bug في تعليق PR وسيشغّل الذكاء الاصطناعي الإصلاح ونشر المعاينة والرد على التعليق تلقائيًا. حقيقة أن Vercel نفسها أطلقت vercel/vercel-deploy-claude-code-plugin تنتمي إلى الزخم نفسه.

تدفق مايو 2026 المعياري الآن: "في Cursor، قل 'أضف هذه الميزة، انشرها، أعطني رابط المعاينة' → بعد 30 ثانية يكون رابط المعاينة في الدردشة." كما عُولج في ما هو MCP، وClaude Agent SDK، أصبح MCP "USB-C الذي يربط وكلاء الذكاء الاصطناعي بأنظمة عملك" — وتكامل Vercel هذا أوضح مثال عملي.

2. ثلاث مقاربات في 5 دقائق

قارن الثلاث بـ "وزن الإعداد × عمق الأتمتة."

دليل الاختيار: "تفتح لوحة Vercel أكثر من 10 مرات شهريًا؟" الإعداد للمقاربة 2 يستحق العناء. "مراجعة PR يومية؟" المقاربة 3 أخف بشكل دراماتيكي. "بحجم مدونة شخصية؟" المقاربة 1 كافية — الإفراط الهندسي سيكلفك في الصيانة أكثر مما يوفّر.

3. المقاربة 1: الحد الأدنى (نشر تلقائي عبر git push)

القاعدة الأكثر استخدامًا. اربط Vercel وGitHub مرة واحدة، وكل git push يُطلق نشرًا يصبح حيًا في 60–90 ثانية. الذكاء الاصطناعي مجرد "يكتب الكود، يكتب رسالة الـ commit، ينفّذ git push."

# One-time setup
1. Vercel dashboard → Add New Project
2. Pick the GitHub repo → Import
3. Framework Preset: Next.js (auto-detected)
4. Environment Variables: add as needed
5. Deploy → done

# Daily flow (inside Cursor/Claude Code)
> Make this button red. When done, git push to deploy.

# What the AI runs
git add app/components/Button.tsx
git commit -m "feat: change primary button to red"
git push origin main

# Vercel auto-deploys → live in 90 seconds

القيمة الحقيقية لهذا الإعداد: "كل فرع يحصل على رابط معاينة مولّد تلقائيًا." ادفع feature/red-button وستقوم Vercel تلقائيًا بإنشاء https://your-app-git-feature-red-button-yourname.vercel.app. أخبر الذكاء الاصطناعي "أنشئ الفرع feature/redesign، حدّث التصميم، الصق رابط المعاينة في Slack" — وتحدث الحلقة كاملة دون تدخل يدوي.

تنبيه: خطة Hobby تحظر الاستخدام التجاري. أعد قراءة فخاخ التسعير في الذكاء الاصطناعي يوصي بـ Vercel §5. إذا بدأ الذكاء الاصطناعي بإنتاج معاينات بكثافة، تحترق دقائق البناء بسرعة.

4. المقاربة 2: MCP المباشر (Cursor + Vercel Agent Skills)

المقاربة الرائدة في 2026. تربط Agent Skills (خادم MCP) الرسمية من Vercel مباشرة بـ Cursor أو Claude Code، ما يتيح لوكيل الذكاء الاصطناعي استدعاء واجهات Vercel مباشرة. تختفي خطوة "الانتقال إلى المتصفح" تمامًا.

# Setup (10 min)
1. Get a Vercel token: vercel.com/account/tokens
2. In Cursor, create .cursor/mcp.json:

{
  "mcpServers": {
    "vercel": {
      "url": "https://mcp.vercel.com/<team-slug>",
      "headers": {
        "Authorization": "Bearer <VERCEL_TOKEN>"
      }
    }
  }
}

3. Restart Cursor → confirm MCP server connection

هذا كل ما تحتاجه لاستخدام هذه أوامر السلاش من داخل Cursor:

# Practical slash commands
/deploy           # preview-deploy the current branch
/deploy --prod    # production deploy
/status           # latest deployment status
/logs             # fetch build logs
/env list         # list environment variables
/env add KEY VALUE # add env var (preview/production scoped)
/rollback         # roll back to the previous deployment

المكسب الحقيقي هو "كل شيء يحدث داخل المحادثة." قل "أضف هذه الـ API، انشرها على المعاينة، إن وُجد خطأ اقرأ السجلات وأصلحه" وسيشغّل الذكاء الاصطناعي تعديل الكود → /deploy → /logs → اكتشاف الخطأ → الإصلاح → /deploy مجددًا — بشكل مستقل. في إطار إشارات المرور من هل يستطيع الذكاء الاصطناعي إدارة البنية التحتية؟، هذه منطقة "أصفر": يركّز البشر على "الموافقة النهائية ومراقبة التكلفة."

مستخدمو Claude Code يملكون إضافة vercel-deploy-claude-code-plugin الرسمية من Vercel. ثبّتها لتحصل على القدرات نفسها.

5. المقاربة 3: GitHub Actions (مدفوع بالكامل بـ PR)

أعلى مستوى للفرق. مع Claude Code GitHub Actions v1.0، يكفي ذكر @claude في تعليق PR ليشغّل الذكاء الاصطناعي تلقائيًا تعديلات الكود + الاختبارات + نشر المعاينة + الرد على تعليق PR.

# Setup (30 min)
1. In Claude Code, run /install-github-app
2. Install on the repo → secrets auto-configured
3. .github/workflows/claude.yml is auto-generated

name: Claude Code
on:
  issue_comment: { types: [created] }
  pull_request_review_comment: { types: [created] }
jobs:
  claude:
    if: contains(github.event.comment.body, '@claude')
    runs-on: ubuntu-latest
    steps:
      - uses: anthropics/claude-code-action@v1
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

# 4. Add preview deploy via .github/workflows/vercel.yml
name: Vercel Preview
on: pull_request
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm i -g vercel
      - run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

هذا يعيد كتابة طريقة العمل. مثال على تدفق PR:

# Developer opens a PR → preview auto-deploys
[Bot] Vercel Preview: https://your-app-pr-42.vercel.app

# Reviewer adds a PR comment
@claude also change the hover state on this button

# 5 minutes later Claude commits the fix
[Bot Claude] commit pushed: 'feat: add hover state to button'
[Bot] Vercel Preview updated: https://your-app-pr-42.vercel.app

# Reviewer checks → approve → merge → production auto-deploy

القوة الحقيقية: السيناريو الذي "لا يلمس فيه البشر الكود حتى ينتهي PR" يصبح واقعيًا. كما نوقش في المهنيون مقابل المبتدئين، وهل سيلغي الذكاء الاصطناعي وظائف الياقات البيضاء، فإن "الذكاء الاصطناعي يبتلع عمل المبتدئين" يجد هنا أكثر تطبيقاته ملموسية. تركز الفرق على المراجعة، والذكاء الاصطناعي يتولى التنفيذ — هذا هو تقسيم العمل الجديد.

6. استراتيجية المعاينة — فرع → رابط → A/B

عبر المقاربات الثلاث جميعًا، "استخدام بيئات المعاينة استراتيجيًا" هو الرافعة. تُصدر Vercel تلقائيًا رابطًا فريدًا لكل فرع غير إنتاجي، فتصبح "تجربة الفكرة نفسها بثلاث طرق ومقارنتها" مجانية فعليًا.

7. أربعة فخاخ — تسرب env، التكلفة، التعارضات، التراجع

سلّم النشر التلقائي إلى وكيل ذكاء اصطناعي وستصطدم بأربعة فخاخ — مضمون. أعدّ الدفاعات مسبقًا وستتجنب 80% من الحوادث.

تنبيه إضافي: "أتمتة نشر الإنتاج بالكامل للذكاء الاصطناعي" غير موصى بها. حتى مع المقاربتين 2 و3، اشترط موافقة بشرية على نشر الإنتاج — هذا هو واقع مايو 2026. كما عُولج في احتياطات ما تعطيه للذكاء الاصطناعي، يستطيع الذكاء الاصطناعي كسر الإنتاج بأخطاء بريئة تمامًا. أتمت حتى المعاينة / staging؛ احصر الإنتاج بـ موافقة بمرحلتين.

الخلاصة

"النشر من Claude Code / Cursor إلى Vercel" — بحلول مايو 2026، عصر "الانتقال إلى المتصفح" انتهى. تطوي Vercel Agent Skills (MCP) وClaude Code GitHub Actions v1.0 "الكود → البناء → النشر → رابط المعاينة → إدارة env → التراجع" في تدفق واحد داخل الوكيل.

اختر بحسب سير عملك: 1) مطور منفرد → git push (إعداد 5 دقائق، نشر 60–90 ثانية)، 2) مطور متوسط يفتح لوحة Vercel أكثر من 10 مرات شهريًا → MCP المباشر (Cursor + .cursor/mcp.json)، 3) فريق مدفوع بالمراجعة → GitHub Actions (@claude → إصلاح تلقائي + نشر معاينة). استخدم المعاينات لـ المقارنة A/B، staging الدائمة، مراجعة العميل. ادفع الفخاخ الأربعة (تسرب env، انفجار التكلفة، تعارضات PR، نسيان التراجع) بـ Spending Limit + Cloudflare كوسيط + Sentry + موافقة بشرية للإنتاج.

ذات صلة: الذكاء الاصطناعي يوصي بـ Vercel، Vercel AI SDK، v0 vs Bolt vs Lovable، شرح Cursor، هل يستطيع الذكاء الاصطناعي إدارة البنية التحتية؟

الأسئلة الشائعة

س. هل يعمل هذا على Cloudflare Pages أو Netlify أيضًا؟
ج. أمور مماثلة ممكنة، لكن النظام البيئي أضعف. لدى Cloudflare وNetlify كلتيهما واجهات CLI رسمية وتكامل GitHub، لكن اعتبارًا من مايو 2026 لا تملكان ما يعادل Vercel Agent Skills (MCP) لتكامل الوكلاء من الطرف الأول. على صعيد تكامل الذكاء الاصطناعي، تتقدم Vercel بـ 6–12 شهرًا. انظر معايير الاختيار في الذكاء الاصطناعي يوصي بـ Vercel.

س. Claude Code مقابل Cursor لنشر Vercel — أيهما أفضل؟
ج. كلاهما يدعم MCP والقدرات شبه متكافئة. Claude Code متمحور حول الطرفية ويأتي بتكامل GitHub Actions الرسمي؛ Cursor متمحور حول الـ IDE بواجهة سلاش بديهية. مستخدمو VS Code يميلون إلى Cursor؛ مستخدمو الطرفية إلى Claude Code. كثيرون يستخدمون كليهما.

س. هل ينبغي أن أترك الذكاء الاصطناعي يؤتمت نشر الإنتاج بالكامل؟
ج. لا. المعاينة / staging — أتمت بالكامل، لا بأس. الإنتاج يجب أن يتطلب دائمًا موافقة بشرية. السبب: يستطيع الذكاء الاصطناعي كسر الإنتاج بأخطاء بريئة، و"من المسؤول بعد الحادث" يصبح غامضًا. استخدم GitHub Branch Protection لمنع الدفع المباشر إلى main واشترط قواعد الموافقة.

س. هل ينبغي أن يدخل الرمز في .cursor/mcp.json إلى git؟
ج. قطعًا لا. إما أضف مجلد .cursor/ بالكامل إلى .gitignore، أو اقرأ .cursor/mcp.json من متغيرات البيئة. تسرب رمز Vercel يعني أن أطرافًا ثالثة يمكنها النشر إلى مشروعك متى شاءت — حادث حرج.

س. أنا قلق من تكلفة Claude API من GitHub Actions.
ج. تقريبًا سنتات إلى عشرات السنتات لكل PR بحسب حجم الكود — عادةً بضعة دولارات شهريًا. لمنع "حلقات الذكاء الاصطناعي اللانهائية،" اضبط سقف إنفاق شهري على Anthropic API. كما أن Claude Code Action v1.0 لديه حدود لعدد الخطوات مفعّلة افتراضيًا.