CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

# Install dependencies
pnpm install

# Development server with hot reload
pnpm dev

# Build for production
pnpm build

# Type checking
pnpm type-check

# Lint and fix code
pnpm lint

# Format code
pnpm format

# Run unit tests
pnpm test:unit

Project Architecture

This is a Multi-Agent Coordination Platform (多智能体协同平台) built with Vue 3, TypeScript, and Vite. The application enables users to create and manage AI agents with specialized roles and coordinate them to complete complex tasks through visual workflows.

Tech Stack

Vue 3 with Composition API and TypeScript
Vite for build tooling and development
Element Plus for UI components
Pinia for state management
Tailwind CSS for styling
Vue Router for routing (minimal usage)
JSPlumb for visual workflow connections
Axios for API requests with custom interceptors

Key Architecture Components

State Management (`src/stores/modules/agents.ts`)

Central store managing:

Agent definitions with profiles and icons
Task workflow data structures (IRawStepTask, TaskProcess)
Search functionality and current task state
Raw plan responses with UUID generation for tasks

Request Layer (`src/utils/request.ts`)

Custom Axios wrapper with:

Proxy configuration for /api -> http://localhost:8000
Response interceptors for error handling
useRequest hook for reactive data fetching
Integrated Element Plus notifications

Component Structure

Layout System (src/layout/): Main application layout with Header and Main sections
Task Templates (src/layout/components/Main/TaskTemplate/): Different task types including AgentRepo, TaskSyllabus, and TaskResult
Visual Workflow: JSPlumb integration for drag-and-drop agent coordination flows

Icon System

SVG icons stored in src/assets/icons/
Custom SvgIcon component with vite-plugin-svg-icons
Icon categories include specialist roles (doctor, engineer, researcher, etc.)

Build Configuration

Vite (`vite.config.ts`)

Element Plus auto-import and component resolution
SVG icon caching with custom symbol IDs
Proxy setup for API requests to backend
Path aliases: @/ maps to src/

Docker Deployment

Multi-stage build: Node.js build + Caddy web server
API proxy configured via Caddyfile
Environment variable support for different deployment modes

Data Models

Key interfaces for the agent coordination system:

Agent: Name, Profile, Icon
IRawStepTask: Individual task steps with agent selection and inputs
TaskProcess: Action descriptions with important inputs
IRichText: Template-based content formatting with style support

Development Notes

Uses pnpm as package manager (required by package.json)
Node version constraint: ^20.19.0 or >=22.12.0
Dark theme enabled by default in App.vue
Auto-imports configured for Vue APIs
No traditional Vue routes - uses component-based navigation

3.1 KiB Raw Permalink Blame History