Giới thiệu
Gần đây, cuộc sống phát triển của tôi đã thay đổi hoàn toàn khi tôi phát hiện ra 'Claude Code UI', một công cụ trực quan mới cho Claude Code. Nói thẳng ra, tôi luôn cảm thấy không hài lòng với giao diện người dùng của các trợ lý lập trình AI - chúng có nhiều tính năng nhưng thường nặng nề và khó sử dụng... Bạn có trải nghiệm tương tự không?
Nhưng 'Claude Code UI' này thì khác. Đây là một công cụ mã nguồn mở được phát triển bởi bên thứ ba, rất dễ cài đặt, có giao diện sạch sẽ, và quan trọng nhất là cảm giác sử dụng rất mượt mà. Đây thực sự là một công cụ 'đáng dùng'!
Kho mã nguồn mở: https://github.com/siteboon/claudecodeui
Công cụ này là một giao diện dành cho máy tính để bàn và thiết bị di động hỗ trợ cả Claude Code và Cursor CLI. Bạn có thể sử dụng nó cả ở chế độ cục bộ và từ xa, quản lý và chỉnh sửa các dự án và phiên làm việc.
Điều này có nghĩa là với công cụ này, bạn có thể thực hiện các tác vụ lập trình bằng Claude Code và Cursor CLI từ bất kỳ đâu - PC, máy tính bảng, hoặc điện thoại thông minh. Chúng ta đã bước vào kỷ nguyên có thể xem xét mã ngay cả khi đang di chuyển!
Tính năng chính
-
Thiết kế đáp ứng
Có thể sử dụng đồng nhất trên máy tính để bàn, máy tính bảng và điện thoại thông minh, cho phép bạn sử dụng Claude Code ngay cả khi đang di chuyển. Cá nhân tôi thấy điều này khá cách mạng. -
Giao diện trò chuyện tương tác
Trò chuyện tích hợp cho phép giao tiếp liền mạch với Claude Code hoặc Cursor. Tôi thích cách cuộc trò chuyện với AI diễn ra một cách tự nhiên. -
Tích hợp terminal
Có tính năng terminal tích hợp cho phép truy cập trực tiếp vào Claude Code hoặc Cursor CLI. Ngay cả những người không quen với dòng lệnh cũng có thể sử dụng dễ dàng. -
Quản lý tệp
Cây tệp tương tác hỗ trợ tô sáng cú pháp và chỉnh sửa thời gian thực. Điều này cải thiện đáng kể khả năng hiển thị mã. -
Quản lý Git
Cho phép xem các thay đổi, staging, commit và chuyển đổi nhánh. Rất hữu ích cho phát triển nhóm. -
Quản lý phiên
Hỗ trợ khôi phục cuộc trò chuyện, quản lý nhiều phiên và theo dõi lịch sử. Bạn có thể làm việc trên các dự án dài hạn mà không mất ngữ cảnh cuộc trò chuyện. -
Tương thích mô hình
Hỗ trợ Claude Sonnet 4, Opus 4.1, và GPT-5. Tôi thích khả năng lựa chọn các mô hình AI mới nhất.
Cách cài đặt và chạy
Cài đặt và chạy Claude Code UI đơn giản đến ngạc nhiên. Với Node.js v20+ và Claude Code CLI/Cursor CLI đã được cài đặt trước, bạn có thể thiết lập dễ dàng với các bước sau:
- Clone kho lưu trữ
git clone https://github.com/siteboon/claudecodeui.git
- Cài đặt các phụ thuộc
cd claudecodeui
npm install
- Cấu hình môi trường
cp .env.example .env
Bạn có thể thay đổi cài đặt như cổng trong tệp .env, nhưng cài đặt mặc định cũng hoạt động tốt.
- Khởi động ứng dụng
npm run dev
Sau đó truy cập trong trình duyệt của bạn:
Cục bộ: http://localhost:5173/
Mạng: http://192.168.10.79:5173
Khi truy cập lần đầu, bạn chỉ cần thiết lập tên người dùng và mật khẩu để bắt đầu sử dụng ngay lập tức. Vậy là bạn đã sẵn sàng!
Xem trước tính năng
Màn hình chính
Bố cục màn hình:
- Danh sách dự án và phiên làm việc ở bên trái
- Các tab chức năng như Chat/Shell/Files/Source Control ở trên cùng
- Lựa chọn trợ lý AI (Claude/Cursor) ở giữa
- Lựa chọn chế độ và hộp nhập dòng lệnh ở dưới cùng
Cá nhân tôi thích bố cục đơn giản này. Rất dễ truy cập vào các chức năng cần thiết.
Quản lý phiên(Chat)
Bạn có thể nhấp vào bất kỳ phiên nào trong dự án để khôi phục phiên đó. Bạn cũng có thể tạo mới, xóa và đổi tên phiên. Thật hữu ích khi không bị mất luồng cuộc trò chuyện trong các dự án dài hạn.
Đừng quên lấy API key trước và cấu hình nó.
Cài đặt công cụ
Nhấp vào cài đặt công cụ ở góc dưới bên trái để vào trang cài đặt, nơi bạn có thể quản lý các công cụ được phép và MCP.
Là một nhà phát triển chuyên nghiệp, tôi đánh giá cao khả năng tùy chỉnh theo phong cách làm việc của mình.
Chế độ tối
Bạn cũng có thể chuyển sang chế độ tối trong cài đặt. Đây là một tính năng quan trọng giúp giảm mỏi mắt đối với tôi, người thường làm việc vào ban đêm.
Shell
Nhấp vào tùy chọn Shell ở trên cùng để vào chế độ terminal.
Điều này có nghĩa là công cụ hỗ trợ cả sử dụng trực quan Claude Code và các lệnh terminal truyền thống.
Mẹo: Khi gỡ lỗi API từ dòng lệnh, sử dụng kết hợp với Apidog sẽ thuận tiện hơn. Claude Code UI xử lý việc tạo và quản lý mã, trong khi Apidog cung cấp khả năng trực quan hóa cho thiết kế, gỡ lỗi và kiểm tra API. Kết hợp cả hai sẽ làm cho quy trình làm việc của bạn trở nên liền mạch hơn.
Files
Nhấp vào tùy chọn Files ở trên cùng để vào chế độ tệp.
Bạn có thể nhấp vào tệp để xem trước, chỉnh sửa, lưu và tải xuống. Thật tuyệt khi thấy các thay đổi mã được phản ánh theo thời gian thực.
Source Control
Nhấp vào tùy chọn Source Control ở trên cùng để vào chế độ kiểm soát nguồn.
Tại đây, bạn có thể commit mã và xem thông tin lịch sử commit.
Đối với mã dự án API, kết hợp với tài liệu API và tính năng kiểm tra của Apidog cho phép gỡ lỗi API liền mạch cùng với commit mã. Điều này thực sự tiết kiệm thời gian.
Kết luận
Tóm tắt trải nghiệm của tôi với công cụ mới 'Claude Code UI' trong một câu: nó thực sự hữu ích!
So với Claudia mà tôi đã sử dụng trước đây, nó có nhiều tính năng nhưng hoạt động nặng nề khiến tôi không muốn sử dụng... Tôi đã chán ngấy với việc cài đặt phức tạp và trải nghiệm chậm chạp, cuối cùng tôi đã ngừng sử dụng nó.
Nhưng Claude Code UI thực sự 'nhanh, chính xác và mạnh mẽ', với trải nghiệm tuyệt vời. Chỉ cần vài lệnh để thiết lập, giao diện sạch sẽ, phản hồi nhanh, và chuyển đổi liền mạch giữa thiết bị di động và máy tính để bàn. Nó đã hoàn toàn thay đổi định kiến của tôi về các công cụ trực quan hóa Claude Code.
Chỉ cần thêm ánh xạ mạng nội bộ và tên miền, bạn có thể dễ dàng vận hành Claude Code và Cursor CLI trên điện thoại thông minh ngay cả khi không ở văn phòng, đang di chuyển hoặc ăn uống. Giấc mơ làm việc khi nằm cuối cùng đã trở thành hiện thực!
Nếu dự án của bạn bao gồm phát triển và kiểm tra API, tôi khuyên bạn nên thêm Apidog vào chuỗi công cụ của mình. Claude Code UI xử lý quản lý dự án và phiên, trong khi Apidog xử lý thiết kế, gỡ lỗi và kiểm tra API. Kết hợp lại, bạn sẽ có trải nghiệm một cửa cho lập trình AI + phát triển API.
Nếu bài viết này hữu ích, hãy để lại bình luận hoặc chia sẻ! Bạn đang sử dụng công cụ lập trình AI nào? Và bạn nghĩ gì về trải nghiệm lập trình trên thiết bị di động? Hãy cho tôi biết!