GitHub Copilot Gemzy Project

This skill provides comprehensive instructions for developing and maintaining the Gemzy AI chat application, a full-stack project that integrates multiple LLM providers with intelligent model selection and file upload capabilities.

Project Architecture

Gemzy follows a client-server architecture with clear separation of concerns:

Backend Development Guidelines

Routing and Middleware Flow

All backend requests must flow through the established middleware chain:

1. `upload.middleware.js` - Handle file uploads with multer

2. `model.middleware.js` - Detect and select appropriate model

3. Controllers - Handle business logic

4. Services - Interface with external APIs

Model Detection Logic

The `detectModel` middleware uses Gemini to intelligently analyze prompts:

Service Layer Pattern

Always delegate API calls to service modules:

File Processing Pipeline

When handling file uploads:

1. Accept files via multer middleware

2. Detect file type (images vs PDFs)

3. For PDFs: use Google File API with state polling

4. Monitor processing state with 5-second intervals

5. Return appropriate response format

Response Formats

**Gemini responses** return JSON with structure:

```typescript

{

response: string,

imageDataSrc?: string,

model: string,

textWithPic?: boolean

}

```

**Groq responses** stream NDJSON format:

```typescript

// Delta chunks

{type: "delta", content: string}

// Metadata

{type: "meta", model: string}

```

Frontend Development Guidelines

Component Architecture

Follow the established Radix UI composition pattern:

```tsx

const Component = React.forwardRef<ElementRef, Props>(

({ className, ...props }, ref) => (

<Primitive.Component

ref={ref}

className={cn("base-styles", className)}

{...props}

/>

)

);

Component.displayName = "ComponentName";

```

UI Library Stack

Use the following libraries consistently:

Layout and Styling Patterns

**Dark Mode**: Apply dark mode styles consistently

```tsx

className="bg-white dark:bg-neutral-900 text-black dark:text-white"

// For SVG color switching

className="dark:invert"

```

**Color Palette**: Use neutral color scheme

**Conditional Styling**: Use template literals for state-based classes

```tsx

className={`${isOpen ? "w-60" : "w-14"} h-screen relative bg-neutral-900/85`}

```

State Management Patterns

Implement conditional event handlers based on component state:

```tsx

<div

onMouseEnter={!isOpen ? () => setIsHoverable(true) : undefined}

onMouseLeave={isHoverable ? () => setIsHoverable(false) : undefined}

>

```

Manage complex boolean state interactions:

Layout Components

Use `DarkRadialLayout` wrapper for consistent gradient backgrounds:

Development Workflow

Starting the Development Environment

Always run both servers concurrently during development:

```bash

Terminal 1 - Backend (port 3000)

cd geminiProject/backend

pnpm dev

Terminal 2 - Frontend (port 5173)

cd geminiProject/frontend

pnpm dev

```

Environment Configuration

Backend environment variables must be set in `src/config/.env`:

Package Management

Both projects use `pnpm` exclusively:

TypeScript Configuration

Projects use ES modules:

Key Dependencies

Backend Stack

Frontend Stack

Testing and Debugging

Backend Debugging

Monitor these aspects during development:

Frontend Debugging

Check these areas when troubleshooting:

File Upload Debugging

For file processing issues:

1. Verify file type detection in middleware

2. Check PDF processing state polling (5-second intervals)

3. Monitor Google File API state changes

4. Validate response format matches expected structure

Smart Model Selection

The backend implements intelligent model routing:

**Automatic Gemini Selection**:

**Model Switching Flow**:

1. Initial request reaches model detection middleware

2. Gemini analyzes prompt for generation intent

3. Middleware sets appropriate model in request context

4. Controller uses selected model for processing

5. Response format adapts to model type

Code Style Guidelines

TypeScript

React Components

CSS and Styling

Common Patterns to Follow

**Service Function Pattern**:

```typescript

export async function serviceFunction(params: ParamsType): Promise<ReturnType> {

const client = getConfiguredClient();

const result = await client.method(params);

return transformedResult;

}

```

**Middleware Pattern**:

```typescript

export async function middleware(req: Request, res: Response, next: NextFunction) {

// Processing logic

req.contextData = processedData;

next();

}

```

**Component Composition**:

```tsx

export function CompositeComponent() {

return (

<Primitive.Root>

<Primitive.Trigger />

<Primitive.Content>

<CustomChild />

</Primitive.Content>

</Primitive.Root>

);

}

```

Important Constraints

1. **Never bypass middleware**: All routes must use the established middleware chain

2. **Respect model selection**: Don't override automatic model detection without reason

3. **Maintain response formats**: Keep JSON and NDJSON patterns consistent

4. **Use established patterns**: Follow service layer and composition patterns

5. **Dark mode required**: All new UI must support dark mode

6. **Type safety**: No `any` types without explicit justification

7. **Package manager**: Always use `pnpm`, never `npm` or `yarn`