মূল কনটেন্টে যান
এআই টিউটোরিয়াল

EmDash Build দিয়ে সম্পাদনাযোগ্য AI-জেনারেটেড ওয়েবসাইট তৈরি ও চালান

জানুন কীভাবে EmDash Build ব্রিফকে সম্পাদনাযোগ্য EmDash ও Astro সাইটে রূপান্তর করে, এর Cloudflare আর্কিটেকচার কীভাবে কাজ করে এবং কীভাবে এটি স্থানীয়ভাবে কনফিগার ও চালাতে হয়। এই টিউটোরিয়ালে এজেন্ট ওয়ার্কফ্লো, ভ্যালিডেশন কমান্ড, পারসিস্টেন্স, পাবলিশিং নিয়ন্ত্রণ, নিরাপত্তা বিবেচনা এবং ব্যবহারিক ডেভেলপমেন্ট টিপসও রয়েছে।

EmDash Build দিয়ে সম্পাদনাযোগ্য AI-জেনারেটেড ওয়েবসাইট তৈরি ও চালান

EmDash Build কী?

EmDash Build হলো একটি ওপেন সোর্স AI সাইট বিল্ডার, যা লিখিত নির্দেশনাকে একটি সম্পাদনাযোগ্য EmDash ওয়েবসাইটে রূপান্তর করে। এটি শুধু স্ট্যাটিক পেজ মার্কআপ তৈরি করে না; বরং একটি কাঠামোবদ্ধ কনটেন্ট মডেল তৈরি করে, EmDash-এর Model Context Protocol সার্ভারের মাধ্যমে সেই মডেল পূরণ করে এবং কনটেন্ট প্রদর্শনের জন্য টাইপযুক্ত Astro পেজ ও কম্পোনেন্ট লিখে।

ফলস্বরূপ প্রকল্পে সার্ভার-রেন্ডার করা পেজ, কাঠামোবদ্ধ কনটেন্ট, মিডিয়া স্টোরেজ এবং EmDash প্রশাসনিক ইন্টারফেস থাকে। প্রাথমিক জেনারেশনের পরও এডিটররা সাইটটি ব্যবহার চালিয়ে যেতে পারেন: তারা টেক্সট ও মিডিয়া আপডেট করতে, সেকশন যোগ বা ডুপ্লিকেট করতে, কনটেন্ট ব্লকের ক্রম পরিবর্তন করতে, পোস্ট প্রকাশের সময় নির্ধারণ করতে এবং এজেন্টকে বড় ধরনের কনটেন্ট বা ডিজাইন পরিবর্তন করতে বলতে পারেন।

গুরুত্বপূর্ণ: EmDash Build হলো হোস্টিং প্রদানকারী, ওয়েবসাইট বিল্ডার এবং প্ল্যাটফর্মের জন্য তৈরি একটি আলফা রেফারেন্স অ্যাপ্লিকেশন। হোস্ট করা ডেমোতে প্রকাশনা নিষ্ক্রিয় রয়েছে।

আপনি হোস্ট করা ডেমো দেখতে পারেন, তবে সেখান থেকে সাইট প্রকাশ করতে পারবেন না।

