Coze Studio 前端架构解析React 18 Rsbuild Rush 的 AI Agent 开发平台工程化实践【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studioCoze Studio 是一个面向 AI Agent 的一站式开发平台其前端基于 React 18 与 TypeScript 构建采用 Rush PNPM 管理的 Monorepo 架构并通过 Rsbuild 完成高效构建。本文以 frontend/README.md 为核心结合仓库内真实源码与配置系统讲解其技术选型、目录组织、环境搭建、开发调试与生产构建全流程帮助读者掌握这套大型 AI 应用前端的工程化方案与核心模块设计思路。项目定位与核心结论Coze Studio 前端是典型的大型 Monorepo 工程一个主应用apps/coze-studio 十个左右功能包packages/* 一套共享配置体系config/* 基础设施工具infra/*。它支撑的是Agent 创建、调试、发布全链路可视化 IDE覆盖 Agent IDE、工作流画布、知识库、插件市场、发布流程等核心业务。从仓库实际代码看几个关键工程决策贯穿始终Rush 统一管理多包依赖与构建顺序保证 Monorepo 中数百个包仅packages/workflow就包含 1600 TS/TSX 文件可增量、并行、可复现地构建Rsbuild 作为构建内核底层为 Rspack承担 dev server 代理、编译、产物分包等职责React 18 React Router v6 Zustand构成应用运行时骨架入口通过createBrowserRouter定义全站路由。技术栈总览根据 frontend/README.md前端核心技术栈如下层级技术选型说明框架React 18 TypeScript应用运行时与类型保障apps/coze-studio中react: ~18.2.0构建工具Rsbuild底层 Rspack开发服务器、代理、生产构建配置见 rsbuild.config.ts包管理Rush PNPMMonorepo 依赖管理与工作区协议workspace:*路由React Router v6createBrowserRouter集中式路由状态管理Zustand轻量全局状态UI 组件coze-arch/coze-design自研设计系统组件库国际化coze-arch/i18n中英文双语初始化从 package.json 可以看到所有coze-*工作区包均以workspace:*版本引用说明这些包由 Rush 统一安装与链接而coze-arch/coze-design与coze-arch/semi-theme-hand01使用固定版本0.0.6-alpha.346d77是少数外部锁定版本。Monorepo 目录结构详解README 给出了完整的目录树与仓库实际结构一致这里逐层拆解其职责frontend/ ├── apps/ # 应用层 │ └── coze-studio/ # 主应用可独立 dev / build / test ├── packages/ # 核心功能包 │ ├── agent-ide/ # AI Agent 集成开发环境1318 文件 │ ├── arch/ # 架构基础设施1507 文件 │ ├── common/ # 公共组件与工具1524 文件 │ ├── components/ # UI 组件库918 文件 │ ├── data/ # 数据层知识库/记忆等1220 文件 │ ├── devops/ # DevOps 工具199 文件 │ ├── foundation/ # 基础能力289 文件 │ ├── project-ide/ # 项目级开发环境610 文件 │ ├── studio/ # Studio 核心功能1018 文件 │ └── workflow/ # 工作流引擎3582 文件最大包 ├── config/ # 共享工程配置 │ ├── eslint-config/ # ESLint 规则集 │ ├── rsbuild-config/ # 构建配置基座 │ ├── ts-config/ # TypeScript 配置 │ ├── postcss-config/ # PostCSS 配置 │ ├── stylelint-config/ # 样式规范 │ ├── tailwind-config/ # Tailwind 主题与插件 │ └── vitest-config/ # 测试配置基座 └── infra/ # 基础设施 ├── idl/ # 接口定义语言thrift/proto工具 ├── plugins/ # 构建插件 └── utils/ # 工具库这种应用层 - 功能包 - 配置 - 基础设施四层结构让团队可以独立演进各业务域如工作流引擎单独一个包含 1606 个 TS 文件同时通过共享配置保证跨包的一致性。快速开始环境要求与依赖安装环境前置条件README 明确要求的版本以仓库实际为准Node.js 21注意生产 Dockerfile 使用node:22-alpine见 frontend/Dockerfile本地开发与 CI 构建均满足 ≥21 即可PNPM 8.15.8Rush 5.147.1Dockerfile 中通过npm install -g microsoft/rush安装安装依赖在仓库根目录执行rush install # 依据 lockfile 精确安装 rush update # 更新依赖并重写 lockfilerush install依赖仓库根部的 rush.json 描述项目清单而 Rush 的公共锁文件位于 common/config/rush 下。Dockerfile 中的安装步骤先复制rush.json、common/、scripts/再执行rush install也印证了 Rush 对这几个目录的强依赖。启动开发服务器cd frontend/apps/coze-studio npm run dev # 等价写法rushx devdev脚本的实际内容见 package.json是dev: IS_OPEN_SOURCEtrue CUSTOM_VERSIONrelease rsbuild dev即通过环境变量IS_OPEN_SOURCEtrue与CUSTOM_VERSIONrelease切换开源构建模式后交给 Rsbuild。开发代理的关键细节 rsbuild.config.ts 将/api与/v1两个前缀的请求代理到后端const API_PROXY_TARGET http://localhost:${process.env.WEB_SERVER_PORT || 8888}/; server: { strictPort: true, proxy: [ { context: [/api], target: API_PROXY_TARGET, secure: false, changeOrigin: true }, { context: [/v1], target: API_PROXY_TARGET, secure: false, changeOrigin: true }, ], },这意味着本地调试时后端服务默认监听 8888 端口可用环境变量WEB_SERVER_PORT覆盖前端请求/api/*、/v1/*会被透明转发前端代码中无需写死后端地址。生产构建cd frontend/apps/coze-studio npm run build # 或 rushx build构建脚本为IS_OPEN_SOURCEtrue rsbuild build产物输出到dist/。chunk 分包策略值得注意rsbuild.config.tsperformance: { chunkSplit: { strategy: split-by-size, minSize: 3_000_000, maxSize: 6_000_000 }, },即以 3MB6MB 的粒度按体积切分 chunk兼顾首屏加载与缓存利用率——这是针对大型 IDE 类应用依赖众多、单包体积大的典型优化。主应用入口与运行时架构入口初始化链路src/index.tsx 是应用真正的入口启动顺序清晰拉取特性开关pullFeatureFlags初始化功能开关4 秒超时兜底初始化国际化从localStorage读取i18next未设置时按IS_OVERSEA决定en或zh-CNsrc/index.tsx动态加载 mdbox 样式dynamicImportMdBoxStyleReact 18 挂载createRoot($root).render(App /)。应用骨架与路由src/app.tsx 以Suspense包裹RouterProvider加载态使用coze-design的Spin组件配合react-error-boundary处理渲染错误。全站路由集中在 src/routes/index.tsx采用createBrowserRouter并通过loader 元数据驱动布局行为例如hasSider是否显示侧边栏requireAuth是否需要登录鉴权subMenu/menuKey侧边栏菜单与高亮项。路由覆盖的主要业务域与 README 的 Core Modules 一一对应路由路径业务模块对应包/space/:space_id/develop项目开发coze-project-ide/main/space/:space_id/bot/:bot_idAgent IDE 与发布coze-agent-ide/*/space/:space_id/project-ide/:project_id项目级 IDEcoze-project-ide/main/space/:space_id/library、knowledge、database资源库/知识库/数据库coze-studio/*、coze-foundation/*/space/:space_id/plugin/:plugin_id插件与工具配置coze-studio/bot-plugin-store/work_flow工作流coze-workflow/*/explore/plugin、/explore/template插件/模板市场coze-community/explore/sign、/oauth/confirm登录与 OAuth 授权coze-foundation/*值得注意所有页面组件通过./async-components异步加载配合Suspense实现路由级代码分割避免首屏一次性加载整个 IDE 体积。布局与初始化src/layout.tsx 仅做两件事调用useAppInit()完成全局初始化再渲染GlobalLayout来自coze-foundation/global-adapter。应用外壳登录态、空间切换、侧边栏由 foundation 包统一提供业务包只关心自身页面这是 Monorepo 下基础能力下沉的典型实践。核心模块Agent IDE、arch 层与工作流引擎Agent IDEagent-ideAI Agent 的集成开发环境包含prompt提示词编辑器tool工具配置管理仓库中pages/plugin/tool/目录即工具配置页面支持 plugin-mock-set 的模拟参数设置workflow工作流集成。架构层arch提供跨业务复用的架构能力bot-api接口层封装bot-hooksReact Hooks 库foundation-sdk基础 SDKi18n国际化支持入口处initI18nInstance即来源于此bot-flags特性开关入口处pullFeatureFlags来源于此web-contextWeb 上下文工具路由 loader 中的BaseEnum常量即来自此包。工作流引擎workflowpackages/workflow是体量最大的包包含fabric-canvas画布渲染引擎nodes节点组件库sdk工作流 SDKplayground调试运行环境。从包体积3582 个文件其中 1377 个 tsx可以推断工作流编排是 Coze Studio 最核心也最复杂的可视化能力与后端 domain/workflow 的 250 内部文件形成前后端呼应。数据层data覆盖知识库knowledge、记忆系统memory、通用数据处理common为 Agent 提供上下文与长期记忆能力对应后端 backend/application/knowledge 与 backend/application/memory 的服务域。构建与配置体系详解Rsbuild 配置的三层协作主应用 rsbuild.config.ts 并非从零编写而是调用defineConfig来自coze-arch/rsbuild-configfrontend/config/rsbuild-config实现共享基座 应用覆盖的配置模式。关键配置点HTML 模板标题为扣子 Studio模板为 index.htmlfavicon 使用assets/favicon.pngPostCSS注入tailwindcss配置见 tailwind.config.tsRspack 规则通过addRules接入coze-arch/import-watch-loaderCSS/LESS/JSX/TSX 源码热更新监听并设置watchOptions.poll以适配部分文件系统编译范围source.include显式包含../../packages与infra/flags-devtool并特别纳入marked、dagrejs、tanstack等含 ES2022 私有方法语法的第三方包装饰器支持decorators.version: legacy兼容 inversify 的injectable()/inject装饰器服务化注入在 arch 层被广泛使用路径别名coze-arch/foundation-sdk统一解析到coze-foundation/foundation-sdk避免双 SDK 实例。环境变量注入source.define段在编译期注入运行时常量rsbuild.config.tsprocess.env.IS_REACT18: JSON.stringify(true), process.env.ARCOSITE_SDK_REGION: JSON.stringify(GLOBAL_ENVS.IS_OVERSEA ? VA : CN), process.env.ARCOSITE_SDK_SCOPE: JSON.stringify(GLOBAL_ENVS.IS_RELEASE_VERSION ? PUBLIC : INSIDE), process.env.TARO_ENV: JSON.stringify(h5),其中GLOBAL_ENVS来自coze-arch/bot-env用于区分海外版VA 区域与国内版CN 区域等运行形态。质量保障Lint、类型与测试README 的 Development Standards 强调ESLint Prettier 格式化、TypeScript strict 模式、单元测试覆盖要求。仓库中对应的落点Lint主应用脚本lint: eslint ./ --cache --quiet规则集由coze-arch/eslint-configfrontend/config/eslint-config统一提供TypeScriptcoze-arch/ts-configfrontend/config/ts-config承载 strict 配置各包引用共享测试主应用 vitest.config.ts 仅两行——调用coze-arch/vitest-config的defineConfig并指定preset: web脚本test: vitest --run --passWithNoTeststest:cov追加--coveragev8 覆盖率样式规范coze-arch/stylelint-config与coze-arch/postcss-config分别治理样式与 CSS 编译。这种规则集中在 config 目录、各包零配置接入的方式是大型 Monorepo 保持工程质量一致性的关键。容器化部署与生产环境frontend/Dockerfile 展示了完整的两阶段构建构建阶段node:22-alpine安装microsoft/rush→ 复制rush.json、frontend/、common/、scripts/→ 执行rush install→rush build --to coze-studio/app--to只构建目标应用及其依赖体现 Rush 增量构建能力运行阶段nginx:1.25-alpine将dist/拷贝到 nginx 静态目录EXPOSE 8888对外提供服务。同时 Dockerfile 内置了面向国内环境的加速配置阿里云 apk 镜像、registry.npmmirror.comnpm 镜像并做dos2unix换行转换保证 shell 脚本在容器内可执行。结合开发代理默认的 8888 端口可以看出整个平台的统一对外端口是 8888后端默认监听该端口前端 nginx 也暴露该端口前后端通过同一端口 路径前缀/api、/v1区分流量。常见问题与调试技巧开发时后端端口不同通过环境变量WEB_SERVER_PORTport启动rsbuild dev代理目标会随之变化本地无后端如何预览npm run preview可直接预览dist/产物rsbuild preview只构建主应用使用rush build --to coze-studio/appRush 会只编译该应用及其依赖链节省大量时间测试不需要每个包都配 vitest直接复用coze-arch/vitest-config传入preset: web即可获得一致的测试环境国际化语言切换清除localStorage中i18next字段可回到按IS_OVERSEA自动判断的语言也可手动设en/zh-CN。总结Coze Studio 前端是React 18 运行时 Rsbuild 构建 Rush 治理 分层配置体系的组合典范README 描绘的目录骨架在实际代码中均有完整落地——主应用承担路由与装配十个功能包按业务域自治共享配置保证数百个包的工程质量统一。对希望搭建大型 AI 应用前端的团队而言其 Monorepo 组织方式、基于 loader 的路由权限设计、以及共享配置基座 应用覆盖的构建模式都是可以直接借鉴的工程范式。Apache License 2.0 的开源协议见仓库根目录 LICENSE-APACHE也意味着这套架构可以放心地在合规前提下学习与复用。【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考