前言

蓝耘 Coding UI 作为基于 Claude Code 的可视化工具，凭借对本地项目的深度掌控、与 Git 仓库的无缝衔接以及直观的交互界面，正在重构开发者的工作流。本文将带你一步步完成从环境搭建到实战使用的全流程，让这款工具真正成为你的编程「副驾」。

温馨提示：

博主写的时候脑子比较混乱，正篇文章的思路应该如此：
先进行node.js和npm的安装，然后进行claude code的本地配置，最后再进行lanyuncodingui的配置与安装操作

lanyuncodingui可视化界面目前只支持Mac和Liux环境，目前不支持Windows的，如果你想体验的话你可以使用虚拟机、云服务器、wsl、mac进行体验的，我的这篇文章是基于云服务器Ubuntu搭建的，后续会出基于wsl搭建的教程的

安装 Node.js 和 npm

更新系统包管理器

首先，确保您的系统是最新的。打开终端并运行以下命令：

sudo apt update && sudo apt upgrade -y

如果你出现下面这种情况的话：软件包之间存在冲突或某些软件包没有被正确安装导致的。你就得输入下方命令进行尝试修复系统中的破损包。运行以下命令来修复

sudo apt --fix-broken install

然后再次进行管理包的更新

根据系统环境，使用以下命令安装 Node.js 和 npm。

sudo apt-get install -f
sudo apt-get install nodejs npm

你如果出现了下方的报错说明你在安装 Node.js 时遇到了一些问题，具体是由于文件冲突导致的。错误信息显示 dpkg: error processing，并且提到 'libnode-dev' 包与 nodejs 包的文件冲突。

删除现有的 Node.js 和相关依赖
由于存在包冲突，首先我们需要删除现有的 Node.js 和 libnode-dev 包。

运行以下命令：

sudo apt-get remove --purge nodejs libnode-dev

清理残留的包
然后执行以下命令清理所有不再需要的包和依赖：

sudo apt-get autoremove -y
sudo apt-get clean

重新安装 Node.js
清理完成后，您可以再次尝试安装最新版本的 Node.js：

curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

检查版本
安装完成后，再次检查版本，确保 Node.js 已成功安装：

node -v
npm -v

输入命令安装蓝耘 Coding agent

npx lanyuncodingui

但是出现下方报错命令

报错显示

Error: spawn xdg-open ENOENT
...
code: 'ENOENT',
syscall: 'spawn xdg-open',

这表示应用试图自动用默认浏览器打开 http://localhost:3732，但系统中找不到 xdg-open 命令。
输入下方命令在 Ubuntu 上安装 xdg-open 所在的软件包

sudo apt install -y xdg-utils

蓝耘ui界面的配置与安装

我们输入命令安装蓝耘 Coding agent

npx lanyuncodingui

这里可以看到我们成功了，在本地的3876端口开放了界面
他这里让我们要进行账户的创建

输入你的姓名，然后重复输入两次密码就能进行账户的创建操作了
创建好了账户之后我们就进入到了主界面了

这里我们需要先点击左上角进行项目文件夹的创建
然后输入对应的文件路径就可以进行创建了
我还发现，我这里文件夹创建失败了，然后本地出现了报错，有点意思哈，实时监控报错还是蛮不错的

这个报错说我们服务器上面缺少相关的目录和配置文件
我们需要针对上面的报错创建必要的目录和配置文件：

mkdir -p /root/.claude/projects
touch /root/.claude/project-config.json

初始化配置内容（可选但推荐）：
打开配置文件：

nano /root/.claude/project-config.json

粘贴以下最基本的配置（如果没有具体要求）：

{"projects": []
}

然后按 Ctrl + O 保存，Ctrl + X 退出。

搞定完成上面的步骤之后我们重新进行项目文件夹的打开

搞定之后我们本地就可以看到文件夹了

这个时候我们就可以开始进行对话操作了

但是我们发了几句对话消息，没反应，为什么，因为我们还没设置api哈哈哈，没有设置基础的大模型

我们打开左下角的Tools Settings进入到设置界面

这里有三个导航栏，第一个导航栏Tools

• Skip permission prompts：勾选后会跳过权限提示（类似命令行 --dangerously-skip-permissions 标识 ），但需谨慎使用，因为可能让工具在无确认时执行，存在风险。
• Allowed Tools（允许的工具）：
  可设置无需权限提示、自动允许使用的工具，比如常见的 Bash(git log:*)（允许执行 git log 相关命令）、Write（写入操作）等。界面提供快捷添加按钮，方便快速配置常用工具，若没配置则显示 “No allowed tools configured”。
