Layered Code

⚠️ 开发进行中 ⚠️

此项目目前正在积极开发中。功能、API 和文档可能会频繁变动。我们欢迎反馈和贡献（参见贡献），但请注意，此软件尚未准备好用于生产环境。项目达到 1.0 版本后，我们将移除此横幅。

🔍 什么是 Layered Code？

Layered Code 将 Web 开发转化为流畅的从对话到部署的工作流。你可以通过 Claude Desktop 等兼容 MCP 的工具与偏好的 AI 助手聊天，用自然语言描述想要构建的内容。AI 会实时创建和修改代码，而 Vite 和 Next.js 等现代开发框架则通过即时热模块替换自动显示更改。对结果满意后，只需让 AI 将更改提交到 git 仓库，并直接部署到生产服务器——无需记住复杂的命令，也无需在繁琐的开发工具中摸索。

观看 Layered Code 实际运行的快速介绍

主要交互方式：

• 🗣️ 与 Claude Desktop 等 AI 助手进行自然语言对话
• 🔌 MCP 集成让 AI 能够直接访问本地计算机上的项目文件
• 🎯 由意图驱动开发——描述你的目标，AI 会负责技术实现
• 🚀 用于自动部署的 Git 集成——通过对话命令提交更改并部署到生产环境

对话示例：

用户：“我想创建一个深色主题的基础网页，用来介绍我的新 AI 项目‘SmartFlow’。页面应包含简洁的主视觉区，其中有项目名称、简短说明，以及下方列出的主要功能。”

配备 Layered Code MCP 工具的 AI 可以：

• 创建包含语义化标记的 HTML 结构
• 生成具有良好对比度的现代深色主题 CSS
• 自动整理项目文件和资源
• 为移动设备和桌面设备设置响应式设计

用户：“看起来很棒！你能在底部添加一个联系板块，并给功能卡片加上轻微的悬停效果吗？”

AI 会无缝地：

• 更新 HTML，加入联系板块
• 优化 CSS，添加流畅的悬停动画
• 自动刷新开发服务器以显示更改

用户：“太好了！现在提交这些更改并部署到生产环境。”

AI 会处理版本控制和部署：

• 使用描述性消息提交更改
• 触发已配置的部署流水线
• 确认已成功部署到生产服务器

虽然可以通过 CLI 界面直接访问工具，但通过 MCP 使用对话式 AI 才是 Layered Code 真正发挥优势的地方——让你专注于想构建什么，而非如何构建。

🎯 项目动机

Layered Code 提供了一种开放的 AI 辅助开发方式：你的提示词、你的服务提供商、由你选择。

• 🔓 永久免费且开源：Layered Code 将始终保持免费和开源
• 💻 跨平台支持：可在 macOS、Windows 和 Linux 上运行
• 🔍 没有隐藏的魔法：不会暗中使用用户看不到、也不明白其用途的秘密提示词
• 🛠️ 技术无关：适用于任何语言、框架或开发环境
• 🚀 零供应商锁定：可使用任意托管服务提供商、开发环境或工具链

📦 安装

选项 1：通过 Homebrew 安装（macOS/Linux，推荐）

brew update
brew tap layered-flow/layered-code
brew install layered-code

选项 2：安装脚本（macOS/Linux）

系统范围安装（推荐）：

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | sudo bash

这会将二进制文件安装到 /usr/local/bin，方便从任何位置访问。

如果你更希望安装到当前目录，请省略 sudo：

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | bash

注意：此脚本会下载一个内置 ripgrep 的独立二进制文件。

选项 3：预编译二进制文件

从 GitHub 发布页面下载适合你平台的压缩包。每个压缩包都包含 layered-code 二进制文件和内置的 rg（ripgrep）二进制文件：

• macOS（Intel）：layered-code_Darwin_x86_64.tar.gz
• macOS（Apple Silicon）：layered-code_Darwin_arm64.tar.gz
• Linux（x86_64）：layered-code_Linux_x86_64.tar.gz
• Linux（ARM64）：layered-code_Linux_arm64.tar.gz
• Windows（x86_64）：layered-code_Windows_x86_64.zip
• Windows（ARM64）：layered-code_Windows_arm64.zip（通过仿真使用 x64 ripgrep 二进制文件）

设置步骤：

macOS/Linux：

1. 解压压缩包：tar -xzf layered-code_*.tar.gz
2. 为两个二进制文件添加可执行权限：chmod +x layered-code rg
3. 将两个二进制文件移至同一目录：
   • 用户级安装：mkdir -p ~/bin && mv layered-code rg ~/bin/
   • 系统范围安装：sudo mv layered-code rg /usr/local/bin/
4. 确保该位置已添加到 PATH，以便轻松访问

Windows：