প্রধান সক্ষমতা

  • কাঠামোবদ্ধ স্পষ্টীকরণ: কোনো নির্দেশনায় গুরুত্বপূর্ণ সিদ্ধান্ত অনির্ধারিত থাকলে এজেন্ট নির্দিষ্ট প্রশ্ন করে।
  • এজেন্ট-নকশাকৃত কনটেন্ট মডেল: পুনর্ব্যবহারযোগ্য সত্তার জন্য কালেকশন এবং এডিটররা যে পেজ সেকশনগুলোর ক্রম পরিবর্তন করতে পারেন, সেগুলোর জন্য কাঠামোবদ্ধ ব্লক তৈরি করে।
  • সম্পাদনাযোগ্য Astro সাইট: ফ্রন্টএন্ডে টাইপযুক্ত Astro কম্পোনেন্ট ব্যবহার করা হয়, আর সাধারণ কনটেন্ট EmDash-এর মাধ্যমে পরিচালনা করা যায়।
  • লাইভ প্রিভিউ ও মেরামত: প্রকল্পটি একটি ব্যক্তিগত Builder প্রিভিউতে রেন্ডার করা হয়। এজেন্ট একই প্রক্রিয়ায় আউটপুট যাচাই, ত্রুটি পরীক্ষা এবং মেরামত করতে পারে।
  • কনটেন্ট ওয়ার্কফ্লো: এডিটররা EmDash অ্যাডমিন ইন্টারফেসের মাধ্যমে টেক্সট, মিডিয়া, সেকশন, ব্লক এবং নির্ধারিত কনটেন্ট পরিচালনা করতে পারেন।
  • টেকসই ইতিহাস: সোর্স কোড এবং স্থানীয় CMS স্টেট Cloudflare Artifacts-এ Git কমিট হিসেবে সংরক্ষিত হয়।
  • নিয়ন্ত্রিত প্রকাশনা: যাচাইকৃত স্ট্যাটিক রিলিজ Workers for Platforms-এর জন্য প্যাকেজ করা যায়, তবে কেবল অপারেটর স্পষ্টভাবে প্রকাশনা সক্রিয় ও কনফিগার করলে।

আর্কিটেকচার কীভাবে কাজ করে

প্রতিটি জেনারেট করা প্রকল্পে প্রস্তুত করা EmDash, Astro এবং Tailwind প্রকল্পসহ একটি Cloudflare Sandbox থাকে। একটি BuilderAgent Durable Object কথোপকথন এবং মডেল-ও-টুল লুপ পরিচালনা করে।

এজেন্ট স্কিমা ও কনটেন্ট তৈরি করতে EmDash MCP টুল ব্যবহার করে। এটি Sandbox-এর ভেতরে পাবলিক ফ্রন্টএন্ড লিখে, একটি ব্যক্তিগত প্রিভিউ চালু করে, রেন্ডার করা সাইট যাচাই করে এবং একটি টার্ন সম্পন্ন করার আগে ত্রুটি ঠিক করে।

Cloudflare Artifacts প্রতিটি সুসংগত প্রকল্পের স্টেট Git ইতিহাস হিসেবে সংরক্ষণ করে। কোনো Sandbox নিষ্ক্রিয় হয়ে গেলে, EmDash Build সোর্স কোড এবং স্থানীয় CMS স্টেট উভয়ই নতুন কনটেইনারে পুনরুদ্ধার করে প্রিভিউ পুনরায় চালু করতে পারে।

এজেন্টের ওয়ার্কফ্লো

  1. বোঝা: নির্দেশনা পড়ে অনুপস্থিত গুরুত্বপূর্ণ উপাদান শনাক্ত করা।
  2. মডেল করা: কোন ডেটা পুনর্ব্যবহারযোগ্য কালেকশনে যাবে এবং কোন পেজে কাঠামোবদ্ধ ব্লক প্রয়োজন তা নির্ধারণ করা।
  3. তৈরি করা: EmDash স্কিমা তৈরি করা, জেনারেট করা টাইপ রিফ্রেশ করা এবং টাইপযুক্ত Astro রেন্ডারার লেখা।
  4. পূরণ করা: EmDash MCP টুলের মাধ্যমে প্রতিনিধিত্বমূলক কনটেন্ট ও মিডিয়া যোগ করা।
  5. যাচাই করা: প্রকল্পে টাইপ-চেক চালানো, পাবলিক রুট রেন্ডার করা, প্রিভিউ পরীক্ষা করা এবং ত্রুটি মেরামত করা।
  6. সংরক্ষণ করা: সম্পূর্ণ প্রকল্পের স্টেট Cloudflare Artifacts-এ কমিট করা।

পূর্বশর্ত

