AI Chat — سیستم چت مبتنی بر هوش مصنوعی

درباره پروژه

AI Chat یک پروژه آموزشی و شخصی بود که با Fork کردن یک پروژه موجود و توسعه آن شکل گرفت.

هدف اصلی پروژه، آشنایی عملی با نحوه ساخت و معماری یک سیستم AI Chat و تجربه مفاهیمی بود که در اپلیکیشن‌های مدرن مبتنی بر مدل‌های زبانی مورد استفاده قرار می‌گیرند.

در این پروژه تمرکز اصلی روی نحوه ارتباط Frontend و Backend با مدل‌های هوش مصنوعی، مدیریت مکالمات، نمایش پاسخ‌ها به‌صورت Streaming و همچنین آشنایی با معماری AI Agentها و پروتکل MCP بود.

Streaming پاسخ‌های هوش مصنوعی

یکی از مهم‌ترین مفاهیمی که در این پروژه با آن کار کردم، Streaming پاسخ‌های AI بود.

در یک سیستم چت معمولی، کاربر معمولاً تا زمان کامل شدن پاسخ منتظر می‌ماند؛ اما در سیستم‌های AI Chat، پاسخ می‌تواند هم‌زمان با تولید شدن از سمت مدل به Client ارسال شود.

در این پروژه این فرآیند را به‌صورت عملی پیاده‌سازی و بررسی کردم تا متن پاسخ به‌صورت زنده در رابط کاربری نمایش داده شود.

همچنین هنگام پردازش درخواست توسط AI، وضعیت‌های مختلفی به کاربر نمایش داده می‌شد تا مشخص باشد سیستم در حال انجام چه فرآیندی است و کاربر در زمان انتظار با یک رابط کاربری بدون بازخورد مواجه نشود.

این تجربه باعث شد با مفاهیمی مانند Streaming Response، مدیریت وضعیت درخواست و هماهنگ کردن جریان داده بین Backend و رابط کاربری آشنا شوم.

مدیریت Chat و Conversation

بخش دیگری از پروژه مربوط به مدیریت مکالمات بود.

در این بخش ساختار لازم برای ایجاد و مدیریت Chatها و Conversationها در نظر گرفته شد تا هر مکالمه بتواند وضعیت و پیام‌های مربوط به خود را داشته باشد.

همچنین نحوه نمایش پیام‌های کاربر و AI، مدیریت وضعیت ارسال پیام، دریافت پاسخ Streaming و به‌روزرسانی زنده رابط کاربری مورد بررسی و پیاده‌سازی قرار گرفت.

هدف این بخش، درک بهتر معماری یک سیستم Chat بود؛ سیستمی که در آن پیام‌ها، وضعیت درخواست، پاسخ Streaming و تاریخچه مکالمه باید هم‌زمان مدیریت شوند.

آشنایی با AI SDK و مدل‌های مختلف

برای ارتباط با مدل‌های مختلف هوش مصنوعی از Vercel AI SDK استفاده شد.

در پروژه امکان کار با Providerهای مختلف از جمله:

• OpenAI
• Anthropic
• Google AI

فراهم شده بود.

این تجربه کمک کرد با یک لایه استاندارد برای ارتباط با مدل‌های مختلف، ارسال Prompt، دریافت پاسخ و مدیریت Streaming آشنا شوم و درک بهتری از معماری Provider-based در سیستم‌های AI پیدا کنم.

پروتکل MCP

یکی از مهم‌ترین بخش‌های آموزشی پروژه، آشنایی با Model Context Protocol (MCP) بود.

MCP روشی استاندارد برای فراهم کردن امکان دسترسی مدل‌ها و AI Agentها به ابزارها و منابع خارجی است.

در این پروژه با این مفهوم آشنا شدم که چگونه می‌توان یک وب‌سایت یا یک سرویس را به شکلی در اختیار AI Agent قرار داد که Agent بتواند از قابلیت‌ها و داده‌های آن استفاده کند.

این موضوع دید بهتری نسبت به معماری Agentها و نحوه ارتباط میان AI Model، Agent، Tools و External Services ایجاد کرد.

رابط کاربری AI Chat

رابط کاربری پروژه با استفاده از Nuxt UI و اکوسیستم Nuxt ساخته شده بود و تمرکز ویژه‌ای روی تجربه کاربری یک محیط Chat مدرن وجود داشت.

یکی از بخش‌های مهم UI، نمایش زنده متن هنگام Streaming پاسخ AI بود.

همچنین برای نمایش صحیح محتوای تولیدشده توسط مدل، Syntax Highlighting، Markdown و فرمت‌های مختلف متن مورد توجه قرار گرفت.

استفاده از ابزارهایی مانند Shiki و Comark نیز امکان نمایش بهتر محتوای متنی و کدهای تولیدشده توسط AI را فراهم کرد.

در کنار این موارد، انیمیشن‌ها و تعاملات رابط کاربری نیز با ابزارهایی مانند Motion V پیاده‌سازی شدند تا تجربه استفاده از Chat روان‌تر و طبیعی‌تر باشد.

معماری داده و Backend

در بخش Backend از قابلیت‌های Server-side در Nuxt و Nitro برای مدیریت درخواست‌های مرتبط با AI استفاده شد.

برای مدیریت داده‌ها و ساختار دیتابیس نیز از Drizzle ORM و LibSQL استفاده شد.

همچنین اعتبارسنجی داده‌ها و ورودی‌ها با استفاده از Zod انجام شد و برای بخش‌هایی مانند Authentication و محافظت در برابر درخواست‌های نامعتبر نیز ابزارهایی مانند nuxt-auth-utils و nuxt-csurf مورد استفاده قرار گرفتند.

نتیجه

این پروژه یک تجربه آموزشی و شخصی برای آشنایی عمیق‌تر با معماری سیستم‌های AI Chat و AI Agent بود.

مهم‌ترین دستاوردهای این پروژه برای من، آشنایی عملی با AI Streaming، مدیریت Conversation، ارتباط با Providerهای مختلف AI، طراحی رابط کاربری Chat، نمایش زنده پاسخ مدل، معماری Backend برای سیستم‌های AI و پروتکل MCP بود.

به‌خصوص آشنایی با MCP باعث شد دید بهتری نسبت به نسل جدید اپلیکیشن‌هایی پیدا کنم که در آن‌ها AI Agentها تنها تولیدکننده متن نیستند و می‌توانند از طریق ابزارها و سرویس‌های خارجی با محیط اطراف خود تعامل داشته باشند.