介紹
最近，我的開發生活發生了翻天覆地的變化。這都歸功於我發現了 Claude Code 的新視覺化工具「Claude Code UI」。說實話，我一直對 AI 程式設計助理的 UI 不太滿意。雖然功能豐富，但它們運作緩慢，使用起來也很困難……你也有過類似的經驗嗎？
但「Claude Code UI」卻不同。它是一款第三方開發的開源工具，但安裝起來超級簡單，介面簡潔，使用起來也超級方便。我覺得它真的「好用」！
該工具為 Claude Code 和 Cursor CLI 提供了桌面和行動介面，可讓您在本機或遠端管理和編輯專案和會話。
換句話說，有了它，無論身在何處，無論是在 PC、平板電腦還是智慧型手機上，你都可以使用 Claude Code 和 Cursor CLI 進行編碼。如今，我們甚至已經進入了一個可以在通勤列車上審查程式碼的時代！
主要特點
- 響應式設計
它在桌面、平板電腦和智慧型手機上運作良好，因此您可以在旅途中使用 Claude Code，我個人認為這是相當革命性的。
- 互動式聊天介面
內建聊天功能可讓您與 Claude Code 和 Cursor 順暢溝通。能夠以自然的方式繼續與 AI 對話，真是太棒了。
- Shell 終端集成
它具有內建終端功能，可讓您直接存取 Claude Code 和 Cursor CLI，即使對於不擅長命令列的人來說也很容易使用。
- 文件管理器
互動式文件樹支援語法高亮和即時編輯，讓您更了解程式碼。
- Git 管理器
您可以檢查、暫存和提交更改，也可以切換分支。它對於團隊開發也很有用。
- 會話管理
支援對話恢復、多會話管理和歷史跟踪，確保即使在長期專案中也不會丟失對話上下文。
- 模型相容性
支持 Claude Sonnet 4、Opus 4.1 和 GPT-5。能夠使用最新的 AI 模型是一項很棒的功能。
如何安裝和執行
安裝和執行 Claude Code UI 非常簡單。如果您已安裝 Node.js v20+ 和 Claude Code CLI/Cursor CLI，則可以按照以下步驟輕鬆設定。
- 克隆儲存庫
git clone https://github.com/siteboon/claudecodeui.git- 安裝依賴項
cd claudecodeui
npm install- 設定您的環境
cp .env.example .env您可以在.env檔案中更改連接埠等設置，但您也可以使用預設設定而不會出現任何問題。
- 啟動應用程式
npm run dev
然後，在瀏覽器中轉到以下 URL：
網路： http://192.168.10.79: 5173
首次造訪時，您只需設定使用者名稱和密碼即可開始使用！
功能預覽
主螢幕
螢幕佈局說明：
-
左側的專案和會話列表
-
頂部有聊天/Shell/檔案/原始碼控制等功能選項卡
-
中心的 AI 助手選擇（Claude/Cursor）
-
底部的模式選擇和命令列輸入框
就我個人而言，我喜歡這種簡單的佈局，因為它可以讓我快速存取我需要的功能。
會話管理
點擊專案中的任何會話即可恢復到該會話。
您也可以建立新會話、刪除會話、變更會話名稱等。這對於即使在長期專案期間保持對話流暢也非常有幫助。
首先，不要忘記事先取得並設定你的 API 金鑰
工具設定
點擊左下角的工具設置，進入設定頁面，可以管理您允許的工具和MCP。
對於專業開發人員來說，能夠根據自己的工作風格進行客製化是一項很棒的功能。
黑暗模式
您還可以在設定中切換到暗模式，這對我來說很重要，因為我經常在晚上工作，它可以減輕眼睛疲勞。
殼
點選頁面頂部的Shell選項，進入終端機模式。
這意味著它既支援 Claude Code 的視覺化使用，也支援原始終端命令的使用。
提示：如果您想在命令列上偵錯 API，將其與Apidog結合使用會更加方便。 Claude Code UI 負責程式碼產生和管理，而 Apidog 則提供視覺化的 API 設計、除錯和測試方式。兩者結合可以使工作流程更加流暢。
文件
點擊頁面頂部的Files選項進入文件模式。
點擊文件即可預覽、編輯、儲存或下載。即時查看程式碼變更的效果真是太棒了。
原始碼控制
您可以透過點擊頁面頂部的Source Control選項來進入原始碼控制模式。
在這裡可以提交程式碼，查看歷史提交資訊等。
對於 API 專案程式碼，Apidog 的 API 文件與測試功能相結合，可以在提交程式碼後立即無縫除錯 API - 從而節省大量時間。
概括
用一個字來概括我對新工具「Claude Code UI」的印象：真好用！
與我之前使用的 Claudia 相比，它具有更多功能，但速度很慢，我不想使用它......安裝很麻煩，而且我被緩慢的體驗所困擾，所以我最終放棄使用它。
但 Claude Code 的 UI 確實“快速、準確、強大”，體驗也堪稱一流。只需幾個命令即可完成設置，介面簡潔、響應迅速，並且在行動裝置和桌面之間無縫切換。它徹底顛覆了我對 Claude Code 視覺化工具的偏見。
只需加入內網映射和域名，即使不在辦公室、火車上，甚至吃飯時，也能用智慧型手機輕鬆操作 Claude Code 和 Cursor CLI。躺著辦公的夢想終於實現了！
如果您的專案包含 API 開發和測試，我們建議您將Apidog新增至您的工具鏈。 Claude Code UI 負責專案和會話管理，而 Apidog 則負責 API 的設計、除錯和測試。兩者結合，您將獲得AI 編程 + API 開發的一站式體驗。
如果您覺得這篇文章有幫助，請留言或分享！您使用哪些 AI 程式設計工具？您對行動端程式設計體驗有何看法？歡迎告訴我們！
原文出處：https://qiita.com/takuya77088/items/518b213b1e6d3264afbe
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式