虚拟机一站式部署Claude Code 可视化UI界面

前言

最近，强大的 AI 编码助手 Claude Code 在开发者社区中迅速走红，凭借其出色的代码生成和理解能力赢得了广泛赞誉。然而，其纯粹基于命令行的交互方式，对于许多习惯了图形化界面的开发者，尤其是新手而言，无疑设置了一道不低的门槛。繁琐的命令记忆、不够直观的操作流程，使得不少用户难以充分发挥其强大的潜力。

为了解决这一痛点，蓝耘适时推出了配套的可视化工具 lanyuncodingui。它巧妙地为命令行的 Claude Code 套上了一层现代化的图形用户界面 (GUI)，将复杂的操作简化为直观的点击和输入。本文将作为一份详尽的指南，不仅会带您完成 Claude Code 的基础安装与配置，更核心的是，将引导您部署并使用 lanyuncodingui，让您彻底告别冰冷的终端，在友好的可视化环境中，轻松驾驭 Claude Code 的强大功能，享受真正高效、愉悦的 AI 辅助编程新体验。

安装Node.js以及npm

Node.js我们要求的版本是20.19.4甚至更高
我们先进行系统包的更新操作

sudo apt update
sudo apt upgrade

Node.js 官方提供了 NodeSource 仓库，里面有各个版本的 Node.js 包。为了安装特定版本的 Node.js 20.x，可以先添加 NodeSource 仓库

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

执行以下命令来安装 Node.js 20.19.4 版本：

sudo apt install -y nodejs=20.19.4-1nodesource1

我们这里出现了如下报错

这是由于 系统中已安装的 libnode-dev 包与 Node.js 20.19.4 冲突。
我们需要卸载冲突的旧版本 Node 相关包（包括 libnode-dev）：

sudo apt remove libnode-dev nodejs -y

重新安装 Node.js 20.19.4：

sudo apt install -y nodejs=20.19.4-1nodesource1

然后输入下方命令进行验证安装

node -v
npm -v

安装claude code

进行claude code的安装
输入 下方命令

bash -c "$(curl -fsSL https://raw.githubusercontent.com/LanyunAI-labs/lanyun-cc/main/install.sh)"

出现了下方报错，显示连接拒绝了

我们这里输入命令是没有问题的，所以我们这个虚拟机肯定是可以进行互联网的访问操作的

ping baidu.com

问题可能出在 DNS 配置 或 GitHub 服务器的访问限制 上。

但是这个还是挺麻烦的，索性我直接将需要配置的环境变量的文件里面的内容获取下来了，这个文件其实就是配置一些环境变量的

