From 228567bdcbd5715531f58524790a00592e773a89 Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 14 Oct 2024 02:45:26 +0000 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=20cn=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README_CN.md | 195 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 README_CN.md diff --git a/README_CN.md b/README_CN.md new file mode 100644 index 0000000..04b41a5 --- /dev/null +++ b/README_CN.md @@ -0,0 +1,195 @@ +# Bolt 开源代码库 + +![Bolt Open Source Codebase](./public/social_preview_index.jpg) + +> 欢迎来到 **Bolt** 开源代码库! 本仓库包含了一个使用 bolt.new 核心组件的简单示例应用,旨在帮助你开始构建基于 StackBlitz 的 **WebContainer API** 驱动的 **AI 驱动软件开发工具**。 + +### 为什么选择 Bolt + WebContainer API 进行开发 + +通过使用 Bolt + WebContainer API 构建,你可以创建基于浏览器的应用程序,让用户直接在浏览器中**提示、运行、编辑和部署**全栈 Web 应用,无需虚拟机。借助 WebContainer API,你可以构建应用程序,让 AI 直接访问和完全控制用户浏览器标签页内的 **Node.js 服务器**、**文件系统**、**包管理器**和**开发终端**。这种强大的组合允许你创建一种新类型的开发工具,支持所有主流 JavaScript 库和 Node 包,无需远程环境或本地安装即可开箱即用。 + +### Bolt(本仓库)与 [Bolt.new](https://bolt.new) 有什么区别? + +- **Bolt.new**: 这是 StackBlitz 的**商业产品** - 一个托管的、基于浏览器的 AI 开发工具,使用户能够直接在浏览器中提、运行、编辑和部署全栈 Web 应用程序。它基于 [Bolt 开源仓库](https://github.com/stackblitz/bolt.new) 构建,并由 StackBlitz 的 **WebContainer API** 提供支持。 + +- **Bolt(本仓库)**: 这个开源仓库提供了用于构建 **Bolt.new** 的核心组件。该仓库包含 Bolt 的 UI 界面以及使用 [Remix Run](https://remix.run/) 构建的服务器组件。通过利用这个仓库和 StackBlitz 的 **WebContainer API**,你可以创建自己的 AI 驱动的开发工具和完全在浏览器中运行的全栈应用程序。 + +# 开始使用 Bolt 进行开发 + +Bolt 将 AI 的能力与沙盒化的开发环境相结合,创造了一种协作体验,让代码可以由助手和程序员共同开发。Bolt 结合了 [WebContainer API](https://webcontainers.io/api)、[Claude Sonnet 3.5](https://www.anthropic.com/news/claude-3-5-sonnet)、[Remix](https://remix.run/) 和 [AI SDK](https://sdk.vercel.ai/)。 + +### WebContainer API + +Bolt 使用 [WebContainers](https://webcontainers.io/) 在浏览器中运行生成的代码。WebContainers 为 Bolt 提供了一个使用 [WebContainer API](https://webcontainers.io/api) 的全栈沙盒环境。WebContainers 直接在浏览器中运行全栈应用程序,无需云托管 AI 代理的成本和安全隐患。WebContainers 是交互式和可编辑的,使 Bolt 的 AI 能够运行码并理解用户的任何更改。 + +[WebContainer API](https://webcontainers.io) 对个人和开源使用是免费的。如果你正在构建商业用途的应用程序,可以在[这里](https://stackblitz.com/pricing#webcontainer-api)了解更多关于我们的 WebContainer API 商业使用定价。 + +### Remix 应用 + +Bolt 使用 [Remix](https://remix.run/) 构建,并使用 [CloudFlare Pages](https://pages.cloudflare.com/) 和 [CloudFlare Workers](https://workers.cloudflare.com/) 部署。 + +### AI SDK 集成 + +Bolt 使用 [AI SDK](https://github.com/vercel/ai) 与 AI 模型集成。目前,Bolt 支持使用 Anthropic 的 Claude Sonnet 3.5。 +你可以从 [Anthropic API 控制台](https://console.anthropic.com/) 获取 API 密钥以在 Bolt 中使用。 +看看 [Bolt 如何使用 AI SDK](https://github.com/stackblitz/bolt.new/tree/main/app/lib/.server/llm) + +## 先决条件 + +在开始之前,请确保已安装以下内容: + +- Node.js (v20.15.1) +- pnpm (v9.4.0) + +## 设置 + +1. 克隆仓库(如果你还没有): + +```bash +git clone https://github.com/stackblitz/bolt.new.git +``` + +2. 安装依赖: + +```bash +pnpm install +``` + +3. 在根目录创建一个 `.env.local` 文件,并添加你的 Anthropic API 密钥: + +ANTHROPIC_API_KEY=XXX + + +可选地,你可以设置调试级别: + +VITE_LOG_LEVEL=debug + + +**重要**: 永不要将你的 `.env.local` 文件提交到版本控制。它已经包含在 .gitignore 中。 + +## 项目结构 + +以下是 Bolt 项目的详细目录结构: + +``` +bolt.new/ +├── app/ +│ ├── components/ +│ │ ├── chat/ # 聊天相关组件 +│ │ ├── editor/ # 编辑器相关组件 +│ │ ├── header/ # 头部组件 +│ │ ├── sidebar/ # 侧边栏组件 +│ │ ├── ui/ # 通用UI组件 +│ │ └── workbench/ # 工作台组件 +│ ├── lib/ +│ │ ├── .server/ +│ │ │ └── llm/ # 语言模型相关代码 +│ │ │ ├── api-key.ts # API密钥处理 +│ │ │ ├── base-url.ts # 基础URL配置 +│ │ │ ├── constants.ts # 常量定义 +│ │ │ ├── model.ts # 模型配置 +│ │ │ ├── prompts.ts # 提示词模板 +│ │ │ ├── stream-text.ts # 文本流处理 +│ │ │ └── switchable-stream.ts # 可切换流实现 +│ │ ├── ai/ # AI 相关功能 +│ │ ├── hooks/ # React hooks +│ │ ├── persistence/ # 数据持久化 +│ │ ├── runtime/ # 运行时相关代码 +│ │ └── stores/ # 状态管理 +│ ├── routes/ # Remix 路由 +│ ├── styles/ +│ │ ├── components/ # 组件特定样式 +│ │ └── index.scss # 主样式文件 +│ └── utils/ # 工具函数 +├── public/ # 静态资源 +│ └── icons/ # 图标文件 +├── types/ # TypeScript 类型定义 +├── .editorconfig # 编辑器配置 +├── .env.example # 环境变量示例 +├── .eslintignore # ESLint 忽略配置 +├── .gitignore # Git 忽略配置 +├── .prettierignore # Prettier 忽略配置 +├── .prettierrc # Prettier 配置 +├── eslint.config.mjs # ESLint 配置 +├── package.json # 项目依赖和脚本 +├── pnpm-lock.yaml # pnpm 锁文件 +├── README.md # 英文说明文档 +├── README_CN.md # 中文说明文档 +├── tsconfig.json # TypeScript 配置 +├── uno.config.ts # UnoCSS 配置 +└── vite.config.ts # Vite 配置文件 + + +主要目录和文件说明: + +- `app/`: 包含应用程序的主要源代码。 + - `components/`: 包含所有 React 组件,按功能分类。 + - `lib/`: 包含核心库和工具。 + - `.server/`: 包含服务器端代码。 + - `llm/`: 语言模型相关代码。 + - `api-key.ts`: 处理 API 密钥的逻辑。 + - `base-url.ts`: 配置基础 URL。 + - `constants.ts`: 定义常量。 + - `model.ts`: 配置和初始化语言模型。 + - `prompts.ts`: 定义系统提示和其他提示模板。 + - `stream-text.ts`: 处理文本流的逻辑。 + - `switchable-stream.ts`: 实现可切换的流。 + - `ai/`: 包含 AI 相关功能。 + - `hooks/`: 包含自定义 React hooks。 + - `persistence/`: 包含数据持久化相关代码。 + - `runtime/`: 包含运行时相关代码。 + - `stores/`: 包含状态管理相关代码。 + - `routes/`: 包含 Remix 路由定义。 + - `styles/`: 包含全局样式文件和组件特定样式。 + - `utils/`: 包含通用工具函数。 +- `public/`: 包含静态资源文件,如图标。 +- `types/`: 包含 TypeScript 类型定义。 +- 根目录下的配置文件: + - `.editorconfig`: 编辑器配置文件。 + - `.env.example`: 环境变量示例文件。 + - `.eslintignore` 和 `eslint.config.mjs`: ESLint 相关配置。 + - `.gitignore`: Git 忽略文件配置。 + - `.prettierignore` 和 `.prettierrc`: Prettier 代码格式化配置。 + - `package.json`: 项目依赖和脚本定义。 + - `tsconfig.json`: TypeScript 配置文件。 + - `uno.config.ts`: UnoCSS 配置文件。 + - `vite.config.ts`: Vite 构建工具的配置文件。 + +## 可用脚本 + +- `pnpm run dev`: 启动开发服务器。 +- `pnpm run build`: 构建项目。 +- `pnpm run start`: 使用 Wrangler Pages 在本地运行构建的应用程序。此脚本使用 `bindings.sh` 设置必要的绑定,因此你不必重复环境变量。 +- `pnpm run preview`: 构建项目然后在本地启动,用于测试生产构建。注意,HTTP 流目前无法按预期与 `wrangler pages dev` 一起工作。 +- `pnpm test`: 使用 Vitest 运行测试套件。 +- `pnpm run typecheck`: 运行 TypeScript 类型检查。 +- `pnpm run typegen`: 使用 Wrangler 生成 TypeScript 类型。 +- `pnpm run deploy`: 构建项目并将其部署到 Cloudflare Pages。 + +## 开发 + +要启动开发服务器: + +```bash +pnpm run dev +``` + +这将启动 Remix Vite 开发服务器。 + +## 测试 + +运行测试套件: + +```bash +pnpm test +``` + +## 部署 + +要将应用程序部署到 Cloudflare Pages: + +```bash +pnpm run deploy +``` + +确保你拥有必要的权限,并且 Wrangler 已正确配置为你的 Cloudflare 账户。