প্রযুক্তি ও ইঞ্জিনিয়ারিং নোটস

Client Component আর Server Component — Agent Architecture-এ কোনটা কোথায় বসবে

Next.js AI Agent আর্কিটেকচারে কোন অংশটুকু Server Component-এ থাকবে আর কোনটুকু Client Component-এ বসবে—তা ReactNode Slot Pattern ও প্যারালাল হাইড্রেশন দিয়ে সাজানোর প্র্যাকটিক্যাল গাইড।

Agent-এর পুরো Conversation History Supabase-এ Save করে রাখা

স্ট্রিমিংয়ের গতি না কমিয়েই এজেন্টের পুরো কথোপকথন, টুল কল (JSONB) এবং টোকেন টেলিমেট্রি Supabase PostgreSQL ডাটাবেসে সেভ ও রিস্টোর করার প্র্যাকটিক্যাল গাইড।

Server-Sent Events (SSE) দিয়ে আরও Reliable Streaming বানানো

প্রক্সি বাফারিং, মাঝপথে কানেকশন কেটে যাওয়া এবং ভাঙা JSON চাঙ্কের সমস্যা দূর করতে Next.js-এ Server-Sent Events (SSE) ও Heartbeat পালস দিয়ে তৈরি করুন আরও নির্ভরযোগ্য স্ট্রিমিং।

এতক্ষণ যা বানানো হলো সেটা Production-এর জন্য কতটা প্রস্তুত — Middleware দিয়ে Rate Limiting বসানো

আমাদের তৈরি করা AI Agent-কে প্রোডাকশনের জন্য নিরাপদ করতে Next.js Edge Middleware, স্লাইডিং-উইন্ডো রেট লিমিটিং এবং React-এ 429 Cooldown Timer যুক্ত করার প্র্যাকটিক্যাল গাইড।

TypeScript দিয়ে পুরো Agent সিস্টেম Type-safe রাখার Practical গাইড

Zod স্কিমা, Discriminated Union এবং TypeScript Type Guard ব্যবহার করে আপনার Next.js AI Agent সিস্টেমের ব্যাকএন্ড থেকে React UI পর্যন্ত শতভাগ Type-safe রাখার প্র্যাকটিক্যাল গাইড।

Agent যখন 'ভাবছে' তখন UI-তে Thinking/Loading State দেখানোর সঠিক উপায়

এজেন্ট যখন ব্যাকএন্ডে একাধিক ধাপে চিন্তা ও টুল কল করছে, তখন সাধারণ স্পিনারের বদলে React UI-তে একটি প্রোডাকশন-গ্রেড Collapsible Thinking Timeline দেখানোর সম্পূর্ণ গাইড।

নিজের একটা Custom Tool লিখে Agent-এর সাথে যুক্ত করা

Zod allowlist, AbortSignal টাইমআউট এবং DTO পেলোড ফিল্টারিং ব্যবহার করে নিজের একটি প্রোডাকশন-রেডি Custom Tool তৈরি করুন এবং সেটিকে আপনার Next.js AI Agent-এর সাথে যুক্ত করুন।

LangChain.js দিয়ে একাধিক ধাপে চিন্তা করতে পারা (Multi-step) Agent বানানো

LangChain.js, agent_scratchpad এবং createToolCallingAgent ব্যবহার করে Next.js প্রজেক্টে তৈরি করুন একাধিক ধাপে চিন্তা ও সিদ্ধান্ত নিতে পারা Multi-step AI Agent।

এখন পর্যন্ত যা বানানো হয়েছে তাতে Tool Calling যোগ করা — Agent-কে 'কাজ করার' ক্ষমতা দেওয়া

আমাদের স্ট্রিমিং Next.js চ্যাটবটে Zod ভ্যালিডেটেড টুলস, maxSteps এবং React-এ toolInvocations যুক্ত করে এজেন্টকে বাস্তবে কাজ করার ক্ষমতা দিন।

React-এ useChat Hook দিয়ে সেই Streaming Response আসলে UI-তে দেখানো

