Login
siteboon/claudecodeuiPlease refer to the latest official releases for information GitHub Homepage

Claude Code 的桌面和行動端視覺化介面，支援跨平台 AI 編程助手管理

GPL-3.0JavaScript 1.7ksiteboonclaudecodeui Last Updated: 2025-07-15

Claude Code UI 專案詳細介紹

專案概述

Claude Code UI 是一個開源的網頁與行動裝置友善使用者介面，專為 Anthropic 官方的 Claude Code CLI 設計。此專案允許使用者在本地或遠端檢視所有 Claude Code 會話和專案，並以與 CLI 相同的方式進行管理。這為使用者提供了一個在任何地方都能運作的完整介面。

專案特色

🎨 回應式設計

  • 跨平台相容：無縫支援桌面、平板和行動裝置
  • 自適應佈局：可摺疊側邊欄和智慧內容優先順序
  • 觸控友善：滑動手勢和觸控導航
  • 行動導航：底部標籤欄，方便拇指操作

💬 互動式聊天介面

  • 內建聊天：與 Claude Code 無縫通訊的內建聊天介面
  • 即時通訊：透過 WebSocket 連線串流傳輸 Claude 的回應
  • 會話管理：恢復之前的對話或開始新的會話
  • 訊息歷史：完整的對話歷史，包含時間戳和中繼資料
  • 多格式支援：文字、程式碼區塊和檔案引用

🖥️ 整合終端功能

  • 直接 CLI 存取：透過內建 shell 功能直接存取 Claude Code CLI
  • 程序管理：Claude CLI 整合的程序生成與管理
  • 命令執行：支援所有 Claude Code CLI 命令

📁 檔案總管

  • 互動式檔案樹：帶有語法高亮和即時編輯的互動式檔案樹
  • 即時檔案編輯：直接在介面中讀取、修改和儲存檔案
  • 語法高亮：支援多種程式語言
  • 檔案操作：建立、重新命名、刪除檔案和目錄

💾 會話持久化

  • 自動儲存：所有對話自動儲存
  • 會話組織：按專案和時間戳分組會話
  • 會話操作：重新命名、刪除和匯出對話歷史
  • 跨裝置同步：從任何裝置存取會話

技術架構

系統架構圖

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Backend │ │ Claude CLI │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ Integration │
└─────────────────┘ └─────────────────┘ └─────────────────┘

後端技術棧

  • Express 伺服器：提供 RESTful API 和靜態檔案服務
  • WebSocket 伺服器：用於聊天和專案刷新的通訊
  • Claude CLI 整合：程序生成與管理
  • 會話管理：JSONL 解析和對話持久化
  • 檔案系統 API：為專案提供檔案瀏覽器

前端技術棧

  • React 18：現代元件架構，使用 Hooks
  • CodeMirror：進階程式碼編輯器，帶有語法高亮
  • Vite：快速建構工具和開發伺服器
  • Tailwind CSS：實用優先的 CSS 框架

安裝與配置

系統要求

  • Node.js v16 或更高版本
  • Claude Code CLI 已安裝並配置

安裝步驟

  1. 複製儲存庫：
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
  1. 安裝依賴項：
npm install
  1. 配置環境：
cp .env.example .env
# 根據需要編輯 .env 檔案
  1. 啟動應用程式：
# 開發模式（帶熱重載）
npm run dev
  1. 開啟瀏覽器：
  • 開發環境：http://localhost:3001

安全設定

🔒 重要安全提醒

所有 Claude Code 工具預設為禁用。這可防止潛在有害操作自動執行。

要使用 Claude Code 的完整功能，需要手動啟用工具：

  1. 開啟工具設定：點擊側邊欄中的齒輪圖示
  2. 選擇性啟用：只開啟您需要的工具
  3. 應用設定：您的偏好設定將儲存在本地

推薦方法：從啟用基本工具開始，根據需要逐步添加更多功能。

主要功能

專案管理

  • 自動發現專案：UI 自動從 ~/.claude/projects/ 發現 Claude Code 專案
  • 視覺化專案瀏覽器：顯示所有可用專案及其中繼資料和會話數
  • 專案操作：重新命名、刪除和組織專案
  • 智慧導航：快速存取最近的專案和會話

檔案管理

  • 專案結構瀏覽：具有展開/摺疊導航功能
  • 即時編輯：直接在介面中修改檔案
  • 檔案操作：完整的檔案和目錄管理功能

會話管理

  • 持久化儲存：所有會話自動儲存
  • 歷史記錄：完整的對話歷史追蹤
  • 多會話支援：同時管理多個專案會話

故障排除

常見問題1：UI 顯示無專案或空專案列表

解決方案：

  • 確保 Claude CLI 已正確安裝
  • 在至少一個專案目錄中執行 claude 命令進行初始化
  • 驗證 ~/.claude/projects/ 目錄存在且有適當權限

常見問題2：檔案未載入、權限錯誤、空目錄

解決方案：

  • 檢查專案目錄權限（在終端中使用 ls -la）
  • 驗證專案路徑存在且可存取
  • 查看伺服器控制台日誌獲取詳細錯誤訊息
  • 確保不會嘗試存取專案範圍外的系統目錄

Star History Chart