مرکزی مواد پر جائیں
اے آئی ٹیوٹوریلز

EmDash Build کے ساتھ قابلِ ترمیم AI سے تیار کردہ ویب سائٹس بنائیں اور چلائیں

جانیں کہ EmDash Build کس طرح مختصر بریفز کو قابلِ ترمیم EmDash اور Astro سائٹس میں تبدیل کرتا ہے، اس کا Cloudflare آرکیٹیکچر کیسے کام کرتا ہے، اور اسے مقامی طور پر کیسے ترتیب دے کر چلایا جاتا ہے۔ یہ ٹیوٹوریل ایجنٹ کے ورک فلو، توثیقی کمانڈز، ڈیٹا کے مستقل ذخیرے، اشاعت کے کنٹرولز، سیکیورٹی سے متعلق امور اور عملی ڈویلپمنٹ تجاویز کا بھی احاطہ کرتا ہے۔

EmDash Build کے ساتھ قابلِ ترمیم AI سے تیار کردہ ویب سائٹس بنائیں اور چلائیں

EmDash Build کیا ہے؟

EmDash Build ایک اوپن سورس AI سائٹ بلڈر ہے جو تحریری بریف کو قابلِ ترمیم EmDash ویب سائٹ میں تبدیل کرتا ہے۔ یہ صرف جامد صفحے کا مارک اپ تیار کرنے کے بجائے ایک منظم موادی ماڈل بناتا ہے، EmDash کے Model Context Protocol سرور کے ذریعے اس ماڈل میں مواد شامل کرتا ہے، اور مواد کو رینڈر کرنے کے لیے ٹائپ شدہ Astro صفحات اور components لکھتا ہے۔

حاصل ہونے والے پروجیکٹ میں سرور کے ذریعے رینڈر کیے جانے والے صفحات، منظم مواد، میڈیا اسٹوریج، اور EmDash کا انتظامی انٹرفیس شامل ہوتا ہے۔ ابتدائی جنریشن کے بعد بھی ایڈیٹرز سائٹ استعمال جاری رکھ سکتے ہیں: وہ متن اور میڈیا اپ ڈیٹ کر سکتے ہیں، سیکشنز شامل یا نقل کر سکتے ہیں، مواد کے بلاکس کی ترتیب بدل سکتے ہیں، پوسٹس شیڈول کر سکتے ہیں، اور ایجنٹ سے مواد یا ڈیزائن میں بڑی تبدیلیاں کروا سکتے ہیں۔

اہم: EmDash Build ایک الفا ریفرنس ایپلیکیشن ہے جو ہوسٹنگ فراہم کنندگان، ویب سائٹ بلڈرز، اور پلیٹ فارمز کے لیے بنائی گئی ہے۔ ہوسٹ کیے گئے ڈیمو میں پبلشنگ غیر فعال ہے۔

آپ ہوسٹ کیے گئے ڈیمو کا جائزہ لے سکتے ہیں، تاہم اس سے سائٹس پبلش نہیں کی جا سکتیں۔

اہم صلاحیتیں

  • منظم وضاحت: جب بریف میں کوئی اہم فیصلہ غیر واضح رہ جائے تو ایجنٹ مرکوز سوالات پوچھتا ہے۔
  • ایجنٹ کے تیار کردہ موادی ماڈلز: یہ قابلِ استعمال entities کے لیے collections اور صفحے کے سیکشنز کے لیے منظم blocks بناتا ہے جن کی ترتیب ایڈیٹرز بدل سکتے ہیں۔
  • قابلِ ترمیم Astro سائٹس: فرنٹ اینڈ ٹائپ شدہ Astro components استعمال کرتا ہے، جبکہ عام مواد EmDash کے ذریعے قابلِ انتظام رہتا ہے۔
  • لائیو پیش منظر اور مرمت: پروجیکٹ کو نجی Builder preview میں رینڈر کیا جاتا ہے۔ ایجنٹ آؤٹ پٹ کی توثیق، خرابیوں کا معائنہ، اور اسی عمل میں ان کی مرمت کر سکتا ہے۔
  • مواد کے ورک فلو: ایڈیٹرز EmDash کے انتظامی انٹرفیس کے ذریعے متن، میڈیا، سیکشنز، بلاکس، اور شیڈول کردہ مواد کا انتظام کر سکتے ہیں۔
  • محفوظ تاریخچہ: سورس کوڈ اور مقامی CMS حالت Cloudflare Artifacts میں Git commits کے طور پر محفوظ کیے جاتے ہیں۔
  • محدود پبلشنگ: توثیق شدہ جامد ریلیزز کو Workers for Platforms کے لیے پیکیج کیا جا سکتا ہے، لیکن صرف اس وقت جب آپریٹر واضح طور پر پبلشنگ فعال اور کنفیگر کرے۔

