copilot-toolbox-ts-tp/CLAUDE.md

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

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

// 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:

{
  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