قالب چتبات هوش مصنوعی با Expo و یه کدبیس
ریاکت
فرانتاند
هوش مصنوعیخلاصهٔ کاملتر
این مقاله معرفی یه قالب (template) متنباز برای ساختن چتبات هوش مصنوعیه که با Expo و Expo Router ساخته شده. نقطهقوت اصلیش اینه که از یه کدبیس واحد روی iOS، اندروید و وب اجرا میشه؛ یعنی بهجای نگهداری سه پروژهی جدا، همهچیز یه جاست. هدفش هم پرفورمنس بالا و یه تجربهی بومی روی هر پلتفرمه.
از نظر ویژگیها، چند چیز برجستهست. روی iOS 26 از افکت Liquid Glass (شیشهای) برای کامپوزر ورودی، نوار ناوبری و دکمههای تولبار از طریق expo-glass-effect پشتیبانی میکنه. برای وب یه سایدبار جمعشونده با منوهای کانتکست و tooltip رادیکس داره تا تجربهی دسکتاپمانند بده. پیامهای استریمشده با بهروزرسانی throttleشده در حدود ۳۰ فریم بر ثانیه، رندر مارکداون (بلوک کد، جدول، فرمت inline) و حالتهای لودینگ shimmer ارائه میشه. چیدمانها هم پلتفرممحوران: روی موبایل یه draweri مبتنی بر ژست و روی وب سایدبار بهعلاوهی پنل محتوا.
از نظر فنی، روی Expo SDK 55، React Native 0.83 و React 19 سواره. ناوبری با Expo Router فایلمحور و مسیرهای تایپدار انجام میشه، چت مجازیسازیشده (virtualized) با Legend List پیاده شده، و استایل با Tailwind CSS v4 از طریق Uniwind و توکنهای طراحی OKLCH برای یکنواختی ادراکی بین حالت روشن و تاریکه. UI بومی هم از کامپوننتهای SwiftUI و haptics روی iOS استفاده میکنه.
راهاندازیش سادهست. فایل .env.example رو به .env کپی میکنی و مقادیر رو پر میکنی، بعد با Bun وابستگیها رو نصب و سرور توسعه رو اجرا میکنی:
cp .env.example .env
bun install
bun startدو تا متغیر محیطی مهم داره. ANTHROPIC_API_KEY که توسط روت سمتسرور چت (app/api/chat+api.ts) از طریق @ai-sdk/anthropic استفاده میشه؛ یعنی بهصورت پیشفرض به مدلهای Claude شرکت Anthropic وصله. و EXPO_PUBLIC_MOCK_AI که اگه روی 1 بذاریش، بهجای صدا زدن API واقعی از پاسخهای استریم ساختگی استفاده میکنه — برای توسعهی UI بدون نیاز به کلید عالیه.
برای شخصیسازی هم انعطاف داره: تم رو با ویرایش توکنهای OKLCH توی global.css عوض میکنی، بکاند چت رو با جایگزین کردن پاسخهای ساختگی با API واقعی وصل میکنی (معماری استریم از قبل آمادهست)، و برای دیتابیس هم استفاده از Convex بهعلاوهی better-auth برای احراز هویت پیشنهاد شده. کل این قالب برای agent.expo.dev ساخته شده و تحت لایسنس MIT آزادانه در دسترسه.
نکات کلیدی:
- یه قالب متنباز چتبات AI با Expo که روی iOS، اندروید و وب از یه کدبیس اجرا میشه
- از Liquid Glass آیاواس ۲۶، سایدبار وب و پیامهای استریم با رندر مارکداون پشتیبانی میکنه
- روی Expo SDK 55، React Native 0.83، React 19 و Tailwind v4 ساخته شده
- بهصورت پیشفرض از طریق @ai-sdk/anthropic به Claude وصله، با حالت mock برای توسعه
- تحت لایسنس MIT آزاده و برای دیتابیس، Convex بهعلاوهی better-auth پیشنهاد شده