1. 解压 zip 文件（其中包含 layered-code.exe 和 rg.exe）
2. 将两个可执行文件移至同一个方便访问的位置（例如 C:\Users\YourUsername\bin\）
3. 将该目录添加到 PATH 环境变量：
   • 在系统属性中打开“环境变量”
   • 将包含这两个可执行文件的目录添加到 PATH

重要提示： 为确保正常运行，请将 layered-code 和 rg（ripgrep）二进制文件放在同一目录中。

✨ 使用 Claude Desktop 快速开始

虽然计划通过 Ollama 支持开源模型，但目前 Claude Desktop 对 Layered Code 所依赖的 Model Context Protocol 提供了最佳支持。

1. 安装 Claude Desktop

2. 启用开发者模式：

   • 打开 Claude Desktop
   • 前往设置
   • 打开“Developer”选项卡
   • 如果尚未启用，请启用“Developer Mode”

3. 安装 layered-code：按照上方的安装说明操作，并记下二进制文件的路径

4. 配置 MCP 服务：

   • 打开 Claude Desktop 设置 → Developer → Edit Config
   • 在 claude_desktop_config.json 中添加：

在 Claude Desktop 中配置 MCP 服务

在 claude_desktop_config.json 中添加以下内容（位置：Settings → Developer → Edit Config），并根据你的安装方式和平台调整 command 路径：

平台/安装方式	"command" 值示例
macOS/Linux（Homebrew）	layered-code
macOS/Linux（手动/二进制文件）	/usr/local/bin/layered-code
Windows	C:\\Users\\YourUsername\\bin\\layered-code.exe

Windows 提示： "command" 值中请使用带双反斜杠的完整路径（\\）。

配置示例：

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "<see table above>",
      "args": ["mcp_server"]
    }
  }
}

5. 完全重启 Claude Desktop（Windows 可能需要对所有 Claude 后台任务执行“结束任务”）
6. 验证：检查 Claude 的工具菜单中是否有“layered-code”

🔧 可选：自定义应用目录

默认情况下，Layered Code 将 ~/LayeredApps 用作应用目录。若要使用自定义目录：

用于 MCP（Claude Desktop）： 在配置中添加 env 部分：

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "layered-code",
      "args": ["mcp_server"],
      "env": {
        "LAYERED_APPS_DIRECTORY": "~/MyCustomAppsFolder"
      }
    }
  }
}

用于 CLI： 在 shell 中设置 LAYERED_APPS_DIRECTORY 环境变量：

export LAYERED_APPS_DIRECTORY="~/MyCustomAppsFolder"
layered-code tool lc_apps_list

🔒 安全

Layered Code 在配置自定义应用目录时会确保安全：

• 为了安全起见，系统会验证路径，确保其位于用户的主目录中
• 允许使用相对路径，并将其解析为相对于用户主目录的路径

🖥️ CLI 用法

直接从命令行使用 layered-code：

# Start MCP server
layered-code mcp_server

# List apps
layered-code tool lc_apps_list

# Get version information
layered-code version
layered-code -v
layered-code --version

# Get help and usage information
layered-code help
layered-code -h
layered-code --help

可用命令：

• mcp_server - 启动用于与 Claude Desktop 集成的 Model Context Protocol 服务