#!/bin/bashset -einstall_nodejs() {local platform=$(uname -s)case "$platform" inLinux|Darwin)echo "🚀 Installing Node.js on Unix/Linux/macOS..."echo "📥 Downloading and installing nvm..."curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bashecho "🔄 Loading nvm environment..."\. "$HOME/.nvm/nvm.sh"echo "📦 Downloading and installing Node.js v22..."nvm install 22echo -n "✅ Node.js installation completed! Version: "node -v # Should print "v22.17.0".echo -n "✅ Current nvm version: "nvm current # Should print "v22.17.0".echo -n "✅ npm version: "npm -v # Should print "10.9.2".;;*)echo "Unsupported platform: $platform"exit 1;;esac
}# Check if Node.js is already installed and version is >= 18
if command -v node >/dev/null 2>&1; thencurrent_version=$(node -v | sed 's/v//')major_version=$(echo $current_version | cut -d. -f1)if [ "$major_version" -ge 18 ]; thenecho "Node.js is already installed: v$current_version"elseecho "Node.js v$current_version is installed but version < 18. Upgrading..."install_nodejsfi
elseecho "Node.js not found. Installing..."install_nodejs
fi# Check if Claude Code is already installed
if command -v claude >/dev/null 2>&1; thenecho "Claude Code is already installed: $(claude --version)"
elseecho "Claude Code not found. Installing..."npm install -g @anthropic-ai/claude-code
fi# Configure Claude Code to skip onboarding
echo "Configuring Claude Code to skip onboarding..."
node --eval 'const homeDir = os.homedir(); const filePath = path.join(homeDir, ".claude.json");if (fs.existsSync(filePath)) {const content = JSON.parse(fs.readFileSync(filePath, "utf-8"));fs.writeFileSync(filePath,JSON.stringify({ ...content, hasCompletedOnboarding: true }, 2), "utf-8");} else {fs.writeFileSync(filePath,JSON.stringify({ hasCompletedOnboarding: true }), "utf-8");}'# Prompt user for API key
echo "🔑 Please enter your lanyun API key:"
echo "🔑 请输入您的蓝耘 API 密钥："
echo "   You can get your API key from: https://maas.lanyun.net/"
echo "   您可以从这里获取 API 密钥：https://maas.lanyun.net/"
echo "   Note: The input is hidden for security. Please paste your API key directly."
echo "   注意：为了安全起见，输入内容将被隐藏。请直接粘贴您的 API 密钥。"
echo ""
read -s api_key
echo ""if [ -z "$api_key" ]; thenecho "⚠️  API key cannot be empty. Please run the script again."exit 1
fi# Prompt user for model (optional, default is k2)
echo ""
echo "🤖 Please enter the Claude model to use (press Enter for default 'k2'):"
echo "🤖 请输入要使用的 Claude 模型（按回车使用默认值 'k2'）："
echo ""
read model
echo ""# Set default model if not provided
if [ -z "$model" ]; thenmodel="k2"echo "ℹ️  Using default model: k2"
fi# Detect current shell and determine rc file
current_shell=$(basename "$SHELL")
case "$current_shell" inbash)rc_file="$HOME/.bashrc";;zsh)rc_file="$HOME/.zshrc";;fish)rc_file="$HOME/.config/fish/config.fish";;*)rc_file="$HOME/.profile";;
esac# Add environment variables to rc file
echo ""
echo "📝 Adding environment variables to $rc_file..."# Check if ALL three variables exist
has_base_url=$(grep -c "ANTHROPIC_BASE_URL" "$rc_file" 2>/dev/null || echo 0)
has_api_key=$(grep -c "ANTHROPIC_API_KEY" "$rc_file" 2>/dev/null || echo 0)
has_model=$(grep -c "ANTHROPIC_MODEL" "$rc_file" 2>/dev/null || echo 0)if [ "$has_base_url" -gt 0 ] && [ "$has_api_key" -gt 0 ] && [ "$has_model" -gt 0 ]; thenecho "⚠️  Environment variables already exist in $rc_file. Updating with new values..."# Remove old entries (compatible with both macOS and Linux)if [[ "$OSTYPE" == "darwin"* ]]; thensed -i.bak '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i.bak '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i.bak '/ANTHROPIC_MODEL/d' "$rc_file"rm -f "$rc_file.bak"elsesed -i '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i '/ANTHROPIC_MODEL/d' "$rc_file"fi
fi# Add/update entries
echo "" >> "$rc_file"
echo "# Claude Code environment variables" >> "$rc_file"
echo "export ANTHROPIC_BASE_URL=https://maas-api.lanyun.net/anthropic-k2/" >> "$rc_file"
echo "export ANTHROPIC_API_KEY=$api_key" >> "$rc_file"
echo "export ANTHROPIC_MODEL=$model" >> "$rc_file"
echo "✅ Environment variables added/updated in $rc_file"echo ""
echo "🎉 Installation completed successfully!"
echo "🎉 安装成功完成！"
echo ""
echo "⚠️  IMPORTANT: Run this command to activate Claude Code:"
echo "⚠️  重要：运行以下命令激活 Claude Code："
echo ""
echo "   source $rc_file"
echo ""
echo "🚀 After that, you can use: claude"
echo "🚀 之后即可使用：claude"