Vercel AI SDK-এর useChat হুক, স্মার্ট অটো-স্ক্রলিং, স্টপ বাটন এবং রিয়েল-টাইম টোকেন অ্যানোটেশন ব্যবহার করে React-এ একটি পূর্ণাঙ্গ স্ট্রিমিং চ্যাট ইন্টারফেস তৈরি করুন।

Vercel AI SDK দিয়ে Response Streaming বানানো — যাতে ইউজারকে Wait করতে না হয়

ইউজারের ৫-৮ সেকেন্ডের অপেক্ষার অবসান ঘটাতে Vercel AI SDK-এর streamText এবং createStreamableValue দিয়ে Next.js প্রজেক্টে রিয়েল-টাইম রেসপন্স স্ট্রিমিং যুক্ত করুন।

OpenAI বা Claude API Next.js প্রজেক্টে যুক্ত করে প্রথম Chatbot Agent চালু করা

Next.js প্রজেক্টে OpenAI এবং Claude API যুক্ত করে একটি নিরাপদ Unified Adapter, মেসেজ হিস্ট্রি স্যানিটাইজার এবং টোকেন ট্র্যাকিংসহ আপনার প্রথম Chatbot Agent চালু করুন।

আগের পোস্টের রোডম্যাপ ধরে — Next.js 14 Server Action দিয়ে প্রথম AI Agent ব্যাকএন্ড বানানো

আগের পোস্টের রোডম্যাপ অনুসরণ করে Next.js 14 Server Action, Zod ভ্যালিডেশন এবং টাইপ-সেফ টুল লুপ দিয়ে তৈরি করুন আপনার প্রথম AI Agent ব্যাকএন্ড।

একটা এজেন্ট কখন Autonomous হয় — Autonomy-র লেভেল বোঝা, Level 0 থেকে Full Autonomous পর্যন্ত

Autonomy মডেলের স্বভাব না, আপনার কোডের জোর করে মানানো একটা নিয়ম। Level 0 থেকে 4-এর স্কেল, ভুলের খরচ দিয়ে tool ভাগ করা, আর একটা ছোট TypeScript ফাইলে অনুমোদনের গেট, এই পোস্টে সেটাই।

MCP (Model Context Protocol) কী, এবং এটা কেন হঠাৎ এত গুরুত্বপূর্ণ হয়ে উঠলো

এই সিরিজের প্রথম পোস্টে MCP-কে এক লাইনে উল্লেখ করেই রেখে দেওয়া হয়েছিল। এটা আসলে কোন সমস্যা সমাধান করে, কীভাবে ইন্ডাস্ট্রি স্ট্যান্ডার্ড হয়ে উঠল, আর আসল protocol-এর বিপরীতে বানিয়ে পরীক্ষা করা একটা সত্যিকারের MCP server — এই পোস্টে সেটাই ঠিকভাবে খোলা হলো।

AI Agent বনাম চেনা Automation টুল (Zapier/Make) — আসল পার্থক্য কোথায়

Zapier আর Make-এরও এখন নিজস্ব AI Agent ফিচার আছে, তাই “এতে AI আছে কিনা” আর আসল প্রশ্ন না। এখনও যে তফাতটা সত্যি — স্থির পথ বনাম সিদ্ধান্ত নেওয়া পথ — সেটাই খুঁজে বের করে, পাশাপাশি রাখা পরীক্ষিত কোড দিয়ে প্রমাণ করা হলো এই পোস্টে।

একটা ভালো Prompt লেখার নিয়ম — Agent-এর জন্য কার্যকর Prompt Engineering

ঠিক সামনে থাকা tool-টাই যদি এজেন্ট কখন ব্যবহার করবে না জানে, নিখুঁত memory সিস্টেমও তাকে বাঁচাতে পারে না। ভালো একটা system prompt-এ যে পাঁচটা জিনিস থাকা উচিত, tool description কেন নিজেই একটা prompt, আর এই সিরিজের আসল description-এর ওপর চালানো একটা ছোট্ট checker, এই পোস্টে সেটাই দেখানো হলো।

এআই এজেন্ট বানাতে কোন কোন ভাষা, লাইব্রেরি ও টুলস আসলে দরকার হয়

