এই AI অ্যাপ বিল্ডার যা করে
এই ওপেন-সোর্স ওয়েব অ্যাপ্লিকেশনটি একটি সাধারণ ভাষার প্রম্পটকে সম্পূর্ণ ফুল-স্ট্যাক Next.js প্রজেক্টে রূপান্তর করে। ফ্রন্টএন্ড, ব্যাকএন্ড, ডেটাবেস, হোস্টিং পরিবেশ, অথেন্টিকেশন প্রবাহ এবং ডিপ্লয়মেন্ট পাইপলাইন নিজে হাতে একত্র করার পরিবর্তে, আপনি যে অ্যাপ্লিকেশনটি চান তা বর্ণনা করেন এবং লাইভ ব্রাউজার প্রিভিউয়ের মাধ্যমে এর নির্মাণপ্রক্রিয়া অনুসরণ করেন।
উৎপন্ন অ্যাপ্লিকেশনগুলো লক করা নো-কোড আর্টিফ্যাক্ট নয়, বরং বাস্তব Next.js প্রজেক্ট। আপনি প্রতিটি ফাইল পরিদর্শন ও পরিবর্তন করতে পারেন, প্রজেক্টটিকে GitHub-এর সঙ্গে সংযুক্ত করতে পারেন, কাস্টম ডোমেইন যুক্ত করতে পারেন এবং Vercel, Docker অথবা অন্য কোনো Node.js পরিবেশে ডিপ্লয় করতে পারেন।
বিল্ডারটি মাল্টি-টেন্যান্ট ব্যবহারের জন্যও তৈরি। প্রজেক্টগুলো বিচ্ছিন্ন স্যান্ডবক্সে চলে এবং ব্যবহারকারী, দল অথবা গ্রাহক অনুযায়ী আলাদা করা যায়। ফলে এটি ব্যক্তিগত ডেভেলপমেন্টের পাশাপাশি অন্য কোনো পণ্যের মধ্যে অ্যাপ জেনারেশন যুক্ত করার জন্যও উপযোগী।
প্রধান বৈশিষ্ট্য
প্রম্পট থেকে অ্যাপ্লিকেশন তৈরি
স্বাভাবিক ভাষায় একটি অ্যাপ্লিকেশনের ধারণা লিখুন, আর AI একটি সম্পূর্ণ ফুল-স্ট্যাক Next.js অ্যাপ্লিকেশন তৈরি করবে। এজেন্ট কাজ করার সময় লাইভ প্রিভিউ আপডেট হয়, তাই আলাদা বিল্ড ও ডিপ্লয় সাইকেলের জন্য অপেক্ষা না করে অগ্রগতি দেখা যায়।
ভিজ্যুয়াল ও সোর্স-কোড সম্পাদনা
প্রিভিউতে কোনো উপাদান নির্বাচন করে টেক্সট বা রঙের মতো বৈশিষ্ট্য পরিবর্তন করতে পারেন। বিল্ডারটি পরিবর্তনটি সংশ্লিষ্ট সোর্স লাইনে লিখে দেয় এবং স্বয়ংক্রিয়ভাবে প্রজেক্ট পুনর্নির্মাণ করে। আরও গভীর পরিবর্তনের জন্য সমন্বিত Monaco এডিটরে প্রতিটি উৎপন্ন ফাইলে প্রবেশাধিকার থাকে এবং এর সম্পাদনা অভিজ্ঞতা Visual Studio Code-এর মতো।
অন্তর্নির্মিত প্রজেক্ট অবকাঠামো
- প্রতিটি প্রজেক্টের জন্য আলাদা SQL ডেটাবেস, যেখানে ডেভেলপমেন্ট ও লাইভ পরিবেশ পৃথক।
- রেকর্ড ব্রাউজ করা, কুয়েরি চালানো, স্কিমা ও মাইগ্রেশন পরিদর্শন এবং ব্যাকআপ নেওয়ার সরঞ্জাম।
- অ্যানালিটিক্স, সীমা, পরিবেশ ভেরিয়েবল, সিক্রেট, নির্ধারিত কাজ, রানটাইম লগ, মোবাইল বিল্ড, পেমেন্ট ও সেটিংসের জন্য প্রজেক্ট নিয়ন্ত্রণ।
- উৎপন্ন অ্যাপ্লিকেশনের জন্য হোস্টিং, SSL, CDN সাপোর্ট এবং ডিপ্লয়মেন্ট পাইপলাইন।
- বিচ্ছিন্ন স্যান্ডবক্স, যেখানে কোনো প্রজেক্ট নিষ্ক্রিয় থাকলে প্রয়োজনমতো পুনরায় সক্রিয় হয়।
ভার্সনিং ও বহনযোগ্যতা
প্রতিটি AI বিল্ড পুনরুদ্ধারযোগ্য একটি চেকপয়েন্ট তৈরি করে। ডিফ ভিউয়ার ভার্সনগুলোর মধ্যে কী পরিবর্তন হয়েছে তা শনাক্ত করে, আর উৎপন্ন আপডেট প্রত্যাশিত ফল না দিলে আগের অবস্থা পুনরুদ্ধার করা যায়। ইমপোর্ট কোড ব্যবহার করে প্রজেক্ট ডুপ্লিকেট বা স্থানান্তরও করা যায়।
ইন্টিগ্রেশন ও ডিপ্লয়মেন্টের বিকল্প
- পরিবর্তন পাঠানো ও আনার জন্য দ্বিমুখী GitHub সিঙ্ক্রোনাইজেশন।
- Figma ফ্রেমের লিংক, যা এজেন্ট ডিজাইনের উৎস হিসেবে ব্যবহার করতে পারে।
- নির্দেশিত DNS কনফিগারেশন ও HTTPS সাপোর্টসহ কাস্টম ডোমেইন।
- Vercel, Docker অথবা стандарт Node.js পরিবেশে ডিপ্লয়মেন্ট।
- গ্রাহকমুখী পণ্যের জন্য হোয়াইট-লেবেল ও মাল্টি-টেন্যান্ট ভিত্তি।
প্রযুক্তির স্ট্যাক
বিল্ডারটি App Router, সার্ভার কম্পোনেন্ট এবং স্ট্রিমিংসহ Next.js 16 ও React 19 ব্যবহার করে। TypeScript শুরু থেকে শেষ পর্যন্ত টাইপ সেফটি প্রদান করে, আর Tailwind CSS 4 স্টাইলিং সিস্টেম সরবরাহ করে।
ব্রাউজারভিত্তিক কোড এডিটরকে Monaco চালিত করে। ইন্টারফেসে Radix UI, Lucide আইকন, Sonner নোটিফিকেশন এবং cmdk কমান্ড প্যালেটও ব্যবহৃত হয়েছে। নির্ভরতার পরিসর ইচ্ছাকৃতভাবে সংক্ষিপ্ত: প্রজেক্টে অথেন্টিকেশন, পেমেন্ট বা AI SDK বান্ডেল করা নেই; এর পরিবর্তে একটি API কী-এর মাধ্যমে যোগাযোগ করা হয়।
ইনস্টলেশনের প্রয়োজনীয়তা
ডকুমেন্টেড ইনস্টলারটি Windows-এর জন্য তৈরি এবং এর প্রয়োজনীয়তাগুলো হলো:
- অপারেটিং সিস্টেম: Windows 10 অথবা Windows 11।
- শেল: PowerShell 5.1 অথবা PowerShell 7 বা পরবর্তী সংস্করণ।
- নেটওয়ার্ক: ইনস্টলার স্ক্রিপ্ট ও প্রয়োজনীয় প্রজেক্ট ফাইল ডাউনলোডের জন্য ইন্টারনেট সংযোগ।
- অনুমতি: একটি সাধারণ ব্যবহারকারী অ্যাকাউন্টই যথেষ্ট।
README-তে ম্যানুয়াল প্যাকেজ ইনস্টলেশন কমান্ড বা ইনস্টলার প্রম্পটের তালিকা দেওয়া নেই। প্রজেক্টের প্রকাশিত PowerShell ইনস্টলার পেজ ব্যবহার করুন এবং সেখানে প্রদর্শিত নির্দেশনা অনুসরণ করুন।
বিল্ডার সেট আপ করুন
- আপনার PowerShell সংস্করণ নিশ্চিত করুন। PowerShell খুলে যাচাই করুন যে আপনার পরিবেশ ন্যূনতম প্রয়োজনীয়তা পূরণ করে।
- ইনস্টলার পেজ খুলুন। প্রজেক্টের দেওয়া PowerShell ইনস্টলার লিংকে যান।
- চালানোর আগে স্ক্রিপ্ট পর্যালোচনা করুন। দূরবর্তীভাবে ডাউনলোড করা যেকোনো PowerShell স্ক্রিপ্টের মতোই এর বিষয়বস্তু পরিদর্শন করুন এবং নিশ্চিত করুন যে উৎসটি প্রত্যাশিত প্রজেক্ট প্রকাশক।
- ডকুমেন্টেড ইনস্টলেশন প্রক্রিয়া চালান। তালিকাভুক্ত নয় এমন কোনো কমান্ডের ওপর নির্ভর না করে ইনস্টলার পেজের বর্তমান নির্দেশনা অনুসরণ করুন।
- API কী কনফিগার করুন। অ্যাপ্লিকেশন তৈরি করতে একটি API কী প্রয়োজন। README-তে বলা হয়েছে, এটি একটি পরিবেশ ভেরিয়েবলের মাধ্যমে সরবরাহ করা হয়, তবে ভেরিয়েবলের নাম উল্লেখ করা হয়নি। ইনস্টল করা প্রজেক্টের কনফিগারেশন ডকুমেন্টেশনে দেখানো নাম ও মানের ফরম্যাট ব্যবহার করুন।
- ওয়েব অ্যাপ্লিকেশন চালু করুন। ইনস্টলার বা স্থানীয় প্রজেক্ট ডকুমেন্টেশনে দেওয়া স্টার্টআপ প্রক্রিয়া ব্যবহার করুন, তারপর ব্রাউজারে প্রদর্শিত স্থানীয় ঠিকানাটি খুলুন।
সোর্স কোড চালানো বিনামূল্যে, তবে AI বিল্ডে API ক্রেডিট খরচ হয়। README অনুযায়ী প্রাথমিক ক্রেডিট বিনামূল্যে পাওয়া যায়, আর ব্যবহার বাড়লে চার্জ প্রযোজ্য হয়।
আপনার প্রথম অ্যাপ্লিকেশন তৈরি করুন
1. একটি নির্দিষ্ট প্রম্পট দিয়ে শুরু করুন
উদ্দিষ্ট ব্যবহারকারী, প্রধান স্ক্রিন, ডেটা এবং প্রত্যাশিত কাজগুলো বর্ণনা করুন। একটি বিস্তৃত নির্দেশনার তুলনায় নির্দিষ্ট অনুরোধ এজেন্টকে আরও পরিষ্কার বাস্তবায়ন লক্ষ্য দেয়।
পাবলিক সাবমিশন ফর্ম, স্ট্যাটাস অনুযায়ী ফিডব্যাকের তালিকা দেখানো ড্যাশবোর্ড এবং প্রতিটি আইটেম আপডেট করার জন্য টিম সদস্যদের একটি বিস্তারিত পেজসহ একটি গ্রাহক ফিডব্যাক পোর্টাল তৈরি করুন।এই উদাহরণটি বিল্ডারের নথিভুক্ত সক্ষমতার মধ্যেই থাকে: পূর্ণ-স্ট্যাক Next.js জেনারেশন, ডেটাবেস-নির্ভর আচরণ এবং ব্রাউজার-ভিত্তিক সম্পাদনা। এটিকে প্রোডাকশন-প্রস্তুত হিসেবে বিবেচনা করার আগে জেনারেট করা বাস্তবায়ন পর্যালোচনা করুন।
2. লাইভ প্রিভিউ দেখুন
এজেন্ট ফাইল জেনারেট এবং অ্যাপ্লিকেশন পুনর্নির্মাণ করার সময় প্রিভিউ দৃশ্যমান রাখুন। নিষ্ক্রিয় পরিবেশ জেগে ওঠার সময়সহ স্যান্ডবক্স ইন্টারফেস তার অবস্থা জানায়, নীরবে ব্যর্থ হয়েছে এমন মনে হয় না।
3. ইন্টারফেসটি দৃশ্যগতভাবে পরিমার্জন করুন
ছোট কোনো ডিজাইন পরিবর্তন দরকার হলে প্রিভিউয়ের একটি উপাদান নির্বাচন করুন। উদাহরণস্বরূপ, প্রিভিউ থেকেই সরাসরি কোনো শিরোনাম, বোতামের লেবেল বা রঙ পরিবর্তন করুন। সংশ্লিষ্ট সোর্স স্বয়ংক্রিয়ভাবে আপডেট ও পুনর্নির্মিত হয়।
4. জেনারেট করা কোড পরিদর্শন করুন
Monaco এডিটর খুলে জেনারেট করা রুট, কম্পোনেন্ট, ডেটাবেস অ্যাক্সেস এবং কনফিগারেশন পর্যালোচনা করুন। আউটপুটটি যেহেতু একটি স্ট্যান্ডার্ড TypeScript ও Next.js কোডবেস, তাই আপনি এটি হাতে পরিমার্জন করতে পারবেন এবং ফলাফলের ওপর সম্পূর্ণ মালিকানা বজায় রাখতে পারবেন।
5. প্রজেক্টের ডেটা নিয়ে কাজ করুন
স্কিমা ও মাইগ্রেশন পরিদর্শন, রেকর্ড দেখা বা সম্পাদনা এবং SQL কোয়েরি চালানোর জন্য ডেটাবেস প্যানেল ব্যবহার করুন। ডেভেলপমেন্ট ও লাইভ ডেটা আলাদা রাখুন এবং বড় ধরনের স্কিমা বা ডেটা পরিবর্তনের আগে ব্যাকআপ তৈরি করুন।
6. অ্যাপ্লিকেশন প্রকাশ করুন
লাইভ প্রিভিউ একটি পাবলিক ঠিকানায় প্রকাশ করা যায়। পরে আপনি একটি বিদ্যমান ডোমেইন সংযুক্ত করতে বা ইন্টারফেসের মাধ্যমে একটি ডোমেইন কিনতে পারবেন। ডোমেইন নিয়ন্ত্রণে বেয়ার ডোমেইন, একটি www. ঠিকানা অথবা একটি কাস্টম সাবডোমেইন, পাশাপাশি DNS স্ট্যাটাস ও HTTPS রিডিরেকশন সমর্থিত।
একটি GitHub রিপোজিটরি সংযুক্ত করুন
জেনারেট করা প্রজেক্টকে একটি GitHub রিপোজিটরিতে সংযুক্ত করুন, যখন কোডটিকে আপনার দলের স্বাভাবিক ডেভেলপমেন্ট ওয়ার্কফ্লোর অংশ করতে চান। সিঙ্ক্রোনাইজেশন উভয় দিকেই কাজ করে, তাই আপনি জেনারেট করা পরিবর্তন রিপোজিটরিতে পুশ করতে এবং বাহ্যিক পরিবর্তন বিল্ডারে টেনে আনতে পারবেন।
- অ্যাপ্লিকেশন সংরক্ষণ করবে এমন রিপোজিটরি তৈরি করুন বা বেছে নিন।
- বিল্ডারের GitHub ইন্টিগ্রেশনের মাধ্যমে এটি সংযুক্ত করুন।
- পরীক্ষিত ও সঠিকভাবে কাজ করা জেনারেট করা একটি চেকপয়েন্ট পুশ করুন।
- আপনার নিয়মিত পর্যালোচনা প্রক্রিয়ার মাধ্যমে বাহ্যিক পরিবর্তন করুন।
- সেই পরিবর্তনগুলো বিল্ডারে টেনে এনে লাইভ প্রিভিউতে যাচাই করুন।
একই সময়ে উভয় স্থানে একই অংশ সম্পাদনা করা এড়িয়ে চলুন। ঘন ঘন ছোট সিঙ্ক্রোনাইজেশন ধাপ নিলে দ্বন্দ্ব বোঝা ও সমাধান করা সহজ হয়।
উন্নত ব্যবহারের পরামর্শ
একটি Figma ডিজাইন থেকে জেনারেট করুন
ডিজাইন আগে থেকেই থাকলে চ্যাটে একটি Figma ফ্রেমের লিংক পেস্ট করুন। এজেন্ট সরাসরি সেই ফ্রেম থেকে তৈরি করতে পারে, ফলে ডিজাইনকে হাতে প্রম্পটে রূপান্তর করার প্রয়োজন কমে যায়। স্ট্যাটিক ডিজাইনে প্রতিফলিত নাও হতে পারে এমন রেসপনসিভ আচরণ ও অ্যাপ্লিকেশন লজিকের জন্য ফলাফলটি পরিদর্শন করুন।
বড় সংশোধনের আগে চেকপয়েন্ট ব্যবহার করুন
বড় ধরনের আর্কিটেকচারাল বা ভিজ্যুয়াল পরিবর্তনের অনুরোধ করার আগে একটি স্থিতিশীল চেকপয়েন্ট আছে কি না নিশ্চিত করুন। জেনারেশনের পর ঠিক কী পরিবর্তন হয়েছে তা দেখতে ডিফ ভিউয়ার ব্যবহার করুন। আপডেটে রিগ্রেশন দেখা দিলে প্রতিটি ফাইল হাতে হাতে আগের অবস্থায় ফেরানোর বদলে পুরোনো চেকপয়েন্ট পুনরুদ্ধার করুন।
ডেভেলপমেন্ট ও লাইভ ডেটা আলাদা রাখুন
প্রথমে ডেভেলপমেন্ট ডেটাবেসে মাইগ্রেশন ও কোয়েরি পরীক্ষা করুন। লাইভ স্কিমা পরিবর্তনের আগে গুরুত্বপূর্ণ রেকর্ডের ব্যাকআপ নিন এবং এনভায়রনমেন্ট ভেরিয়েবল ও সিক্রেটগুলো সঠিক পরিবেশে বরাদ্দ করা হয়েছে কি না নিশ্চিত করুন।
উপযুক্ত ডিপ্লয়মেন্ট লক্ষ্য বেছে নিন
Next.js অ্যাপ্লিকেশনের জন্য Vercel একটি স্বাভাবিক গন্তব্য, আর Docker রানটাইমের বহনযোগ্যতা ও নিয়ন্ত্রণ বাড়াতে পারে। একটি স্ট্যান্ডার্ড Node.js হোস্টও সমর্থিত। যে বিকল্পই বেছে নিন, সেটি Next.js 16, প্রজেক্টের এনভায়রনমেন্ট ভেরিয়েবল, ডেটাবেস সংযোগ, SSL এবং ডোমেইন কনফিগারেশনের সঙ্গে সামঞ্জস্যপূর্ণ কি না যাচাই করুন।
মাল্টি-টেন্যান্ট মালিকানার নিয়ম পরিকল্পনা করুন
প্রজেক্ট আইসোলেশন বিল্ট ইন থাকলেও গ্রাহকমুখী পণ্যের জন্য স্পষ্ট অনুমোদন ও মালিকানা যাচাই এখনও প্রয়োজন। কোন ব্যবহারকারী বা দল প্রতিটি প্রজেক্ট তৈরি, পরিদর্শন, পরিবর্তন, প্রকাশ, এক্সপোর্ট বা মুছে ফেলতে পারবে তা নির্ধারণ করুন।
প্রোডাকশন নিরাপত্তা সতর্কতা
বিল্ডারটি ইচ্ছাকৃতভাবে লগইন ছাড়াই সরবরাহ করা হয়েছে। প্রকাশ্যে উন্মুক্ত বিল্ডার URL-এ পৌঁছাতে পারে এমন যে কেউ কনফিগার করা API কী-এর ক্রেডিট ব্যবহার করতে সক্ষম হতে পারে। প্রমাণীকরণ ও প্রজেক্ট মালিকানা যাচাই যোগ না করে বিল্ডারটিকে অবিশ্বস্ত ব্যবহারকারীদের জন্য প্রকাশ করবেন না।
- পাবলিকভাবে উন্মুক্ত করার আগে আপনার পছন্দের প্রমাণীকরণ ব্যবস্থা যোগ করুন।
- প্রতিটি প্রজেক্ট-স্তরের কাজের জন্য অনুমোদন কার্যকর করুন।
- API কী, প্রজেক্ট সিক্রেট এবং এনভায়রনমেন্ট ভেরিয়েবল সুরক্ষিত রাখুন।
- ব্যবহার ও খরচের সীমা প্রয়োগ করুন।
- অপ্রত্যাশিত কার্যকলাপ শনাক্ত করতে রানটাইম লগ ও অ্যানালিটিক্স পর্যালোচনা করুন।
- গ্রাহকদের অ্যাক্সেস দেওয়ার আগে টেন্যান্ট আইসোলেশন পরীক্ষা করুন।
README-তে বলা হয়েছে যে এসব সংযোজনের জন্য হুক ইতিমধ্যে রয়েছে, তবে ডিফল্ট ইনস্টলেশন সীমাহীন পাবলিক অ্যাক্সেসের জন্য নিরাপদ, এমন দাবি করা হয়নি।
লাইসেন্স সংক্রান্ত নোট
README-এর লাইসেন্স অংশে বলা হয়েছে যে প্রজেক্টটি MIT License-এর অধীনে প্রকাশিত এবং আইনি শর্তাবলির জন্য রিপোজিটরির LICENSE ফাইল দেখতে বলা হয়েছে। তবে সরবরাহ করা README-এর শীর্ষে দেখানো ব্যাজে LGPL 2.1 লেখা আছে। যেহেতু বক্তব্য দুটির মধ্যে অসামঞ্জস্য রয়েছে, সফটওয়্যারটি পরিবর্তন, পুনর্বিতরণ, এমবেড বা বিক্রি করার আগে আপনি যে সংস্করণ ইনস্টল করবেন তার প্রকৃত LICENSE ফাইল পরিদর্শন করুন।
উপসংহার
এই AI অ্যাপ বিল্ডারটি প্রম্পট-ভিত্তিক জেনারেশনকে লাইভ প্রিভিউ, সম্পূর্ণ সোর্স অ্যাক্সেস, SQL ডেটা টুল, GitHub সিঙ্ক্রোনাইজেশন, চেকপয়েন্ট, ডোমেইন এবং নমনীয় ডিপ্লয়মেন্টের সঙ্গে একত্র করে। Windows PowerShell ইনস্টলার দিয়ে শুরু করুন, নথিভুক্ত API key ভেরিয়েবল কনফিগার করুন, নির্দিষ্ট পরিসরের একটি অ্যাপ্লিকেশন তৈরি করুন এবং ভিজ্যুয়াল ও কোড এডিটর উভয়ের মাধ্যমে সেটি পরিমার্জন করুন। প্রকৃত ব্যবহারকারীদের জন্য পরিবেশন করার আগে প্রমাণীকরণ, মালিকানা যাচাই এবং ব্যয় নিয়ন্ত্রণ ব্যবস্থা যোগ করুন।