স্থানীয় ডেভেলপমেন্টের জন্য স্থানীয় টুলিং এবং একাধিক Cloudflare সার্ভিসে অ্যাক্সেস উভয়ই প্রয়োজন। চালিয়ে যাওয়ার আগে নিম্নলিখিতগুলো প্রস্তুত করুন:

  • Node.js 24 বা পরবর্তী সংস্করণ
  • pnpm 11.9
  • চালু থাকা Docker-সামঞ্জস্যপূর্ণ ডেমন
  • Cloudflare অ্যাকাউন্টে প্রমাণীকৃত Wrangler
  • Cloudflare Workers-এ অ্যাক্সেস
  • Durable Objects-এ অ্যাক্সেস
  • Cloudflare Sandbox-এ অ্যাক্সেস
  • Workers AI এবং AI Gateway-এ অ্যাক্সেস
  • Cloudflare Artifacts-এ অ্যাক্সেস
  • Workers for Platforms-এ অ্যাক্সেস

প্রোভাইডার রিসোর্স এবং ট্রাস্ট বাউন্ডারির জন্য সতর্ক কনফিগারেশন প্রয়োজন। তাই অ্যাপ্লিকেশন ডিপ্লয় করার আগে রিপোজিটরির সেল্ফ-হোস্টিং গাইড পড়ুন।

EmDash Build ইনস্টল ও কনফিগার করুন

1. নির্ভরতা ইনস্টল করুন

রিপোজিটরির রুট থেকে লক করা নির্ভরতার সংস্করণ ইনস্টল করুন:

pnpm install --frozen-lockfile

2. প্রোভাইডার কনফিগারেশন তৈরি করুন

provider.config.example.json কপি করে উপেক্ষিত provider.config.json ফাইল তৈরি করুন:

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

provider.config.json খুলে প্রতিটি উদাহরণ মানের জায়গায় আপনার Cloudflare অ্যাকাউন্টের রিসোর্সের তথ্য দিন। উদাহরণ মানের ওপর নির্ভর না করে সেল্ফ-হোস্টিং গাইড অনুসরণ করে প্রয়োজনীয় রিসোর্স তৈরি করুন।

3. কনফিগারেশন যাচাই ও রেন্ডার করুন

প্রিফ্লাইট পরীক্ষা চালান, তারপর প্রোভাইডার-নির্দিষ্ট Wrangler কনফিগারেশন তৈরি করুন:

pnpm preflight
pnpm configure

নথিভুক্ত স্থানীয় স্টার্টআপ কমান্ডে ব্যবহৃত জেনারেট করা কনফিগারেশন হলো wrangler.provider.jsonc। ডিপ্লয় করার বা সংবেদনশীল পরিবেশ চালানোর আগে এই প্রোভাইডার-নির্দিষ্ট ফাইলটি পরীক্ষা করুন।

4. স্থানীয় সিক্রেট কনফিগার করুন

ডেভেলপমেন্ট সিক্রেটস টেমপ্লেট কপি করুন:

cp .dev.vars.example .dev.vars

বিল্ডারের প্রয়োজনীয় AI Gateway ক্রেডেনশিয়ালগুলো .dev.vars-এ যোগ করুন। UNSPLASH_ACCESS_KEY ঐচ্ছিক; এটি যোগ করলে জেনারেশনের সময় স্টক-ইমেজ সার্চ সক্রিয় হয়।

জেনারেট করা প্রকল্পের মধ্যে প্রোভাইডার ক্রেডেনশিয়াল রাখবেন না। প্রকাশনা সার্ভার দ্বারা নিয়ন্ত্রিত হয় এবং জেনারেট করা সাইটগুলোকে প্রোভাইডার ক্রেডেনশিয়াল দেওয়া হয় না।

5. সম্পূর্ণ স্থানীয় অ্যাপ্লিকেশন চালু করুন

উৎপন্ন provider কনফিগারেশন দিয়ে EmDash Build শুরু করুন:

