从 0 到 1 玩转Claude code(蓝耘UI界面版本):AI 编程助手的服务器部署与实战指南

前言

蓝耘 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

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

sudo apt --fix-broken install

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

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

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

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

image.png
输入命令安装蓝耘 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

image.png

蓝耘ui界面的配置与安装

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

npx lanyuncodingui

image.png

这里可以看到我们成功了,在本地的3876端口开放了界面
他这里让我们要进行账户的创建
image.png
输入你的姓名,然后重复输入两次密码就能进行账户的创建操作了
创建好了账户之后我们就进入到了主界面了
image.png
这里我们需要先点击左上角进行项目文件夹的创建
然后输入对应的文件路径就可以进行创建了
我还发现,我这里文件夹创建失败了,然后本地出现了报错,有点意思哈,实时监控报错还是蛮不错的
image.png
这个报错说我们服务器上面缺少相关的目录和配置文件
我们需要针对上面的报错创建必要的目录和配置文件:

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

初始化配置内容(可选但推荐):
打开配置文件:

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

粘贴以下最基本的配置(如果没有具体要求):

{"projects": []
}

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

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

搞定之后我们本地就可以看到文件夹了
image.png
这个时候我们就可以开始进行对话操作了
image.png
但是我们发了几句对话消息,没反应,为什么,因为我们还没设置api哈哈哈,没有设置基础的大模型
image.png

我们打开左下角的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就是调整当前网页的外观的,看你们自己的喜好
image.png
第三个导航栏就很重要了,就是设置我们的kimi -k2模型的api的
image.png
这里我们需要获取到api-keys
来到蓝耘注册
官网,进入到MaaS平台
进行api-keys的创建,创建好了之后复制到我们的claude code ui界面
image.png

来到ui界面,点击Test Connecting进行链接测试,这里你如果链接成功的话,下方会出现successfully的
image.png
然后我们就可以开始愉快的使用了
但是我们设置好关键配置之后一定得点击右下角的Save Setting进行保存设置
image.png

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)"

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

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

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

source /root/.bashrc

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

claude

然后他就检测到了我们之前往环境变量中输入的api-key的信息,我们这里选择Yes
image.png
然后他会询问我们是否信任当前文件夹中的内容,我们选择Yes,proceed
image.png
然后我们就可以开始愉快的使用了
image.png
这里我们可以在对话框中进行对话操作了哦
image.png

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

/init

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

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

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

npx lanyuncodingui

如果你出现下面的情况
image.png
这种情况通常是主机权限问题,我们可以使用管理员权限进行安装:sudo npm install -g lanyuncodingui@latest ,执行后稍等片刻,这次我们看到安装成功了:
image.png
然后输入命令直接启动ui界面

lanyuncodingui

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

输入信息登录即可,如果是第一次打开的话会让你创建用户的,设置相关密码信息的
image.png
在可视化界面,可以看到历史信息
image.png
并且再次打开我们的Settings界面是可以看到我们的api相关的信息是已经被保存好了的,不用二次进行设置了的
image.png
在左侧打开终端中的文件夹,然后在这里进行可视化对话,让ai生成对应的文件,真的很方便。
并且我们也不用打开vscode
我们直接在这个可视化ui界面进行项目代码的设计,终端界面应有尽有,
image.png
文件可视化全面,伟大无需多言
image.png
并且这里可以和git仓库进行关联的,这里我没有进行关联,如果必要的话可以进行关联下的,然后代码写好了直接进行提交操作
image.png
蓝耘元生代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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/pingmian/93156.shtml
繁体地址,请注明出处:http://hk.pswp.cn/pingmian/93156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker使用指定的MAC地址启动podman使用指定的MAC地址启动

docker指定固定的mac地址 1】创建自定义桥接网络并配置 MAC 地址保留 docker network create --driver bridge custom_bridge2】启动容器并指定使用自定义网络 docker run -it --name your-container --network custom_bridge --mac-address 02:42:ac:11:00:02 your-image--mac…

抽奖程序web程序

使用html实现抽奖程序&#xff0c;没有后台&#xff0c;如果需要后续写个后台可以配置&#xff0c;没有过多的介绍&#xff0c;看代码吧 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>婚礼抽奖</…

【Python办公】Excel转json(极速版)-可自定义累加字段(如有重复KEY)

目录 专栏导读 🎯 亮点特性 ⚙️ 安装与运行 🖥️ 界面与区域说明 🚀 使用示例 💡 使用建议 ❓ 常见问题(FAQ) 🧱 技术要点 完整代码 🏁 结语 专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——…

JavaScript 防抖(Debounce)与节流(Throttle)

在 JavaScript 前端开发中&#xff0c;处理高频率事件&#xff08;如窗口调整、输入框输入、页面滚动&#xff09;时&#xff0c;如果不加以控制&#xff0c;会导致性能问题&#xff0c;如页面卡顿或资源浪费。防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle…

探索无人机图传技术:创新视野与无限可能

近年来&#xff0c;无人机技术的飞速发展不仅改变了航空行业的格局&#xff0c;还深刻影响了多个领域的日常运作。无人机图传技术作为无人机的核心技术之一&#xff0c;凭借其精准的图像传输能力和高效的远程操作特性&#xff0c;正在成为各行各业的得力助手。从空中拍摄到实时…

Comfyui进入python虚拟环境

如果你的 Python 可执行文件&#xff08;python.exe&#xff09;位于 C:\comfyui\.venv\Scripts&#xff0c;那么 .venv 本身已经是一个虚拟环境&#xff0c;你只需要 激活它&#xff0c;而无需再创建一个新的虚拟环境。如何激活这个已有的虚拟环境&#xff1f; 1. 打开终端&am…

