88 lines
2.4 KiB
Markdown
88 lines
2.4 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
Copilot Toolbox is a React + TypeScript + Vite frontend template for building modern AI-powered applications. Integrates Dify AI, CopilotKit with Ant Design and Tailwind CSS.
|
|
|
|
**This is a template project - all development must extend this project, not create new repositories.**
|
|
|
|
## Tech Stack
|
|
|
|
- React 18 + TypeScript + Vite 6
|
|
- Ant Design 5.x (UI components)
|
|
- Tailwind CSS 4.x + Less (styling)
|
|
- React Router DOM 6.x (Hash mode routing)
|
|
- @copilotkit/react-core, @ag-ui/client, @shangzy/ag-ui-dify (AI integration)
|
|
|
|
## Directory Conventions
|
|
|
|
| Type | Path Pattern | Example |
|
|
|------|--------------|---------|
|
|
| Pages | `src/pages/[name]/index.tsx` | `src/pages/home/index.tsx` |
|
|
| API | `src/api/[name].ts` | `src/api/user.ts` |
|
|
| Components | `src/components/[name]/index.tsx` | `src/components/Header/index.tsx` |
|
|
| Utils | `src/utils/[name].ts` | `src/utils/cacheUtil.ts` |
|
|
|
|
- Use `@/` alias for imports (configured in vite.config.ts)
|
|
- TypeScript strict mode enabled
|
|
- Tailwind CSS for styling, Ant Design for components
|
|
|
|
## Common Commands
|
|
|
|
```bash
|
|
pnpm install # Install dependencies
|
|
pnpm dev # Dev server (port 5173)
|
|
pnpm build # Production build
|
|
pnpm preview # Preview production build (port 3000)
|
|
```
|
|
|
|
## Environment Variables
|
|
|
|
All API base paths use proxy prefixes. Set in `.env.development` or `.env.production`:
|
|
|
|
```
|
|
VITE_API_BASE_AI=/langwell-api/langwell-ai-server
|
|
VITE_API_BASE_DOC=/langwell-api/langwell-doc-server
|
|
VITE_API_BASE_LAMP=/lamp-api
|
|
VITE_AI_API_BASE=/v1
|
|
```
|
|
|
|
## API Pattern
|
|
|
|
```typescript
|
|
// src/api/[name].ts
|
|
export function getData(params: { id: string }) {
|
|
return fetch(`${import.meta.env.VITE_API_BASE_AI}/endpoint`, {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
}).then(res => res.json())
|
|
}
|
|
```
|
|
|
|
## Routing
|
|
|
|
Routes defined in `src/router/index.tsx` using lazy loading:
|
|
|
|
```typescript
|
|
{
|
|
path: '/page-name',
|
|
element: LazyLoad(lazy(() => import('@/pages/page-name')))
|
|
}
|
|
```
|
|
|
|
## Adding New Features
|
|
|
|
1. Create page: `src/pages/[name]/index.tsx`
|
|
2. Create API: `src/api/[name].ts`
|
|
3. Add route: `src/router/index.tsx`
|
|
4. Use `@/` alias for imports
|
|
|
|
## Restrictions
|
|
|
|
- Do NOT create new repositories - extend this project
|
|
- Do NOT remove CLAUDE.md
|
|
- Use `@/` alias, not relative paths
|
|
- TypeScript strict mode cannot be disabled
|