# 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