我们在虚拟机上创建一个文件叫做install.sh，将上面的内容保存进去
然后保存退出即可

然后我们输入命令进行文件的执行

./install.sh

这时候告诉我权限不够，真的醉了

我们输入命令给这个文件加上权限

chmod +x install.sh

然后我们再输入上面的命令进行执行就ok了，这个时候我们就成功了

我们需要进行api-key环境变量的绑定操作，来到蓝耘Maas平台创建你的api

输入完你的api-key然后我们就到了选择模型的地方了，我们直接回车选择默认的kimi k2模型即可

然后我们需要输入命令激活claude code

source /root/.bashrc

然后再输入claude开始进行使用，这里他会询问我们的api是否选择这个，我们选择Yes然后回车即可

然后他这里询问我们的是否相信这个文件夹
我们直接回车选择相信，

然后就可以开始我们的愉快的使用了

这里我们可以通过命令行进行简单的对话操作

安装lanyuncodingui界面

但是终归是命令行操作的，肯定没有可视化界面那么舒服的，所以我们这里使用到了蓝耘的lanyuncodingui可视化界面了

输入命令

npm install -g lanyuncodingui@latest

安装好如下：

只要你按照上述的步骤一个个来的话，肯定是不会出错的
然后我们再输入命令进行ui界面的启动

lanyuncodingui

这里告诉我们的地址是在

http://0.0.0.0:3804

我们来到火狐打开这个网址

然后这里是让我们进行账户的创建的，我们输入我们的用户名然后再重复输入两遍密码，点击下方的Create Account即可

然后我们就进入到了界面了

左侧可以看到我们的项目文件夹，我们也是可以选择点击上方的文件夹打开按钮打开我们其他路径下的项目文件夹
我们在这里选择默认的文件夹可以进行问题的叙述

我们这里也是可以不用回到虚拟机的终端界面，我们这里可以打开一个内置的终端进行命令的进行，也是很方便的

还有一个文件可视化大屏显示当前虚拟机中的所有文件

并且双击就能查看文件内容了，增删查改也是比原生的Linux方便多了
在左下角的setting中我们也是可以进行相关设置的，比如说进行模型的切换，api-key的更改，就不用去终端中输入复杂的命令进行环境变量的更改了

并且这里我们也可以进行MCP的链接

还可以进行一系列规则的设置操作
说真的，这个claude code真的是做项目的绝绝子啊，非常的好用

本文以一篇详尽的图文教程，完整记录了在虚拟机环境中从零开始部署蓝耘 Claude Code 及其可视化界面 lanyuncodingui 的全过程。我们不仅成功解决了在安装过程中遇到的具体技术难题，如 Node.js 的版本冲突、因网络限制导致的安装脚本拉取失败，以及文件执行权限不足等常见障碍，还展示了如何通过手动创建本地脚本的变通方法，巧妙地绕过环境限制。

并且8月蓝耘还在举办 MaaS 特价/折扣资源包和周周抢免费无门槛代金券活动

大量的token都在送，感兴趣的赶紧来吧
https://console.lanyun.net/#/register?promoterCode=5663b8b127

总结

整个部署流程的核心亮点在于，我们成功地将一个纯粹的命令行 AI 工具，升级为了一个功能全面、操作直观的可视化集成开发环境。通过安装和启动 lanyuncodingui，开发者可以彻底摆脱对繁琐命令的记忆和依赖。无论是进行文件管理、执行终端命令，还是修改 API 密钥和切换模型等核心配置，一切都可以在友好的图形界面中轻松完成。

总而言之，这套“虚拟机 + 蓝耘Claude Code + lanyuncodingui”的组合方案，不仅验证了 Claude Code 的强大能力，更重要的是提供了一套行之有效的方法，极大地降低了其使用门槛。它为开发者，尤其是初学者，打造了一个一站式的 AI 辅助编程工作站，是提升开发效率、优化编程体验的绝佳利器。

https://console.lanyun.net/#/register?promoterCode=5663b8b127