• Disallowed Tools（禁止的工具）：
  用于设置自动阻止、无需提示的工具，像危险的 Bash(rm:*)（避免误删文件的 rm 命令）。没配置时显示 “No disallowed tools configured”。
• MCP Servers：可添加 Model Context Protocol 服务器，为 Claude 这类模型提供额外工具和数据源，没配置时显示 “No MCP servers configured” 。

我目前除了里面的MCP其他的都使用不到
第二个导航栏里面的Apperance就是调整当前网页的外观的，看你们自己的喜好

第三个导航栏就很重要了，就是设置我们的kimi -k2模型的api的

这里我们需要获取到api-keys
来到蓝耘注册
官网，进入到MaaS平台
进行api-keys的创建，创建好了之后复制到我们的claude code ui界面

来到ui界面，点击Test Connecting进行链接测试，这里你如果链接成功的话，下方会出现successfully的

然后我们就可以开始愉快的使用了
但是我们设置好关键配置之后一定得点击右下角的Save Setting进行保存设置

claude code安装

[[#1. 安装 Node.js 和 npm]]这里我们需要先将nodejs和npm环境配置好
终端先输入命令进行提权，如果不进行提权操作的话是会出现一系列的报错的

sudo -i

然后输入命令将claude code安装到服务器中，这里会检查我们的nodejs的版本，如果太低了的话是不行的

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

这里我们需要在蓝耘官网获取下api-key，然后粘贴到这里，相当于将信息放到了环境变量里面了，不用我们每次都去官网复制粘贴，这个就减轻了负担了

然后模型的话我们就默认使用k2了，直接回车就行了

然后我们需要输入命令进行claude code的激活操作

source /root/.bashrc

然后就可以直接输入命令进行claude code的使用了

claude

然后他就检测到了我们之前往环境变量中输入的api-key的信息，我们这里选择Yes

然后他会询问我们是否信任当前文件夹中的内容，我们选择Yes，proceed

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

这里我们可以在对话框中进行对话操作了哦

如果你想通过claude code针对一个项目进行操作的话，你得进行初始化操作

/init

除了初始化还有很多的功能
如果你想退出的话直接ctrl c就行了，退出界面这里会详细介绍到具体的api耗费情况

并且我们的网页是可以监控到具体的耗费情况的

以上都是基于命令行的提问操作的，对于新手小白可能不友好，甚至有时候大佬都觉得挺麻烦的，所以我们蓝耘开发了可视化ui界面，[[#蓝耘ui界面的配置与安装]]这里我们已经介绍了如何进行可视化界面的安装操作
输入命令启动下ui界面

npx lanyuncodingui

如果你出现下面的情况

这种情况通常是主机权限问题，我们可以使用管理员权限进行安装：sudo npm install -g lanyuncodingui@latest ，执行后稍等片刻，这次我们看到安装成功了：

然后输入命令直接启动ui界面

lanyuncodingui

这里我们点击在浏览器中打开

输入信息登录即可，如果是第一次打开的话会让你创建用户的，设置相关密码信息的

在可视化界面，可以看到历史信息

并且再次打开我们的Settings界面是可以看到我们的api相关的信息是已经被保存好了的，不用二次进行设置了的

在左侧打开终端中的文件夹，然后在这里进行可视化对话，让ai生成对应的文件，真的很方便。
并且我们也不用打开vscode
我们直接在这个可视化ui界面进行项目代码的设计，终端界面应有尽有，

文件可视化全面，伟大无需多言

并且这里可以和git仓库进行关联的，这里我没有进行关联，如果必要的话可以进行关联下的，然后代码写好了直接进行提交操作

蓝耘元生代8月福利：新人专享与限量优惠双加持
🔹新用户注册：
20元算力代金券+千万Token资源包
🔹限量福利：
超值满减券最高减200
每周登录领10元算力
充值限时1折礼遇
https://mp.weixin.qq.com/s/mqeC7AIAmBs9BBSeMN4jXQ?scene=1

总结

无论你选择功能丰富的 lanyuncodingui 图形化界面，还是高效简洁的 claude 命令行工具，蓝耘 Coding 都为现代开发者提供了一套强大的 AI 辅助解决方案。它不仅能帮你生成代码、修复错误，还能成为你项目开发中最得力的伙伴。

在这个 AI 浪潮席卷而来的时代，拥抱变化、善用工具，是每一位开发者保持核心竞争力的关键。现在就动手配置你的蓝耘 Coding 环境，亲身体验编程效率的飞跃吧！

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