• tool - 运行各种工具和实用程序（使用下方所示的子命令）

  文件管理工具：

  • tool lc_apps_list - 列出 ~/LayeredApps 目录中的所有可用应用
  • tool lc_file_list - 列出应用中的文件和目录，可选包含元数据（最大深度：10,000 层）
  • tool lc_text_search - 使用 ripgrep 搜索应用目录中文件的文本模式
  • tool lc_file_read - 读取应用目录中文件的内容
  • tool lc_file_write - 写入或创建应用目录中的文件
  • tool lc_file_edit - 通过查找并替换来编辑文件
  • tool lc_file_move - 移动或重命名应用目录中的文件
  • tool lc_file_delete - 删除应用目录中的文件
  • tool lc_file_copy - 复制应用目录中的文件
  • tool lc_folder_delete - 删除应用目录中的文件夹及其所有内容（破坏性操作）
  • tool lc_chrome_visit - 使用 Chrome 浏览器访问 URL，并在 JavaScript 加载后获取页面内容

  Vite 工具：

  • tool vite_app_create - 使用各种模板（React、Vue、Svelte 等）创建新的 Vite 应用

  Next.js 工具：

  • tool nextjs_app_create - 使用 TypeScript（默认）、JavaScript、Tailwind 或 App Router 模板创建新的 Next.js 应用
    • CLI 标志：--src-dir（使用 src 目录，默认值：true）、--import-alias（默认值：@/*）、--turbopack（默认值：true）
    • 示例：tool nextjs_app_create myapp typescript --src-dir --import-alias="~/"

  包管理器工具：

  • tool pnpm_install - 使用 pnpm（首选）或 npm 安装依赖
  • tool pnpm_add - 使用 pnpm（首选）或 npm 添加一个或多个包
    • 单个包：pnpm_add myapp express
    • 多个包：pnpm_add myapp express cors @types/node
  • tool pnpm_pm2 - 使用 PM2 管理 Node.js 进程
    • 命令：start <app>、stop <app|all>、restart <app|all>、delete <app|all>、list、logs [app] [flags]
    • 自动检测 package.json 中的 dev/start 脚本
    • 如果存在 ecosystem.config.js，则使用该文件
    • 如果 PM2 尚不可用，则自动安装
    • logs 命令默认包含 --nostream（显示最后 15 行后退出）
    • 可以传入其他标志，例如使用 logs myapp --lines 100 显示更多行

  JavaScript/TypeScript 工具：

  • tool lc_js_lint - 对 JavaScript/TypeScript 文件运行 ESLint 分析，可选自动修复
    • 在指定的应用目录中运行 ESLint，并以 JSON 格式返回结果
    • 用法：lc_js_lint <app_name> [--fix] [--config=<config_file>] <files...>
    • 选项：
      • --fix：自动修复可修复的问题
      • --config=<file>：使用指定的 ESLint 配置文件
      • --help、-h：显示帮助信息
    • 重要说明：
      • 文件必须使用相对路径（不允许绝对路径或 ..）
      • 配置文件必须是相对于应用目录的路径
      • 为确保安全，仅允许使用 --config 和 --fix 选项
    • 示例：
      • 单个文件：lc_js_lint myapp src/index.js
      • 检查并修复：lc_js_lint myapp --fix src/index.js src/app.js
      • 使用 glob 模式：lc_js_lint myapp "src/**/*.js" "tests/**/*.js"
      • 使用配置进行修复：lc_js_lint myapp --fix --config=.eslintrc.json src/index.js 提示词工具：
  • tool lc_prompt_list - 列出所有可用提示词及其数字 ID、名称、版本和描述
    • 仅显示每个提示词的最高版本
    • 使用 --help 获取更多信息
  • tool lc_prompt_read - 根据数字 ID 读取提示词的完整内容，可选指定版本
    • 重要：使用 MCP 的大模型应在每次对话开始时自动读取提示词 ID '1'（通用原则）
    • 示例（最新版本）：lc_prompt_read 1
    • 带版本的示例：lc_prompt_read 1:2
    • 使用 --help 查看详细语法和示例

  Git 工具：

  • tool git_status - 显示 git 仓库的工作树状态
  • tool git_diff - 显示提交之间、提交与工作树之间等的更改
  • tool git_commit - 使用暂存的更改创建新提交
  • tool git_log - 显示提交日志
  • tool git_branch - 列出、创建或删除分支
  • tool git_add - 将文件内容添加到暂存区
  • tool git_restore - 还原工作树文件
  • tool git_stash - 暂存脏工作目录中的更改
  • tool git_push - 更新远程引用及其关联对象
  • tool git_pull - 从其他仓库或本地分支获取并集成更改
  • tool git_init - 初始化新的 git 仓库

• version、-v、--version - 显示 layered-code 的当前版本

• help、-h、--help - 显示用法信息和可用命令

🏗️ 从源代码构建

从源代码构建 Layered Code：

# Clone the repository
git clone https://github.com/layered-flow/layered-code.git
cd layered-code

# Build with make (downloads ripgrep binaries automatically)
make build

# Or build for all platforms
make build-all

# Run tests
make test

# Verify installation
layered-code

🧪 运行测试

运行测试套件，确保一切正常：

# Run all tests
go test ./...

# Run tests with verbose output
go test -v ./...

🤝 参与贡献

我们对社区贡献的潜力感到振奋！虽然 Layered Code 目前正朝着 1.0 版本迈进，但我们正在专注于稳定核心功能和 API。在此阶段，我们欢迎你通过 GitHub Issues 分享想法和反馈，但暂不接受拉取请求，以便我们快速推进并进行必要的不兼容更改。

达到 1.0 版本且基础稳固后，我们将非常乐意接受社区的拉取请求。我们相信，这种专注的方式最终能为每个人带来更好的体验。

欢迎你：

• 提交 issue，分享想法和建议
• 报告遇到的错误
• 询问有关项目的问题
• 提供有关功能和文档的反馈

感谢你的理解以及对本项目的关注！🙏

📝 许可证

本项目采用 MIT License 授权，详情请参阅 LICENSE.md 文件。

第三方组件

本软件包含第三方组件。其许可条款请参阅 THIRD-PARTY-LICENSES.md。

Copyright (c) 2025 Layered Flow
https://www.layeredflow.ai/