آرکیٹیکچر کیسے کام کرتا ہے

ہر تیار کردہ پروجیکٹ کو ایک Cloudflare Sandbox ملتا ہے جس میں EmDash، Astro، اور Tailwind پروجیکٹ پہلے سے تیار ہوتا ہے۔ ایک BuilderAgent Durable Object گفتگو اور model-and-tool loop کا انتظام کرتا ہے۔

ایجنٹ schemas اور مواد بنانے کے لیے EmDash MCP tools استعمال کرتا ہے۔ یہ Sandbox کے اندر عوامی فرنٹ اینڈ لکھتا ہے، نجی پیش منظر شروع کرتا ہے، رینڈر شدہ سائٹ کی توثیق کرتا ہے، اور turn مکمل کرنے سے پہلے خرابیوں کو درست کرتا ہے۔

Cloudflare Artifacts ہر مربوط پروجیکٹ حالت کو Git history کے طور پر محفوظ کرتا ہے۔ اگر Sandbox sleep mode میں چلا جائے تو EmDash Build سورس کوڈ اور مقامی CMS حالت دونوں کو ایک نئے container میں بحال کر کے پیش منظر دوبارہ شروع کر سکتا ہے۔

ایجنٹ کا ورک فلو

  1. سمجھنا: بریف پڑھنا اور مواد سے متعلق اہم فیصلوں کی نشاندہی کرنا جو ابھی باقی ہوں۔
  2. ماڈل بنانا: فیصلہ کرنا کہ کون سا ڈیٹا قابلِ استعمال collections بننا چاہیے اور کن صفحات کو منظم blocks درکار ہیں۔
  3. تعمیر: EmDash schema بنانا، تیار کردہ types کو تازہ کرنا، اور ٹائپ شدہ Astro renderers لکھنا۔
  4. مواد شامل کرنا: EmDash MCP tools کے ذریعے نمائندہ مواد اور میڈیا شامل کرنا۔
  5. تصدیق: پروجیکٹ کی type-check کرنا، عوامی routes رینڈر کرنا، پیش منظر کا معائنہ کرنا، اور خرابیوں کی مرمت کرنا۔
  6. محفوظ کرنا: مکمل پروجیکٹ حالت کو Cloudflare Artifacts میں commit کرنا۔

پیشگی تقاضے

مقامی ترقی کے لیے مقامی tools اور متعدد Cloudflare services تک رسائی دونوں درکار ہیں۔ جاری رکھنے سے پہلے درج ذیل تیار کریں:

  • Node.js 24 یا بعد کا ورژن
  • pnpm 11.9
  • چلتا ہوا Docker-compatible daemon
  • Cloudflare account سے authenticated Wrangler
  • Cloudflare Workers تک رسائی
  • Durable Objects تک رسائی
  • Cloudflare Sandbox تک رسائی
  • Workers AI اور AI Gateway تک رسائی
  • Cloudflare Artifacts تک رسائی
  • Workers for Platforms تک رسائی

چونکہ provider resources اور trust boundaries کے لیے محتاط configuration درکار ہوتی ہے، اس لیے application deploy کرنے سے پہلے repository کی self-hosting guide پڑھیں۔

EmDash Build انسٹال اور کنفیگر کریں

1. Dependencies انسٹال کریں

repository root سے locked dependency versions انسٹال کریں:

pnpm install --frozen-lockfile

2. Provider Configuration بنائیں

provider.config.example.json کو ignored provider.config.json فائل میں copy کریں:

cp provider.config.example.json provider.config.json

provider.config.json کھولیں اور ہر example value کو اپنے Cloudflare account کے resources سے تبدیل کریں۔ required resources بنانے کے لیے example values پر انحصار کرنے کے بجائے self-hosting guide کی پیروی کریں۔

3. Configuration کی توثیق اور rendering کریں

