[{"data":1,"prerenderedAt":325},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fai":26,"challenges-\u002Fprojects\u002Fai":112},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"body":29,"company":30,"date":31,"description":32,"endDate":33,"extension":34,"image":35,"images":36,"links":50,"meta":55,"navigation":56,"order":57,"path":58,"seo":59,"startDate":31,"stem":60,"tags":61,"technologies":69,"url":110,"__hash__":111},"projects\u002Fprojects\u002Fai.yml","AI Chat — سیستم چت مبتنی بر هوش مصنوعی",null,"","2026-04-21","فورک و توسعه یک پروژه چت مبتنی بر هوش مصنوعی با هدف آشنایی عملی با معماری AI Chat، استریم پاسخ‌ها، مدیریت مکالمات، تعامل زنده با رابط کاربری و پروتکل MCP برای فراهم کردن امکان تعامل AI Agentها با وب‌سایت.","2026-06-21","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002FAI\u002Fchat-template.nuxt.dev_chat_c5c60e3c-577c-40da-bc9d-750af70c8a7a.png",[37,39,41,44,47],{"src":35,"alt":38},"رابط کاربری سیستم AI Chat",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002FAI\u002Fchat-template.nuxt.dev_chat_c5c60e3c-577c-40da-bc9d-750af70c8a7a%20%281%29.png",{"src":42,"alt":43},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002FAI\u002Fchat-template.nuxt.dev_chat_c5c60e3c-577c-40da-bc9d-750af70c8a7a%20%282%29.png","نمایش استریم زنده پاسخ هوش مصنوعی",{"src":45,"alt":46},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002FAI\u002Fchat-template.nuxt.dev_chat_c5c60e3c-577c-40da-bc9d-750af70c8a7a%20%283%29.png","رابط مدیریت و نمایش مکالمات",{"src":48,"alt":49},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002FAI\u002Fchat-template.nuxt.dev_chat_c5c60e3c-577c-40da-bc9d-750af70c8a7a%20%284%29.png","تعامل AI Agent با وب‌سایت",[51],{"label":52,"to":30,"target":53,"icon":54},"مشاهده پروژه","_blank","i-lucide-external-link",{},true,"4","\u002Fprojects\u002Fai",{"title":28,"description":32},"projects\u002Fai",[62,63,64,65,66,67,68],"AI Chat","AI Agent","MCP","Streaming","Nuxt","TypeScript","Generative AI",[70,78,86,92,98,104],{"category":71,"items":72},"frontend",[73,74,67,75,76,77],"Nuxt.js 4","Vue.js","Nuxt UI","Tailwind CSS v4","VueUse",{"category":79,"items":80},"ai",[81,82,83,84,85,63],"Vercel AI SDK","OpenAI","Anthropic","Google AI","AI Streaming",{"category":87,"items":88},"backend",[89,90,91,64],"Nuxt Server","Nitro","AI SDK",{"category":93,"items":94},"database",[95,96,97],"Drizzle ORM","LibSQL","NuxtHub",{"category":99,"items":100},"security",[101,102,103],"Zod","Nuxt Auth Utils","Nuxt CSRF",{"category":105,"items":106},"ui & content",[75,107,108,109],"Shiki","Comark","Motion V","\u002F","D-oQYo_zgCzxKx3BIlyM5YzckEUipu2Wl-eCQ5LnoCM",{"id":113,"title":114,"body":115,"description":30,"extension":319,"meta":320,"navigation":56,"path":321,"seo":322,"stem":323,"__hash__":324},"projectChallenges\u002Fprojects\u002Fai-challenges.md","Ai Challenges",{"type":116,"value":117,"toc":308},"minimark",[118,123,130,137,140,144,150,153,156,159,162,166,169,172,175,178,182,188,191,201,204,207,211,218,221,224,231,235,241,244,247,256,262,266,269,276,290,293,299,305],[119,120,122],"h2",{"id":121},"درباره-پروژه","درباره پروژه",[124,125,126,129],"p",{},[127,128,62],"strong",{}," یک پروژه آموزشی و شخصی بود که با Fork کردن یک پروژه موجود و توسعه آن شکل گرفت.",[124,131,132,133,136],{},"هدف اصلی پروژه، آشنایی عملی با نحوه ساخت و معماری یک ",[127,134,135],{},"سیستم AI Chat"," و تجربه مفاهیمی بود که در اپلیکیشن‌های مدرن مبتنی بر مدل‌های زبانی مورد استفاده قرار می‌گیرند.",[124,138,139],{},"در این پروژه تمرکز اصلی روی نحوه ارتباط Frontend و Backend با مدل‌های هوش مصنوعی، مدیریت مکالمات، نمایش پاسخ‌ها به‌صورت Streaming و همچنین آشنایی با معماری AI Agentها و پروتکل MCP بود.",[119,141,143],{"id":142},"streaming-پاسخهای-هوش-مصنوعی","Streaming پاسخ‌های هوش مصنوعی",[124,145,146,147,149],{},"یکی از مهم‌ترین مفاهیمی که در  این پروژه با آن کار کردم، ",[127,148,65],{}," پاسخ‌های AI بود.",[124,151,152],{},"در یک سیستم چت معمولی، کاربر معمولاً تا زمان کامل شدن پاسخ منتظر می‌ماند؛ اما در سیستم‌های AI Chat، پاسخ می‌تواند هم‌زمان با تولید شدن از سمت مدل به Client ارسال شود.",[124,154,155],{},"در این پروژه این فرآیند را به‌صورت عملی پیاده‌سازی و بررسی کردم تا متن پاسخ به‌صورت زنده در رابط کاربری نمایش داده شود.",[124,157,158],{},"همچنین هنگام پردازش درخواست توسط AI، وضعیت‌های مختلفی به کاربر نمایش داده می‌شد تا مشخص باشد سیستم در حال انجام چه فرآیندی است و کاربر در زمان انتظار با یک رابط کاربری بدون بازخورد مواجه نشود.",[124,160,161],{},"این تجربه باعث شد با مفاهیمی مانند Streaming Response، مدیریت وضعیت درخواست و هماهنگ کردن جریان داده بین Backend و رابط کاربری آشنا شوم.",[119,163,165],{"id":164},"مدیریت-chat-و-conversation","مدیریت Chat و Conversation",[124,167,168],{},"بخش دیگری از پروژه مربوط به مدیریت مکالمات بود.",[124,170,171],{},"در این بخش ساختار لازم برای ایجاد و مدیریت Chatها و Conversationها در نظر گرفته شد تا هر مکالمه بتواند وضعیت و پیام‌های مربوط به خود را داشته باشد.",[124,173,174],{},"همچنین نحوه نمایش پیام‌های کاربر و AI، مدیریت وضعیت ارسال پیام، دریافت پاسخ Streaming و به‌روزرسانی زنده رابط کاربری مورد بررسی و پیاده‌سازی قرار گرفت.",[124,176,177],{},"هدف این بخش، درک بهتر معماری یک سیستم Chat بود؛ سیستمی که در آن پیام‌ها، وضعیت درخواست، پاسخ Streaming و تاریخچه مکالمه باید هم‌زمان مدیریت شوند.",[119,179,181],{"id":180},"آشنایی-با-ai-sdk-و-مدلهای-مختلف","آشنایی با AI SDK و مدل‌های مختلف",[124,183,184,185,187],{},"برای ارتباط با مدل‌های مختلف هوش مصنوعی از ",[127,186,81],{}," استفاده شد.",[124,189,190],{},"در پروژه امکان کار با Providerهای مختلف از جمله:",[192,193,194,197,199],"ul",{},[195,196,82],"li",{},[195,198,83],{},[195,200,84],{},[124,202,203],{},"فراهم شده بود.",[124,205,206],{},"این تجربه کمک کرد با یک لایه استاندارد برای ارتباط با مدل‌های مختلف، ارسال Prompt، دریافت پاسخ و مدیریت Streaming آشنا شوم و درک بهتری از معماری Provider-based در سیستم‌های AI پیدا کنم.",[119,208,210],{"id":209},"پروتکل-mcp","پروتکل MCP",[124,212,213,214,217],{},"یکی از مهم‌ترین بخش‌های آموزشی پروژه، آشنایی با ",[127,215,216],{},"Model Context Protocol (MCP)"," بود.",[124,219,220],{},"MCP روشی استاندارد برای فراهم کردن امکان دسترسی مدل‌ها و AI Agentها به ابزارها و منابع خارجی است.",[124,222,223],{},"در این پروژه با این مفهوم آشنا شدم که چگونه می‌توان یک وب‌سایت یا یک سرویس را به شکلی در اختیار AI Agent قرار داد که Agent بتواند از قابلیت‌ها و داده‌های آن استفاده کند.",[124,225,226,227,230],{},"این موضوع دید بهتری نسبت به معماری Agentها و نحوه ارتباط میان ",[127,228,229],{},"AI Model، Agent، Tools و External Services"," ایجاد کرد.",[119,232,234],{"id":233},"رابط-کاربری-ai-chat","رابط کاربری AI Chat",[124,236,237,238,240],{},"رابط کاربری پروژه با استفاده از ",[127,239,75],{}," و اکوسیستم Nuxt ساخته شده بود و تمرکز ویژه‌ای روی تجربه کاربری یک محیط Chat مدرن وجود داشت.",[124,242,243],{},"یکی از بخش‌های مهم UI، نمایش زنده متن هنگام Streaming پاسخ AI بود.",[124,245,246],{},"همچنین برای نمایش صحیح محتوای تولیدشده توسط مدل، Syntax Highlighting، Markdown و فرمت‌های مختلف متن مورد توجه قرار گرفت.",[124,248,249,250,252,253,255],{},"استفاده از ابزارهایی مانند ",[127,251,107],{}," و ",[127,254,108],{}," نیز امکان نمایش بهتر محتوای متنی و کدهای تولیدشده توسط AI را فراهم کرد.",[124,257,258,259,261],{},"در کنار این موارد، انیمیشن‌ها و تعاملات رابط کاربری نیز با ابزارهایی مانند ",[127,260,109],{}," پیاده‌سازی شدند تا تجربه استفاده از Chat روان‌تر و طبیعی‌تر باشد.",[119,263,265],{"id":264},"معماری-داده-و-backend","معماری داده و Backend",[124,267,268],{},"در بخش Backend از قابلیت‌های Server-side در Nuxt و Nitro برای مدیریت درخواست‌های مرتبط با AI استفاده شد.",[124,270,271,272,252,274,187],{},"برای مدیریت داده‌ها و ساختار دیتابیس نیز از ",[127,273,95],{},[127,275,96],{},[124,277,278,279,281,282,252,286,289],{},"همچنین اعتبارسنجی داده‌ها و ورودی‌ها با استفاده از ",[127,280,101],{}," انجام شد و برای بخش‌هایی مانند Authentication و محافظت در برابر درخواست‌های نامعتبر نیز ابزارهایی مانند ",[283,284,285],"code",{},"nuxt-auth-utils",[283,287,288],{},"nuxt-csurf"," مورد استفاده قرار گرفتند.",[119,291,292],{"id":292},"نتیجه",[124,294,295,296,217],{},"این پروژه یک تجربه آموزشی و شخصی برای آشنایی عمیق‌تر با معماری سیستم‌های ",[127,297,298],{},"AI Chat و AI Agent",[124,300,301,302,217],{},"مهم‌ترین دستاوردهای این پروژه برای من، آشنایی عملی با ",[127,303,304],{},"AI Streaming، مدیریت Conversation، ارتباط با Providerهای مختلف AI، طراحی رابط کاربری Chat، نمایش زنده پاسخ مدل، معماری Backend برای سیستم‌های AI و پروتکل MCP",[124,306,307],{},"به‌خصوص آشنایی با MCP باعث شد دید بهتری نسبت به نسل جدید اپلیکیشن‌هایی پیدا کنم که در آن‌ها AI Agentها تنها تولیدکننده متن نیستند و می‌توانند از طریق ابزارها و سرویس‌های خارجی با محیط اطراف خود تعامل داشته باشند.",{"title":30,"searchDepth":309,"depth":309,"links":310},2,[311,312,313,314,315,316,317,318],{"id":121,"depth":309,"text":122},{"id":142,"depth":309,"text":143},{"id":164,"depth":309,"text":165},{"id":180,"depth":309,"text":181},{"id":209,"depth":309,"text":210},{"id":233,"depth":309,"text":234},{"id":264,"depth":309,"text":265},{"id":292,"depth":309,"text":292},"md",{},"\u002Fprojects\u002Fai-challenges",{"description":30},"projects\u002Fai-challenges","M-GgIVGIPoLAQJWJQ0GvMQ8NWm43j7Ijuir1w2NFRVk",1786900462453]