coze_studio/frontend

Coze Studio Frontend

This is the frontend project of Coze Studio, an AI Agent development platform built with monorepo architecture, based on React 18 and modern frontend technology stack.

🏗️ Project Architecture

Core Technology Stack

• Framework: React 18 + TypeScript
• Build Tool: Rsbuild
• Package Manager: Rush + PNPM
• Routing: React Router v6
• State Management: Zustand
• UI Components: @coze-arch/coze-design
• Internationalization: @coze-arch/i18n

Directory Structure

frontend/
├── apps/                    # Application layer
│   └── coze-studio/        # Main application
├── packages/               # Core packages
│   ├── agent-ide/         # AI Agent development environment
│   ├── arch/              # Architecture infrastructure
│   ├── common/            # Common components and utilities
│   ├── components/        # UI component library
│   ├── data/              # Data layer
│   ├── devops/            # DevOps tools
│   ├── foundation/        # Foundation infrastructure
│   ├── project-ide/       # Project development environment
│   ├── studio/            # Studio core features
│   └── workflow/          # Workflow engine
├── config/                # Configuration files
│   ├── eslint-config/     # ESLint configuration
│   ├── rsbuild-config/    # Rsbuild build configuration
│   ├── ts-config/         # TypeScript configuration
│   ├── postcss-config/    # PostCSS configuration
│   ├── stylelint-config/  # Stylelint configuration
│   ├── tailwind-config/   # Tailwind CSS configuration
│   └── vitest-config/     # Vitest testing configuration
└── infra/                 # Infrastructure tools
    ├── idl/              # Interface Definition Language tools
    ├── plugins/          # Build plugins
    └── utils/            # Utility libraries

🚀 Quick Start

Prerequisites

• Node.js >= 21
• PNPM 8.15.8
• Rush 5.147.1

Install Dependencies

# Run in project root directory
rush install
# update
rush update

Development Mode

# Start development server
cd apps/coze-studio
npm run dev
# or use rushx
rushx dev

Production Build

# Build application
cd apps/coze-studio
npm run build
# or use rushx
rushx build

📦 Core Modules

Agent IDE

• agent-ide: AI Agent integrated development environment
• prompt: Prompt editor
• tool: Tool configuration management
• workflow: Workflow integration

Architecture Layer (arch)

• bot-api: API interface layer
• bot-hooks: React Hooks library
• foundation-sdk: Foundation SDK
• i18n: Internationalization support
• bot-flags: Feature flags management
• web-context: Web context utilities

Workflow Engine (workflow)

• fabric-canvas: Canvas rendering engine
• nodes: Node component library
• sdk: Workflow SDK
• playground: Debug runtime environment

Data Layer (data)

• knowledge: Knowledge base management
• memory: Memory system
• common: Common data processing

🔧 Development Standards

Code Quality

• Code formatting with ESLint + Prettier
• TypeScript strict mode
• Unit test coverage requirements
• Team-based tier management (level-1 to level-4)

Team Collaboration

• Rush-based monorepo management
• Workspace dependency management
• Unified build and release process

📄 License

Apache License 2.0