“http://github.com/tambo-ai/tambo/raw/main/assets/octo-white-background-rounded.png” العرض=”150″>
“-1” دير=”auto”> تامبو منظمة العفو الدولية
“-1” دير=”auto”> قم ببناء وكلاء يتحدثون واجهة المستخدم الخاصة بك
مجموعة أدوات واجهة المستخدم التوليدية مفتوحة المصدر لـ React. قم بتوصيل مكوناتك — يتعامل Tambo مع البث وإدارة الحالة وMCP.
“https://www.npmjs.com/package/@tambo-ai/react” rel=”nofollow”>”https://camo.githubusercontent.com/d8dd06f8553c2d14af6cfd1780bd1af2c2ad1e9fbcda66e7aeb548865d4e14bf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f25343074616d626f2d616925324672656163743f6c6f676f3d6e706d” البديل=”npm version” data-canonical-src=”https://img.shields.io/npm/v/%40tambo-ai%2Freact?logo=npm”> “https://camo.githubusercontent.com/f11a8e6972345294f48592cdd5d7fa8bf7ec408e4c687d032a9db130ad030d6f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f74616d626f2d61692f74616d626f” البديل=”License” data-canonical-src=”https://img.shields.io/github/license/tambo-ai/tambo”> “https://camo.githubusercontent.com/9fabcfcfe1d27836f4c6fb6a8e53afe32c6015a51aa48dea3615c9e04c4e59c8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f74616d626f2d61692f74616d626f” البديل=”Last Commit” data-canonical-src=”https://img.shields.io/github/last-commit/tambo-ai/tambo”> “https://camo.githubusercontent.com/39f198709b4d9688f297bf8f96f97710e3c48be94b4fee3467bfdaec08467397/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f313235313538313839353431343931313031363f636f6c6f723d373238396461266c6162656c3d646973636f7264″ البديل=”Discord” data-canonical-src=”https://img.shields.io/discord/1251581895414911016?color=7289da&label=discord”> “https://camo.githubusercontent.com/a5d738117c73466bf88f08ccf7ca42158ee3f89790206b536939ccedbce566a6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f74616d626f2d61692f74616d626f” البديل=”GitHub stars” data-canonical-src=”https://img.shields.io/github/stars/tambo-ai/tambo”>
“https://trendshift.io/repositories/15734″ rel=”nofollow”>”https://camo.githubusercontent.com/487965bff054ff3e7f3544170c5c919c1b1e121d54bf7fb8d4dbc8e5036a9ba0/68747470733a2f2f7472656e6473686966742e696f2f6170692f62616467652f7265706f7369746f726965732f3135373334″ البديل=”tambo-ai/tambo | Trendshift” العرض=”250″ الارتفاع=”55″ data-canonical-src=”https://trendshift.io/api/badge/repositories/15734″>
“https://tambo.link/yXkF0hQ” rel=”nofollow”> ابدأ مجانًا •”https://docs.tambo.co” rel=”nofollow”>المستندات •”https://discord.gg/dJNvPEHth6″ rel=”nofollow”> الخلاف
تامبو 1.0 هنا! إقرأ الإعلان:”https://tambo.co/blog/posts/introducing-tambo-generative-ui” rel=”nofollow”>تقديم تامبو: واجهة المستخدم التوليدية لـ React
“-1” دير=”auto”> جدول المحتويات
Tambo عبارة عن مجموعة أدوات React لبناء وكلاء يعرضون واجهة المستخدم (تُعرف أيضًا باسم واجهة المستخدم التوليدية).
قم بتسجيل مكوناتك باستخدام مخططات Zod. يختار الوكيل الوكيل المناسب ويبث الدعائم حتى يتمكن المستخدمون من التفاعل معها. “Show me sales by region” يجعل الخاص بك . “Add a task” التحديثات الخاصة بك .
2025-11-07-heatsheet-demo.mp4
Tambo هو حل متكامل لإضافة واجهة مستخدم توليدية إلى تطبيقك. تحصل على React SDK بالإضافة إلى واجهة خلفية تتعامل مع حالة المحادثة وتنفيذ الوكيل.
1. الوكيل متضمن – يقوم تامبو بتشغيل حلقة محادثة LLM نيابةً عنك. قم بإحضار مفتاح API الخاص بك (OpenAI، أو Anthropic، أو Gemini، أو Mistral، أو أي مزود متوافق مع OpenAI). تعمل مع أطر عمل الوكلاء مثل LangChain وMastra، ولكنها ليست مطلوبة.
2. البنية التحتية للبث — تتدفق الدعائم إلى مكوناتك أثناء قيام LLM بإنشائها. تتم معالجة الإلغاء واسترداد الأخطاء وإعادة الاتصال نيابةً عنك.
3. تامبو كلاود أو المضيف الذاتي — السحابة عبارة عن واجهة خلفية مستضافة تدير حالة المحادثة وتنسيق الوكيل. تعمل الاستضافة الذاتية على نفس الواجهة الخلفية على بنيتك التحتية عبر Docker.
يتم إنشاء معظم البرامج حول نموذج عقلي واحد يناسب الجميع. لقد بنينا تامبو لمساعدة المطورين على بناء برامج تتكيف مع المستخدمين.
npm create tambo-app my-tambo-appcd my-tambo-appnpx tambo init # choose cloud or self-hostednpm run dev
“https://tambo.link/yXkF0hQ” rel=”nofollow”>تامبو كلاود هي واجهة خلفية مستضافة، وهي مجانية للبدء مع الكثير من الاعتمادات لبدء البناء. استضافة ذاتية يعمل على البنية التحتية الخاصة بك.
تحقق من”https://ui.tambo.co” rel=”nofollow”> مكتبة المكونات المعدة مسبقًا بالنسبة إلى العناصر الأولية لواجهة المستخدم والوكيل:
07-11-2025-ui-component-library.mp4
أو تفرع القالب:
| نموذج | وصف |
|---|---|
| دردشة AI مع واجهة المستخدم التوليدية | واجهة الدردشة مع توليد المكونات الديناميكية |
| لوحة تحكم تحليلات الذكاء الاصطناعي | لوحة تحكم تحليلية مع تصور مدعوم بالذكاء الاصطناعي |
أخبر الذكاء الاصطناعي بالمكونات التي يمكنه استخدامها. تحدد مخططات Zod الدعائم. تصبح هذه المخططات تعريفات أداة LLM، حيث يستدعيها الوكيل مثل الوظائف ويعرض تامبو النتيجة.
“-1” دير=”auto”> المكونات التوليدية
يتم العرض مرة واحدة ردًا على رسالة. الرسوم البيانية والملخصات وتصورات البيانات.
2025-11-07-geneative-form.mp4
ثابت عناصر: تامبوكومبونينت[[] = [[ { اسم: "Graph", وصف: "Displays data as charts using Recharts library", عنصر: رسم بياني, propsSchema: ض.هدف({ بيانات: ض.صفيف(ض.هدف({ اسم: ض.خيط(), قيمة: ض.رقم() })), يكتب: ض.التعداد([["line", "bar", "pie"]), }), },];
“-1” دير=”auto”> مكونات قابلة للتفاعل
الاستمرار والتحديث بينما يقوم المستخدمون بتحسين الطلبات. عربات التسوق، وجداول البيانات، ولوحات المهام.
2025-11-07-db-thing.mp4
ثابت ملاحظة قابلة للتفاعل = withInteractable(ملحوظة, { اسم المكون: "Note", وصف: "A note supporting title, content, and color modifications", propsSchema: ض.هدف({ عنوان: ض.خيط(), محتوى: ض.خيط(), لون: ض.التعداد([["white", "yellow", "blue", "green"]).خياري(), }),});
المستندات:”https://docs.tambo.co/concepts/generative-interfaces/generative-components” rel=”nofollow”> المكونات التوليدية,”https://docs.tambo.co/concepts/generative-interfaces/interactable-components” rel=”nofollow”> مكونات قابلة للتفاعل
قم بتغليف تطبيقك به TamboProvider. يجب عليك تقديم إما userKey أو userToken للتعرف على صاحب الموضوع.
TamboProvider com.apiKey={عملية.بيئة.NEXT_PUBLIC_TAMBO_API_KEY!} userKey={معرف المستخدم الحالي} عناصر={عناصر}> محادثة /> ملاحظة قابلة للتفاعل بطاقة تعريف="note-1" عنوان="My Note" محتوى="Start writing..." />TamboProvider>
استخدام userKey للبيئات الموثوقة أو من جانب الخادم. يستخدم userToken (رمز وصول OAuth) للتطبيقات من جانب العميل حيث يحتوي الرمز المميز على هوية المستخدم. يرى”https://docs.tambo.co/concepts/user-authentication” rel=”nofollow”> مصادقة المستخدم للحصول على التفاصيل.
المستندات:”https://docs.tambo.co/reference/react-sdk/providers” rel=”nofollow”> خيارات المزود
useTambo() هو الخطاف الأساسي – فهو يوفر لك الرسائل وحالة البث وإدارة سلسلة الرسائل. useTamboThreadInput() يتعامل مع إدخال المستخدم وتقديم الرسالة.
const { messages, isStreaming } = useTambo();const { value, setValue, submit, isPending } = useTamboThreadInput();
المستندات:”https://docs.tambo.co/concepts/conversation-storage” rel=”nofollow”> المواضيع والرسائل,”https://docs.tambo.co/concepts/generative-interfaces/component-state” rel=”nofollow”> حالة التدفق,”https://docs.tambo.co/getting-started/quickstart” rel=”nofollow”> البرنامج التعليمي الكامل
اتصل بقواعد البيانات Linear أو Slack أو خوادم MCP الخاصة بك. يدعم Tambo بروتوكول MCP الكامل: الأدوات والمطالبات والاستنباطات وأخذ العينات.
import { MCPTransport } from "@tambo-ai/react/mcp";ثابت mcpServers = [[ { اسم: "filesystem", عنوان URL: "http://localhost:8261/mcp", ينقل: MCPTransport.HTTP, },];TamboProvider com.apiKey={عملية.بيئة.NEXT_PUBLIC_TAMBO_API_KEY!} userKey={معرف المستخدم الحالي} عناصر={عناصر} mcpServers={mcpServers}> برنامج />TamboProvider>;
2025-11-07-elicitations.mp4
المستندات:”https://docs.tambo.co/concepts/model-context-protocol” rel=”nofollow”> التكامل MCP
“-1” دير=”auto”> الأدوات المحلية
في بعض الأحيان تحتاج إلى وظائف تعمل في المتصفح. معالجة DOM، وعمليات الجلب المصادق عليها، والوصول إلى حالة React. قم بتعريفها كأدوات ويمكن للذكاء الاصطناعي تسميتها.
ثابت أدوات: TamboTool[[] = [[ { اسم: "getWeather", وصف: "Fetches weather for a location", أداة: غير متزامن (المعلمات: { موقع: خيط }) => أحضر(`/api/weather?q=${encodeURIComponent(المعلمات.موقع)}`).ثم((ص) => ص.json(), ), inputSchema: ض.هدف({ موقع: ض.خيط(), }), importSchema: ض.هدف({ درجة حرارة: ض.رقم(), حالة: ض.خيط(), موقع: ض.خيط(), }), },];TamboProvider com.apiKey={عملية.بيئة.NEXT_PUBLIC_TAMBO_API_KEY!} userKey={معرف المستخدم الحالي} أدوات={أدوات} عناصر={عناصر}> برنامج />TamboProvider>;
المستندات:”https://docs.tambo.co/guides/take-actions/register-tools” rel=”nofollow”> الأدوات المحلية
“-1” دير=”auto”> السياق والمصادقة والاقتراحات
سياق إضافي يتيح لك تمرير البيانات الوصفية لمنح الذكاء الاصطناعي استجابات أفضل. حالة المستخدم، إعدادات التطبيق، الصفحة الحالية. مصادقة المستخدم يمرر الرموز المميزة من مزود المصادقة الخاص بك. اقتراحات يُنشئ مطالبات يمكن للمستخدمين النقر عليها بناءً على ما يفعلونه.
TamboProvider com.apiKey={عملية.بيئة.NEXT_PUBLIC_TAMBO_API_KEY!} userToken={userToken} contextHelpers={{ العناصر المحددة: () => ({ مفتاح: "selectedItems", قيمة: العناصر المحددة.رسم خريطة((أنا) => أنا.اسم).ينضم(", "), }), الصفحة الحالية: () => ({ مفتاح: "page", قيمة: نافذة.موقع.اسم المسار }), }}/>
“-1” دير=”auto”> مقدمي خدمات LLM المعتمدين
OpenAI، وAnthropic، وCerebras، وGoogle Gemini، وMistral، وأي مزود متوافق مع OpenAI.”https://docs.tambo.co/reference/llm-providers” rel=”nofollow”> القائمة الكاملة. مفقود واحد؟”https://github.com/tambo-ai/tambo/issues”> اسمحوا لنا أن نعرف.
“-1” دير=”auto”> كيف يقارن تامبو
| ميزة | تامبو | فيرسل AI SDK | مساعد الطيارKit | واجهة المستخدم المساعدة |
|---|---|---|---|---|
| اختيار المكون | يقرر الذكاء الاصطناعي المكونات التي سيتم عرضها | التعيين اليدوي للأداة إلى المكونات | عبر أطر عمل الوكيل (LangGraph) | واجهة مستخدم للأداة التي تركز على الدردشة |
| التكامل MCP | مدمج | التجريبية (الإصدار 4.2+) | تمت إضافتها مؤخرًا | يتطلب AI SDK v5 |
| مكونات الحالة الدائمة | نعم | لا | أنماط الدولة المشتركة | لا |
| تنفيذ الأداة من جانب العميل | تصريحي، تلقائي | دليل عبر onToolCall | جانب الوكيل فقط | لا |
| استضافة ذاتية | معهد ماساتشوستس للتكنولوجيا (SDK + الواجهة الخلفية) | أباتشي 2.0 (SDK فقط) | معهد ماساتشوستس للتكنولوجيا | معهد ماساتشوستس للتكنولوجيا |
| خيار مستضاف | تامبو كلاود | لا | كوبيلوت كيت كلاود | سحابة مساعد |
| الأفضل ل | التحكم الكامل في واجهة مستخدم التطبيق | الجري وتجريد الأدوات | سير العمل متعدد الوكلاء | واجهات الدردشة |
انضم إلى”https://discord.gg/dJNvPEHth6″ rel=”nofollow”> الخلاف للدردشة مع المطورين الآخرين والفريق الأساسي.
هل ترغب في المساهمة؟ اقرأ”http://github.com/tambo-ai/tambo/blob/main/CONTRIBUTING.md”> دليل المساهمة.
انضم إلى المحادثة على تويتر وتابع”https://twitter.com/tambo_ai” rel=”nofollow”>@تامبو_آي.
“http://github.com/tambo-ai/tambo/blob/main/LICENSE”> معهد ماساتشوستس للتكنولوجيا ما لم يذكر خلاف ذلك. بعض مساحات العمل (مثل apps/api) نكون”http://github.com/tambo-ai/tambo/blob/main/apps/api/LICENSE”> أباتشي-2.0.
“_blank” rel=”noopener noreferrer” href=”http://github.com/tambo-ai/tambo/blob/main/assets/tambo-animation.gif”>”http://github.com/tambo-ai/tambo/raw/main/assets/tambo-animation.gif” البديل=”Tambo AI Animation” العرض=”800″ بيانات-صورة متحركة>
لوكلاء AI/LLM: docs.tambo.co/llms.txt