Python-ওয়ালারা বলে Python, JavaScript-ওয়ালারা বলে TypeScript। আসলে কী লাগে — একমাত্র বাধ্যতামূলক SDK, কোন টুল ঐচ্ছিক, আর একই ছোট্ট এজেন্ট দুই ভাষায় পাশাপাশি — এই পোস্টে সেটাই দেখানো হলো।

RAG (Retrieval Augmented Generation) কী এবং এজেন্টের জ্ঞান বাড়াতে এটা কীভাবে কাজে লাগে

এজেন্টের কাছে দরকারি সব tool থাকতে পারে, তবু সে ভুল উত্তর দিতে পারে, শুধু কারণ সে একটা জিনিস জানে না। RAG আর একটা কাজের TypeScript উদাহরণ দিয়ে এই পোস্টে দেখানো হলো মডেল কীভাবে আন্দাজের বদলে আসল ডকুমেন্ট থেকে উত্তর দেয়।

Agent কীভাবে "মনে রাখে" — Short-term আর Long-term Memory-এর পার্থক্য

এজেন্টের কথোপকথন ক্রমাগত বড় হয়, তবু গত সপ্তাহের কিছু ঠিকই ভুলে যায় — একই নামের দুটো আলাদা সমস্যা। short-term compaction আর long-term recall একটা কাজের ফাইলে, সাথে টেস্ট করতে গিয়ে পাওয়া একটা আসল recall-ব্যর্থতা, এই পোস্টে সেটাই দেখানো হলো।

Tool Calling / Function Calling — এজেন্ট কীভাবে বাইরের জগতের সাথে কাজ করে

সাধারণ চ্যাটবট আবহাওয়া আর বিনিময় হার বানিয়ে বলে দেয়। Tool calling দিয়ে মডেল কীভাবে একটা আসল ফাংশন চায়, সেটা চলে আর ফলাফল ব্যবহার করে — একসাথে দুটো tool চাইলে কী হয় তা-সহ, এই পোস্টে সেটাই খোলা হলো।

এআই এজেন্টের ভেতরে আসলে কী কী থাকে — Brain, Memory, Tools আর Action Loop

এআই এজেন্ট মানে Brain, Memory, Tools আর একটা loop। একটা ছোট্ট TypeScript এজেন্টের কোড দিয়ে চারটা অংশ আলাদা করে দেখালাম, যাতে বোঝা যায় ঠিক কোনটা গোলমাল করছে।

LLM আর AI Agent এক জিনিস না — আসল পার্থক্যটা কোথায়?

LLM টেক্সট predict করে থেমে যায়; agent সেই একই model-কে একটা loop-এর ভেতর বসিয়ে দেয়, যা তাকে action নিতে, result check করতে, আর আবার decide করতে দেয়। পার্থক্যটা model-এ না, loop-এ।

এআই এজেন্ট আসলে কী — আর হঠাৎ সবাই এটা নিয়ে এত কথা বলছে কেন?

চ্যাটবট একবার উত্তর দেয়, এজেন্ট কাজ শেষ না হওয়া পর্যন্ত এগোতে থাকে। সেই loop-টা কোডে কেমন দেখায় আর কেন হঠাৎ এজেন্ট নিয়ে এত আলোচনা, এই পোস্টে সেটাই।

লারাভেল ব্লেড বেসিকস (Laravel Blade Basics)

ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরির জন্য লারাভেল ব্লেডের মৌলিক বিষয়গুলো আয়ত্ত করুন। ডেটা পাস করা, লুপ এবং কন্ডিশনের ব্যবহার শিখুন এই বিস্তারিত গাইড থেকে।

Laravel Marketplace আর React API নিয়ে কাজ করতে গিয়ে যা যা শিখলাম

Laravel ও PostgreSQL দিয়ে একটা marketplace project বানাতে গিয়ে role, product approval, migration আর foreign key নিয়ে যা শিখেছি, সাথে React-এ fetch error handling ও stale state নিয়ে একটা debugging অভিজ্ঞতা।

Laravel Blade-এ Dynamic Data Render করা: Controller থেকে View পর্যন্ত

Laravel Blade practice-এর মাধ্যমে Controller থেকে View-তে data পাঠানো এবং @foreach ও @if ব্যবহার করে dynamic content render করা বুঝেছি।

Laravel Blade Template এবং Dynamic Data নিয়ে Practice