preflight checks چلائیں، پھر provider-specific Wrangler configuration تیار کریں:

pnpm preflight
pnpm configure

دستاویزی local startup command کے ذریعے استعمال ہونے والی generated configuration wrangler.provider.jsonc ہے۔ حساس environments کو deploy یا run کرنے سے پہلے اس provider-specific فائل کا معائنہ کریں۔

4. Local Secrets کنفیگر کریں

development secrets template کو copy کریں:

cp .dev.vars.example .dev.vars

builder کے لیے درکار AI Gateway credentials کو .dev.vars میں شامل کریں۔ UNSPLASH_ACCESS_KEY اختیاری ہے؛ اسے شامل کرنے سے generation کے دوران stock-image search فعال ہو جاتی ہے۔

provider credentials کو generated projects کے اندر نہ رکھیں۔ Publishing سرور کے ذریعے کنٹرول ہوتی ہے، اور generated sites کو provider credentials نہیں دیے جاتے۔

5. مکمل Local Application شروع کریں

EmDash Build کو تیار کردہ provider configuration کے ساتھ شروع کریں:

EMDASH_WRANGLER_CONFIG=wrangler.provider.jsonc pnpm dev

جب development server تیار ہو جائے تو http://localhost:5173 کھولیں۔

6. مناسب وقت پر صرف UI موڈ شروع کریں

اگر آپ کو صرف interface پر کام کرنا ہو تو یہ کمانڈ استعمال کریں:

pnpm dev:ui

یہ موڈ Sandbox سے چلنے والی site generation شروع نہیں کرتا۔ جب builder agent، project creation، یا live generated previews کی جانچ کرنی ہو تو مکمل development command استعمال کریں۔

بنیادی استعمال: Brief سے Site تیار کرنا

1. مفید Brief لکھیں

مطلوبہ website، اس کے audience، اہم pages، دوبارہ استعمال ہونے والے content، اور مطلوبہ visual direction کی وضاحت کریں۔ مثال کے طور پر:

Create a portfolio website for an Icelandic landscape photographer.
Include a home page, reusable photo collections, an about page,
and structured page sections that editors can reorder.

اگر brief میں اہم فیصلے غیر واضح رہ جائیں تو agent مرکوز clarification questions پوچھ سکتا ہے۔ مربوط schema اور frontend کی توقع کرنے سے پہلے ان سوالات کے جواب دیں۔

2. Agent کو Site کا Model بنانے اور تیار کرنے دیں

وضاحت کے بعد agent طے کرتا ہے کہ کون سی معلومات reusable collections میں ہونی چاہییں اور کون سے narrative pages کو structured blocks استعمال کرنے چاہییں۔ پھر یہ EmDash schema بناتا ہے، generated types کو تازہ کرتا ہے، Astro renderers لکھتا ہے، اور MCP tools کے ذریعے نمائندہ content شامل کرتا ہے۔

3. Private Preview کا جائزہ لیں

تیار کردہ routes اور مجموعی design کا جائزہ لینے کے لیے Builder کا live preview استعمال کریں۔ EmDash Build تیار کردہ project کی توثیق کرتا ہے اور agent loop کے اندر دریافت شدہ خرابیوں کی مرمت کر سکتا ہے۔

4. EmDash میں Editing جاری رکھیں

جب ابتدائی project قابل استعمال ہو جائے تو معمول کا content EmDash administration interface کے ذریعے manage کریں۔ آپ text اور media میں ترمیم، sections شامل یا duplicate، blocks کی ترتیب تبدیل، اور posts schedule کر سکتے ہیں۔ وسیع structural، content، یا design تبدیلیوں کے لیے agent کی طرف واپس جائیں۔

5. Project State محفوظ اور بحال کریں

مربوط project states کو Git history کے طور پر Cloudflare Artifacts میں commit کیا جاتا ہے۔ یہ persistence EmDash Build کو project source اور local CMS state بحال کرنے دیتی ہے جب Sandbox سو جائے اور نئے container کی ضرورت ہو۔

Validation اور Development Commands

