Instructions for working with the Gemzy full-stack AI chat application integrating multiple LLM providers (Google Gemini and Groq/Llama) with file upload capabilities using React TypeScript frontend and Express.js backend.
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.
Gemzy follows a client-server architecture with clear separation of concerns:
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
The `detectModel` middleware uses Gemini to intelligently analyze prompts:
Always delegate API calls to service modules:
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
**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}
```
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";
```
Use the following libraries consistently:
**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`}
```
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:
Use `DarkRadialLayout` wrapper for consistent gradient backgrounds:
Always run both servers concurrently during development:
```bash
cd geminiProject/backend
pnpm dev
cd geminiProject/frontend
pnpm dev
```
Backend environment variables must be set in `src/config/.env`:
Both projects use `pnpm` exclusively:
Projects use ES modules:
Monitor these aspects during development:
Check these areas when troubleshooting:
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
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
**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>
);
}
```
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`
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/github-copilot-gemzy-project/raw