OpenCode trong console
Cách xây dựng TUI của OpenCode Lite trên Text.js và chạy trên máy cục bộ.
OpenCode là một agent lập trình mã nguồn mở. OpenCode Lite là ứng dụng console cho agent này, xây dựng bằng Text.js.
Dùng thử
- Trên trang này: truy cập OpenCode và mở DevTools.
- Trên máy cục bộ:
bunx create-text-app my-app --template opencode.
Trang web chạy một môi trường thử nghiệm với agent theo kịch bản. Nhập prompt bất kỳ.
Cấu trúc
| Khu vực | Component |
|---|---|
| Lịch sử hội thoại | <ScrollBox stickyScroll> + <Markdown> |
| Thẻ công cụ | <Code> và <Diff> |
| Prompt | <Textarea> |
| Bảng lệnh | <Modal> + <Select searchable> |
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> );}Phím tắt
| Phím | Thao tác |
|---|---|
Enter | Gửi |
Shift+Tab | Chuyển agent (build / plan) |
Ctrl+P | Lệnh |
Ctrl+X rồi L | Phiên |
Ctrl+X rồi N | Phiên mới |
Esc hai lần | Ngắt phiên đang chạy |
Kết nối máy chủ cục bộ
# From any directory:opencode service status # If stopped: opencode service startbunx @textjs/opencode@latest proxyGiữ cầu nối chạy. Trên trang OpenCode, nhập http://127.0.0.1:4096, nhấn Kết nối và cho phép truy cập mạng cục bộ nếu Chrome yêu cầu. Sau đó nhập mã ghép nối mà cầu nối đã in ra. Trang duy trì ghép nối cho đến khi cầu nối khởi động lại hoặc bạn nhấn Ngắt kết nối. Dùng URL của cầu nối, không dùng cổng dịch vụ: cầu nối cung cấp thông tin xác thực dịch vụ và header CORS. Dừng cầu nối bằng Ctrl+C khi xong.
Với máy chủ chạy ở tiền cảnh đang dùng cổng 4.096, chạy bunx @textjs/opencode@latest proxy --port 4097 --target http://127.0.0.1:4096 và kết nối trang với cổng 4.097. Với máy chủ chạy ở tiền cảnh có mật khẩu bảo vệ, xuất biến OPENCODE_PASSWORD của máy chủ trong shell của cầu nối; không đặt mật khẩu trong URL trình duyệt.
Cầu nối là gói @textjs/opencode. Gói này không có phần phụ thuộc và cũng chạy với npx trên Node 22 trở lên. Trong dự án Text.js, text proxy khởi động cùng cầu nối đó.