اپنی تبدیلی کی نوعیت کے مطابق repository commands استعمال کریں:

  • pnpm dev پہلے سے طے شدہ configuration کے ساتھ EmDash Build شروع کرتا ہے۔
  • pnpm dev:ui Cloudflare Sandbox containers کے بغیر interface شروع کرتا ہے۔
  • pnpm check application اور Worker tests کی type-checking کرتا ہے۔
  • pnpm test application test suite چلاتا ہے۔
  • pnpm test:worker Workers integration suite چلاتا ہے۔
  • pnpm build پہلے سے طے شدہ configuration کے ساتھ EmDash Build بناتا ہے۔
  • pnpm build:provider wrangler.provider.jsonc استعمال کرتے ہوئے build بناتا ہے۔
  • pnpm format oxfmt کے ذریعے repository کو format کرتا ہے۔

Contribution جمع کرانے سے پہلے project کی تجویز کردہ مکمل validation sequence چلائیں:

pnpm format
pnpm check
pnpm test
pnpm test:worker
pnpm build

Advanced Tips

درست Development Mode منتخب کریں

الگ تھلگ interface کام کے لیے pnpm dev:ui استعمال کریں، کیونکہ یہ Sandbox containers شروع کرنے سے گریز کرتا ہے۔ Generation workflows کی توثیق کے لیے اسے استعمال نہ کریں: UI-only mode میں Sandbox سے چلنے والی generation دستیاب نہیں ہے۔

Content Editing کو Structural Changes سے الگ رکھیں

عام editorial کام، جیسے text، media، sections، اور ترتیب تبدیل کرنا، EmDash admin interface کے ذریعے کریں۔ بڑی design یا content-model تبدیلیوں کے لیے agent استعمال کریں۔ اس سے structured CMS data اور typed Astro rendering code کے درمیان project کی تقسیم برقرار رہتی ہے۔

Provider Configuration کا جائزہ لیں

مثالی provider configuration کو صرف template سمجھیں۔ ہر sample value تبدیل کریں، pnpm preflight چلائیں، pnpm configure کے ذریعے Wrangler configuration تیار کریں، اور target Cloudflare account کے لیے output کا جائزہ لیں۔

Publishing کو واضح طور پر قابو میں رکھیں

Public publishing server کے زیر انتظام ہے اور پہلے سے disabled ہے۔ اسے صرف اسی وقت enable اور configure کریں جب operating provider Workers for Platforms کے لیے validated static releases package کرنے کے لیے تیار ہو۔ Hosted demo بھی publishing کو disabled رکھتا ہے۔

Deployment سے پہلے Security Boundaries کا جائزہ لیں

Model tools، Sandbox execution، secrets، private previews، persistence، اور publishing کی تفصیلات کے لیے repository کا threat model دیکھیں۔ Operational checks کے لیے operations guide استعمال کریں۔

Repository میں مؤثر انداز سے جائیں

  • src/worker میں Worker routes، BuilderAgent، prompts، tools، persistence، اور publishing controls موجود ہیں۔
  • src/client میں React Builder interface، chat، activity views، اور live preview موجود ہیں۔
  • prototype/builder-cloudflare میں نئے projects کے لیے تیار کردہ خالی EmDash اور Astro scaffold موجود ہے۔
  • migrations میں authentication اور provider-control database migrations موجود ہیں۔
  • scripts میں provider configuration، smoke tests، اور operational helpers موجود ہیں۔
  • test میں application اور Worker coverage موجود ہے۔
  • docs میں self-hosting، security، operations، اور implementation documentation موجود ہے۔

نتیجہ

EmDash Build، مصنوعی ذہانت کی مدد سے تخلیق کو ایک پائیدار اور قابلِ تدوین CMS ورک فلو کے ساتھ یکجا کرتا ہے۔ یہ ساخت شدہ EmDash مواد اور ٹائپ شدہ Astro اجزا تیار کرتا ہے، نجی Cloudflare Sandbox پیش منظر میں نتیجے کی توثیق کرتا ہے، اور پروجیکٹ کی تاریخ Cloudflare Artifacts میں محفوظ کرتا ہے۔ چونکہ یہ ایک الفا حوالہ ایپلیکیشن ہے جس کے لیے بنیادی ڈھانچے کی نمایاں ضروریات موجود ہیں، اس لیے فراہم کنندہ کے وسائل احتیاط سے ترتیب دیں، سیکیورٹی دستاویزات کا جائزہ لیں، اور عوامی اشاعت کو واضح طور پر قابو میں رکھیں۔