EMDASH_WRANGLER_CONFIG=wrangler.provider.jsonc pnpm dev

ডেভেলপমেন্ট সার্ভার প্রস্তুত হলে http://localhost:5173 খুলুন।

৬. প্রয়োজন অনুযায়ী শুধুমাত্র UI মোড শুরু করুন

শুধু ইন্টারফেস নিয়ে কাজ করতে হলে ব্যবহার করুন:

pnpm dev:ui

এই মোড Sandbox-নির্ভর সাইট জেনারেশন শুরু করে না। Builder agent, project creation বা লাইভ generated preview পরীক্ষা করতে হলে পূর্ণ ডেভেলপমেন্ট কমান্ড ব্যবহার করুন।

প্রাথমিক ব্যবহার: একটি brief থেকে সাইট তৈরি

১. কার্যকর brief লিখুন

প্রস্তাবিত ওয়েবসাইট, এর শ্রোতা, প্রধান পৃষ্ঠা, পুনর্ব্যবহারযোগ্য কনটেন্ট এবং কাঙ্ক্ষিত ভিজ্যুয়াল দিকনির্দেশনা বর্ণনা করুন। উদাহরণ:

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 নির্দিষ্ট কিছু ব্যাখ্যামূলক প্রশ্ন করতে পারে। সুসংগত schema ও frontend প্রত্যাশা করার আগে এসব প্রশ্নের উত্তর দিন।

২. Agent-কে সাইটের মডেল তৈরি ও নির্মাণ করতে দিন

ব্যাখ্যা পাওয়ার পর agent নির্ধারণ করে কোন তথ্য পুনর্ব্যবহারযোগ্য collection-এ থাকবে এবং কোন narrative page-এ structured block ব্যবহার করা উচিত। এরপর এটি EmDash schema তৈরি করে, generated type refresh করে, Astro renderer লেখে এবং MCP tool-এর মাধ্যমে নমুনা কনটেন্ট যোগ করে।

৩. Private preview পর্যালোচনা করুন

উৎপন্ন route ও সামগ্রিক নকশা পরিদর্শন করতে Builder-এর live preview ব্যবহার করুন। EmDash Build উৎপন্ন project যাচাই করে এবং agent loop-এর মধ্যে শনাক্ত ত্রুটি মেরামত করতে পারে।

৪. EmDash-এ সম্পাদনা চালিয়ে যান

প্রাথমিক project ব্যবহারযোগ্য হলে EmDash administration interface-এর মাধ্যমে নিয়মিত কনটেন্ট পরিচালনা করুন। আপনি text ও media সম্পাদনা করতে, section যোগ বা নকল করতে, block পুনর্বিন্যাস করতে এবং post schedule করতে পারবেন। বৃহত্তর কাঠামোগত, কনটেন্ট বা নকশাগত পরিবর্তনের প্রয়োজন হলে agent-এ ফিরে যান।

৫. Project state সংরক্ষণ ও পুনরুদ্ধার করুন

সুসংগত project state Git history হিসেবে Cloudflare Artifacts-এ commit করা হয়। কোনো Sandbox নিষ্ক্রিয় হয়ে নতুন container প্রয়োজন হলে এই persistence EmDash Build-কে project source ও স্থানীয় CMS state পুনরুদ্ধার করতে সাহায্য করে।

Validation ও Development Command

আপনি যে ধরনের পরিবর্তন করছেন, তার জন্য উপযুক্ত repository command ব্যবহার করুন:

  • pnpm dev default configuration দিয়ে EmDash Build শুরু করে।
  • pnpm dev:ui Cloudflare Sandbox container ছাড়াই interface শুরু করে।
  • pnpm check application ও Worker test-এর type check করে।
  • pnpm test application test suite চালায়।
  • pnpm test:worker Workers integration suite চালায়।
  • pnpm build default configuration দিয়ে EmDash Build 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

উন্নত পরামর্শ