秋招春招实习百度笔试百度管培生笔试题库百度非技术岗笔试|笔试解析和攻略|题库分享

笔试介绍 百度非技术岗笔试采用的是规定时间统一笔试形式&#xff0c;管培生会有两场考试分别是7月底和8月中旬&#xff0c;其他非技术类岗位一般在8月中旬开始。 行测题必考&#xff0c;有些岗位考简答题&#xff0c;比如管培生以及产品经理等岗位。 笔试内容 笔试内容一…

低资源语言翻译:数据增强与跨语言迁移学习策略

文章目录一、低资源语言翻译的挑战1.1 数据稀缺性1.2 语言特性复杂1.3 评估困难二、数据增强策略&#xff08;Data Augmentation&#xff09;2.1 基于单语数据的增强2.2 基于平行数据的增强2.3 多模态数据增强三、跨语言迁移学习策略&#xff08;Cross-Lingual Transfer Learni…

【每天一个知识点】时间序列聚类

一、什么是时间序列聚类&#xff1f;如果把数据比作一本书&#xff0c;那么时间序列&#xff08;Time Series&#xff09;就是一本按时间顺序记录事件的日记。它可能是股票每天的价格波动、某台机器的温度曲线、一个城市的空气质量变化&#xff0c;甚至是人的心电信号。时间序列…

对抗损失(GAN)【生成器+判断器】

这个是啥呢&#xff0c;搞图片生成用的。我搜了下&#xff0c;把整体流程记录下&#xff0c;过程中会用到GAN准备数据集&#xff08;真实图像素材&#xff09; 目标生成人脸的&#xff0c;你像游戏注册时选一个脸。捏脸。那么准备真实人脸图片老规矩&#xff0c;缩放裁剪…

5分钟入门C++

这是5分钟入门 C 的精简 Demo&#xff0c;尽量涵盖核心概念&#xff1a;变量、函数、类、控制流、STL 容器&#xff0c;让你快速理解 C 的基本用法。#include <iostream> // 输入输出 #include <vector> // 动态数组 #include <algorithm> // 常用算法…

java注释功能

为了优化代码的使用&#xff0c;分享记录相关注释功能。 单行注释 // 这是单行注释文字多行注释 /* 这是多行注释文字 这是多行注释文字 注意&#xff1a;多行注释不能嵌套使用。 */文档注释 /**- 这是文档注释文字- */注释的作用 描述类或方法的功能&#xff0c;方便别人和自…

(论文速读)DiffusionDet - 扩散模型在目标检测中的开创性应用

论文题目&#xff1a;DiffusionDet: Diffusion Model for Object Detection&#xff08;DiffusionDet:物体检测的扩散模型&#xff09;会议&#xff1a;ICCV2023摘要&#xff1a;我们提出了DiffusionDet&#xff0c;这是一个新的框架&#xff0c;它将物体检测描述为从噪声盒到目…

LangChain简介

LangChain 是一个用于构建基于大语言模型&#xff08;LLM&#xff09;的应用程序的开源框架&#xff0c;它提供了一套工具、组件和接口&#xff0c; 可以将 LLM 模型、向量数据库、交互层 Prompt、外部知识、外部工具整合到一起&#xff0c;进而可以自由构建 LLM 应用。 LangCh…

为什么哈希表(字典)的查询速度有时会突然变慢

哈希表&#xff08;在许多语言中被称为“字典”或“关联数组”&#xff09;的查询速度&#xff0c;在理想情况下&#xff0c;应是接近“瞬时”的常数时间&#xff0c;然而&#xff0c;在特定场景下&#xff0c;其性能之所以会突然、无征兆地变慢&#xff0c;其根源&#xff0c;…

whisper 语种检测学习笔记

目录 transformers推理&#xff1a; transformers 源代码 网上的语种检测调用例子&#xff1a; 语种检测 api transformers推理&#xff1a; https://github.com/openai/whisper/blob/c0d2f624c09dc18e709e37c2ad90c039a4eb72a2/whisper/decoding.py waveform, sample_rat…

第1节 从函数到神经网络:AI思路的逆袭之路

&#x1f914; 开篇灵魂拷问 是不是觉得AI知识体系庞大到吓人&#xff1f;看了一堆快餐视频还是云里雾里&#xff1f;别慌&#xff01;这个系列就是要帮你打通任督二脉&#xff0c;用"既快又慢、既深入又肤浅、既有趣又严肃"的方式讲透AI基础知识&#xff01; &…

【科研绘图系列】R语言绘制多种饼图

文章目录 介绍 加载R包 数据下载 导入数据 数据预处理 画图1 画图2 画图3 画图4 画图5 画图6 系统信息 参考 介绍 【科研绘图系列】R语言绘制多种饼图 加载R包 rm(list = ls()) library(ggstatsplot) library(ggplot2) library(plotrix) library(ggpubr

vue3权限树封装成组件

vue3权限树组件 功能&#xff1a; 1、勾选节点、自动把父节点勾选。 2、取消勾选、子节点全部取消勾选。检查父节点&#xff0c;如果只有这个子节点、遍历把父节点取消勾选 3、filter过滤不仅展示父节点、相关子节点同时展示 4、 高亮显示所有过滤数据 效果图父组件引用 <te…

铨林接纸机学习记录1

光电开关学习做保养也是检查这些东西&#xff0c;包括气路有没漏气&#xff0c;固定件松动、轨道清洁之内刀座暂停光电I23刀座行程磁性开关&#xff0c;这个是安全警戒光电&#xff0c;驱动侧发射信号&#xff0c;操作侧接收刀座暂停光电正常运行是空白的&#xff0c;当出现遮挡…