১. ভূমিকা
এই কোডল্যাবে, আপনি এআই-চালিত ডিজাইন এবং এজেন্ট-ফার্স্ট ডেভেলপমেন্ট এনভায়রনমেন্টের মধ্যে সংযোগ স্থাপন করে একটি প্রোডাকশন-রেডি ওয়েবসাইট তৈরি করবেন। আপনি একটি হাই-ফিডেলিটি UI জেনারেট করার জন্য Google Stitch ব্যবহার করবেন, তারপর মডেল কনটেক্সট প্রোটোকল (MCP)- এর মাধ্যমে এটিকে Antigravity IDE-এর সাথে সংযুক্ত করবেন। সবশেষে, আপনি একটি অটোনোমাস এজেন্ট ব্যবহার করে "ডিজাইন ডিএনএ" সংগ্রহ করবেন এবং একটি পিক্সেল-পারফেক্ট React অ্যাপ্লিকেশন ইমপ্লিমেন্ট করবেন।
আপনি যা করবেন
- স্টিচে UI তৈরি করুন: গুগল স্টিচে স্বাভাবিক ভাষা ব্যবহার করে একটি পূর্ণাঙ্গ ওয়েব ডিজাইন তৈরি করুন।
- এমসিপি-র সাথে সংযোগ স্থাপন করুন: মডেল কনটেক্সট প্রোটোকল ব্যবহার করে আপনার স্টিচ প্রোজেক্টের সাথে অ্যান্টিগ্র্যাভিটি সংযুক্ত করুন।
- স্বয়ংক্রিয় বাস্তবায়ন: ডিজাইন টোকেন সংগ্রহ করতে এবং একটি React/Tailwind প্রজেক্ট স্কাফোল্ড করতে Antigravity-এর 'এজেন্ট ট্যাব' ব্যবহার করুন।
- যাচাই ও পরিমার্জন করুন: সমন্বিত ব্রাউজারটি ব্যবহার করে মূল ডিজাইনের সাথে কোডটি মিলিয়ে দেখুন।
আপনি যা শিখবেন
- উচ্চ মানের UI ডিজাইনের দ্রুত প্রোটোটাইপ তৈরি করতে কীভাবে Google Stitch ব্যবহার করবেন
- Antigravity IDE-এর মধ্যে কীভাবে MCP সার্ভার কনফিগার করতে হয়।
- ভিজ্যুয়াল ডিজাইন মেটাডেটাকে মডিউলার কোডে রূপান্তর করতে স্বায়ত্তশাসিত এজেন্ট কীভাবে ব্যবহার করবেন
আপনার যা যা লাগবে
- ক্রোম ওয়েব ব্রাউজার
- একটি Antigravity IDE ইনস্টল করা আছে
- একটি গুগল স্টিচ অ্যাকাউন্ট
- একটি স্টিচ এপিআই কী
- স্থানীয়ভাবে Node.js (v18+) ইনস্টল করা আছে
শুরু করার আগে
- গুগল ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
- আপনার ক্লাউড প্রোজেক্টের জন্য বিলিং চালু আছে কিনা তা নিশ্চিত করুন। কোনো প্রোজেক্টে বিলিং চালু আছে কিনা তা কীভাবে পরীক্ষা করবেন, তা জেনে নিন।
গুগল ক্লাউড ক্রেডিটের জন্য: গুগল ক্লাউড প্রোজেক্টের সাথে অ্যান্টিগ্র্যাভিটি ব্যবহার করতে, এই লিঙ্কটি ব্যবহার করে আপনার বিনামূল্যের গুগল ক্লাউড ক্রেডিট রিডিম করুন। ক্রেডিটটি সক্রিয় করতে এবং একটি নতুন প্রোজেক্ট তৈরি করতে আপনি এখানকার নির্দেশাবলী অনুসরণ করতে পারেন।
- stitch.withgoogle.com- এ যান এবং নিশ্চিত করুন যে আপনি সাইন ইন করতে পারছেন।
- আপনার কম্পিউটারে Antigravity IDE ইনস্টল করা আছে কিনা তা নিশ্চিত করুন (এটি antigravity.google ওয়েবসাইটে পাওয়া যাবে)।
২. গুগল স্টিচে ডিজাইনটি তৈরি করুন
এজেন্টের অনুসরণ করার জন্য একটি দৃশ্যমান 'সত্যের উৎস' প্রয়োজন। কোড লেখার আগে, আমাদের অবশ্যই এর নান্দনিকতা নির্ধারণ করতে হবে।
- প্ল্যাটফর্মে প্রবেশ করতে: stitch.withgoogle.com- এ যান।
- প্রজেক্টের ধরণ নির্বাচন করুন: মূল ড্যাশবোর্ডে, 'Start a new design' টগলটি খুঁজুন। আপনার ডিজাইনটি ব্রাউজার-ভিত্তিক লেআউটের জন্য অপ্টিমাইজ করা হয়েছে কিনা তা নিশ্চিত করতে 'Web'-এ ক্লিক করুন।
- আপনার মডেল বেছে নিন: প্রম্পট বক্সের ভিতরে মডেল ড্রপডাউন মেনুতে (বর্তমানে ৩.০ ফ্ল্যাশ দেখানো হচ্ছে) ক্লিক করুন। সবচেয়ে উন্নত রিজনিং এবং লেআউট জেনারেশনের জন্য জেমিনি ৩ নির্বাচিত হয়েছে কিনা তা নিশ্চিত করুন।
- আপনার রূপকল্প বর্ণনা করুন: "আপনার ডিজাইন বর্ণনা করুন" লেবেলযুক্ত টেক্সট এরিয়াতে, আপনার প্রম্পটটি লিখুন:
LaunchPad নামক একটি স্পেস-টেক স্টার্টআপের জন্য একটি আধুনিক SaaS ল্যান্ডিং পেজ ডিজাইন করুন। মিডনাইট ব্লু এবং নিয়ন পার্পল রঙের প্যালেট ব্যবহার করুন। একটি 'Get Started' বাটন সহ একটি হিরো সেকশন, একটি ৩-কলামের ফিচার গ্রিড এবং একটি গ্লাসমরফিজম প্রাইসিং টেবিল অন্তর্ভুক্ত করুন। ৫. জেনারেট করুন: জেনারেশন প্রক্রিয়া শুরু করতে অ্যারো আইকনে (মডেল সিলেক্টরের পাশে) ক্লিক করুন। ৬. পরিমার্জন ও নামকরণ করুন: UI জেনারেট হয়ে গেলে, টপ হেডারে আপনার প্রজেক্টের একটি নাম দিন। এর নাম দিন LaunchPad । IDE-তে যাওয়ার আগে যেকোনো নির্দিষ্ট এলিমেন্ট পরিমার্জন করতে আপনি চ্যাট সাইডবার ব্যবহার করতে পারেন।
[টিপস] আপনি এখান থেকেও বেছে নিতে পারেন
এই নির্দেশাবলী চেষ্টা করুন
দ্রুত শুরু করতে চাইলে এই অংশটি দেখতে পারেন।
৩. অ্যান্টিগ্র্যাভিটি এমসিপি কনফিগার করুন
অ্যান্টিগ্র্যাভিটি এজেন্টকে আপনার ডিজাইন 'পড়ার' অনুমতি দিতে, আপনাকে অবশ্যই একটি সুরক্ষিত API কী তৈরি করতে হবে এবং স্টিচ MCP সার্ভারটি যুক্ত করতে হবে।
স্টিচ এপিআই কী তৈরি করুন
- গুগল স্টিচে, উপরের ডান কোণায় থাকা আপনার প্রোফাইল ছবিতে ক্লিক করুন।
- ড্রপডাউন মেনু থেকে স্টিচ সেটিংস নির্বাচন করুন।
- এপিআই কী (API key) বিভাগে যান।
- Create key বাটনটিতে ক্লিক করুন।
- কী-টি কপি করুন: তৈরি হওয়া কী-টি অবিলম্বে কপি করে নিরাপদে সংরক্ষণ করুন। পরবর্তী ধাপের জন্য আপনার এটি প্রয়োজন হবে।
অ্যান্টিগ্র্যাভিটিতে স্টিচ এমসিপি কনফিগার করুন
- Antigravity IDE খুলুন।
- এজেন্ট ম্যানেজার খুলুন
যেকোনো সময়ে, আপনি CMD+E (Mac) বা CTRL+E (Windows) চাপ দিয়ে, অথবা মেনু বারের উপরের ডানদিকে থাকা Open Editor ও Open Agent Manager বাটনগুলোর মাধ্যমে Agent Manager এবং এডিটরের মধ্যে পরিবর্তন করতে পারেন।
- ওয়ার্কস্পেস খুলতে ক্লিক করুন।
একটি ওয়ার্কস্পেসের মধ্যে নতুন কথোপকথন শুরু করতে, 'স্টার্ট কনভারসেশন' ট্যাব থেকে কাঙ্ক্ষিত ওয়ার্কস্পেসটি নির্বাচন করুন অথবা সাইডবারে ওয়ার্কস্পেস নামের পাশে থাকা প্লাস (+) বোতামটি চাপুন।
- ‘Open New Workspace’-এ ক্লিক করুন এবং ওয়ার্কস্পেসটির নাম দিন
LaunchPad-Projectও একটি লোকাল ডিরেক্টরি নির্বাচন করুন। এটি নিশ্চিত করে যে, অন্যান্য প্রজেক্টে ব্যাঘাত না ঘটিয়ে ফাইল স্ক্যাফোল্ড করার জন্য এজেন্টের একটি নির্দিষ্ট রুট ফোল্ডার থাকবে।
স্টিচ এমসিপি কনফিগার করুন
- আপনার নতুন ওয়ার্কস্পেসের মধ্যে, এজেন্ট ম্যানেজারে (Mac-এর জন্য CMD+E অথবা Windows-এর জন্য CTRL+E) ফিরে যান এবং MCP সার্ভারসমূহ নির্বাচন করুন।
এডিটরের এজেন্ট পেনের শীর্ষে থাকা "..." ড্রপডাউনের মাধ্যমে এমসিপি স্টোরটি খুলুন।
অ্যান্টিগ্র্যাভিটি মডেল কনটেক্সট প্রোটোকল (MCP) সমর্থন করে, যা একটি স্ট্যান্ডার্ড এবং এর মাধ্যমে এডিটর আপনার লোকাল টুল, ডেটাবেস এবং এক্সটার্নাল সার্ভিসের সাথে নিরাপদে সংযোগ স্থাপন করতে পারে। এই ইন্টিগ্রেশনটি এআই-কে আপনার এডিটরে খোলা ফাইলগুলোর বাইরেও রিয়েল-টাইম কনটেক্সট প্রদান করে।
MCP, Antigravity এবং Google Stitch-এর মধ্যে একটি সেতুবন্ধন হিসেবে কাজ করে। ম্যানুয়ালি ডিজাইন টোকেন এক্সপোর্ট করা অথবা হেক্স কোড ও লেআউট মেটাডেটা এডিটরে কপি করার পরিবর্তে, MCP প্রয়োজন অনুযায়ী Antigravity-কে সরাসরি আপনার Stitch প্রজেক্ট থেকে ডিজাইন ডিএনএ (Design DNA) সংগ্রহ করার সুযোগ দেয়।
- 'Stitch' লিখে সার্চ করুন এবং Install-এ ক্লিক করুন।
- নির্দেশিত হলে, আপনার স্টিচ এপিআই কী (Stitch API Key) কনফিগারেশন ফিল্ডে পেস্ট করুন।
- যাচাই করুন: এজেন্ট চ্যাটে টাইপ করুন:
List my Stitch projects.যদি এটিLaunchPadরিটার্ন করে, তাহলে আপনি প্রস্তুত।
- যাচাই করুন: এজেন্ট চ্যাটে টাইপ করুন:
List my Stitch projects.যদি এজেন্টLaunchPadরিটার্ন করে, তাহলে ব্রিজটি সফলভাবে কনফিগার করা হয়েছে।
৪. ডিজাইন কনটেক্সট সংগ্রহ করুন
কোডের নির্ভুলতা নিশ্চিত করার জন্য এজেন্টকে এখন ডিজাইন মেটাডেটা গ্রহণ করতে হবে।
- অ্যান্টিগ্র্যাভিটি চ্যাটে টাইপ করুন: "স্টিচ এমসিপি ব্যবহার করে 'লঞ্চপ্যাড' প্রজেক্টটি ফেচ করুন। কালার প্যালেট এবং টাইপোগ্রাফি এক্সট্র্যাক্ট করুন, তারপর আমার রুট ডিরেক্টরিতে একটি
DESIGN.mdফাইল জেনারেট করুন।" - পর্যালোচনা: এজেন্ট কর্তৃক নিষ্কাশিত হেক্স কোড এবং লেআউট নিয়মগুলো দেখতে নতুন তৈরি করা
DESIGN.mdফাইলটি খুলুন।
৫. বাস্তবায়ন (নির্মাণ)
ডিজাইনটিকে একটি কার্যকরী রিয়্যাক্ট অ্যাপ্লিকেশনে রূপান্তর করতে এজেন্টটি ব্যবহার করুন।
- "Build" নির্দেশটি দিন:
আমি এখন এই সম্পূর্ণ ওয়েবসাইটটি তৈরি করতে চাই। React এবং Tailwind CSS ব্যবহার করুন। কম্পোনেন্টগুলো যেন মডিউলার হয় তা নিশ্চিত করুন। কাজ শেষ হলে, ডেভ সার্ভারটি চালু করুন এবং ইন্টিগ্রেটেড ব্রাউজারে আমাকে এটি দেখান। ২. এজেন্ট পর্যবেক্ষণ করুন: এটি টার্মিনালে প্রজেক্টটি স্কাফোল্ড করবে, এডিটরে কম্পোনেন্টগুলো লিখবে এবং ইন্টিগ্রেটেড ব্রাউজারে প্রিভিউ খুলবে।
৬. পর্যালোচনা ও পরিমার্জন করুন
আউটপুট যাচাই করুন এবং যেকোনো দৃশ্যগত অসঙ্গতি সংশোধন করতে এজেন্টটি ব্যবহার করুন।
- ইন্টিগ্রেটেড ব্রাউজারের আউটপুটটি আপনার মূল স্টিচ ডিজাইনের সাথে তুলনা করুন।
- যদি কোনো উপাদান (যেমন বাটনের প্যাডিং বা ফন্টের পুরুত্ব) না মেলে, তাহলে এজেন্টকে জানান: "'Get Started' বাটনের প্যাডিং সামান্য ভুল আছে। Stitch ডিজাইনটি পুনরায় দেখুন এবং Tailwind ক্লাসগুলো আপডেট করুন।"
- এজেন্টটি ডিজাইন কনটেক্সট পুনরায় সংগ্রহ করবে এবং তাৎক্ষণিকভাবে সমাধানটি প্রয়োগ করবে।
৭. সারসংক্ষেপ ও পরবর্তী পদক্ষেপ
অভিনন্দন! আপনি Antigravity এবং Stitch MCP ব্যবহার করে একটি হাই-ফিডেলিটি ডিজাইন ও একটি কার্যকরী কোডবেসের মধ্যকার ব্যবধান সফলভাবে পূরণ করেছেন।
আপনি যা করেছেন তার সারসংক্ষেপ:
- জেমিনি ৩ ব্যবহার করে স্টিচ -এ একটি UI ডিজাইন করেছি।
- একটি সুরক্ষিত এপিআই কী তৈরি করা হয়েছে এবং অ্যান্টিগ্র্যাভিটি এমসিপি কনফিগার করা হয়েছে।
- একটি স্বয়ংক্রিয় এজেন্ট ব্যবহার করে React + Tailwind সাইট তৈরি ও যাচাই করা হয়েছে।