সঠিক Development Mode নির্বাচন করুন

আলাদা interface-সংক্রান্ত কাজের জন্য pnpm dev:ui ব্যবহার করুন, কারণ এটি Sandbox container শুরু করা এড়িয়ে যায়। Generation workflow যাচাই করতে এটি ব্যবহার করবেন না: UI-only mode-এ Sandbox-নির্ভর generation উপলভ্য নয়।

Content Editing ও Structural Change আলাদা রাখুন

Text, media, section ও ordering পরিবর্তনের মতো সাধারণ editorial কাজের জন্য EmDash admin interface ব্যবহার করুন। বৃহত্তর design বা content-model পরিবর্তনের জন্য agent ব্যবহার করুন। এতে structured CMS data এবং typed Astro rendering code-এর মধ্যে project-এর বিভাজন বজায় থাকে।

Provider Configuration পরিদর্শন করুন

উদাহরণ provider configuration-কে শুধু template হিসেবে বিবেচনা করুন। প্রতিটি নমুনা মান প্রতিস্থাপন করুন, pnpm preflight চালান, pnpm configure দিয়ে Wrangler configuration তৈরি করুন এবং লক্ষ্য Cloudflare account-এর জন্য output পরিদর্শন করুন।

Publishing স্পষ্টভাবে নিয়ন্ত্রণ করুন

Public publishing server-এর নিয়ন্ত্রণাধীন এবং default হিসেবে নিষ্ক্রিয়। Workers for Platforms-এর জন্য যাচাইকৃত static release package করার মতো operating provider প্রস্তুত থাকলেই এটি সক্রিয় ও configure করুন। Hosted demo-তেও publishing নিষ্ক্রিয় রাখা হয়েছে।

Deployment-এর আগে Security Boundary পর্যালোচনা করুন

Model tool, Sandbox execution, secret, private preview, persistence ও publishing সম্পর্কে বিস্তারিত জানতে repository-এর threat model দেখুন। Operational check-এর জন্য operations guide ব্যবহার করুন।

Repository দক্ষতার সঙ্গে নেভিগেট করুন

  • src/worker-এ Worker route, BuilderAgent, prompt, tool, persistence ও publishing control রয়েছে।
  • src/client-এ React Builder interface, chat, activity view ও live preview রয়েছে।
  • prototype/builder-cloudflare-এ নতুন project-এর জন্য ব্যবহৃত প্রস্তুত blank EmDash ও Astro scaffold রয়েছে।
  • migrations-এ authentication ও provider-control database migration রয়েছে।
  • scripts-এ provider configuration, smoke test ও operational helper রয়েছে।
  • test-এ application ও Worker coverage রয়েছে।
  • docs-এ self-hosting, security, operations ও implementation documentation রয়েছে।

উপসংহার

EmDash Build AI-সহায়তাপ্রাপ্ত জেনারেশনকে একটি টেকসই, সম্পাদনাযোগ্য CMS কর্মপ্রবাহের সঙ্গে যুক্ত করে। এটি কাঠামোবদ্ধ EmDash কনটেন্ট এবং টাইপযুক্ত Astro কম্পোনেন্ট তৈরি করে, একটি ব্যক্তিগত Cloudflare Sandbox প্রিভিউতে ফলাফল যাচাই করে এবং Cloudflare Artifacts-এ প্রকল্পের ইতিহাস সংরক্ষণ করে। যেহেতু এটি উল্লেখযোগ্য অবকাঠামোগত প্রয়োজনীয়তাসম্পন্ন একটি আলফা রেফারেন্স অ্যাপ্লিকেশন, তাই প্রদানকারীর রিসোর্স সতর্কতার সঙ্গে কনফিগার করুন, নিরাপত্তা সংক্রান্ত ডকুমেন্টেশন পর্যালোচনা করুন এবং সর্বজনীন প্রকাশনা স্পষ্টভাবে নিয়ন্ত্রিত রাখুন।