⁦OpenCode⁩ في وحدة التحكم

كيفية بناء واجهة ⁦OpenCode Lite⁩ النصية باستخدام Text.js وتشغيلها محليًا.

⁦OpenCode⁩ وكيل برمجة مفتوح المصدر. ⁦OpenCode Lite⁩ عميل له يعمل في وحدة التحكم، مبني باستخدام Text.js.

التجربة

  • على هذا الموقع: زر OpenCode وافتح DevTools.
  • محليًا: bunx create-text-app my-app --template opencode.

يشغّل الموقع بيئة معزولة بوكيل يتبع سيناريو معدًا مسبقًا. اكتب أي طلب.

البنية

المنطقةالمكوّنات
سجل المحادثة<ScrollBox stickyScroll> + <Markdown>
بطاقات الأدوات<Code> و <Diff>
الطلب<Textarea>
لوحة الأوامر<Modal> + <Select searchable>
app/session/[id]/page.tsxtsx
export default function SessionPage({ params }: PageProps<{ id: string }>) {  const { messages, send } = useSession(params.id);  return (    <Box className="flex-col grow">      <ScrollBox stickyScroll className="grow">        {messages.map((m) => <MessageView key={m.id} message={m} />)}      </ScrollBox>      <Textarea placeholder="Ask anything…" onSubmit={send} autoFocus />    </Box>  );}

المفاتيح

المفتاحالإجراء
Enterإرسال
Shift+Tabتبديل الوكيل (بناء / تخطيط)
Ctrl+Pالأوامر
Ctrl+X ثم Lالجلسات
Ctrl+X ثم Nجلسة جديدة
Esc مرتينمقاطعة الجلسة الجارية

الاتصال بخادم محلي

# From any directory:opencode service status  # If stopped: opencode service startbunx @textjs/opencode@latest proxy

اترك الجسر قيد التشغيل. في صفحة OpenCode، أدخل http://127.0.0.1:4096، واضغط اتصال، واسمح بالوصول إلى الشبكة المحلية إذا طلب Chrome ذلك. ثم أدخل رمز الاقتران الذي طبعه الجسر. تظل الصفحة مقترنة حتى إعادة تشغيل الجسر أو الضغط على قطع الاتصال. استخدم عنوان URL للجسر، لا منفذ الخدمة: يوفّر الجسر بيانات اعتماد الخدمة وترويسات CORS. أوقفه باستخدام ⁦Ctrl+C⁩ عند الانتهاء.

لخادم يعمل في الواجهة الأمامية على المنفذ 4096 بالفعل، شغّل bunx @textjs/opencode@latest proxy --port 4097 --target http://127.0.0.1:4096 وصِل الصفحة بالمنفذ 4097. لخادم يعمل في الواجهة الأمامية ومحمي بكلمة مرور، صدّر المتغير OPENCODE_PASSWORD الخاص به في صدفة الجسر؛ لا تضع كلمة مرور في عنوان URL في المتصفح.

الجسر هو الحزمة @textjs/opencode. ليس له أي اعتماديات، ويعمل أيضًا باستخدام npx على ⁦Node 22⁩ أو أحدث. داخل مشروع Text.js، يشغّل الأمر text proxy الجسر نفسه.

تحرير هذه الصفحة على GitHub