Updated documentations and agent instructions

Author: IBJunior

.github/copilot-instructions.md

@@ -50,6 +50,49 @@ pnpm prisma:migrate   # Create new migrations
 - **Message accumulation**: Frontend concatenates text chunks by message ID for smooth UX
 - **Tool approval flow**: Uses Command objects with `resume` action instead of regular inputs
 
+## File Upload & Storage
+
+### MinIO Setup (Development)
+
+- **S3-compatible object storage** runs in Docker alongside Postgres
+- **Bucket**: `uploads` (auto-created on startup, public download access)
+- **Web Console**: http://localhost:9001 (credentials: minioadmin/minioadmin)
+- **S3 API**: http://localhost:9000
+
+### Supported File Types
+
+- **Images**: PNG, JPEG (max 5MB)
+- **Documents**: PDF (max 10MB)
+- **Text**: Markdown, Plain text (max 2MB)
+
+### Production Migration
+
+To switch to AWS S3, Cloudflare R2, or other S3-compatible storage:
+
+1. Update `.env` variables:
+
+   ```bash
+   S3_ENDPOINT=  # Empty for AWS S3, or your provider's endpoint
+   S3_ACCESS_KEY_ID=your_production_key
+   S3_SECRET_ACCESS_KEY=your_production_secret
+   S3_FORCE_PATH_STYLE=false  # false for AWS S3/R2
+   ```
+
+2. No code changes required - AWS SDK handles the rest!
+
+### File Upload Flow
+
+1. User selects files in `MessageInput` component
+2. Files uploaded to MinIO via `/api/agent/upload` endpoint
+3. File metadata (URL, key, name, type, size) stored in message options
+4. Files can be passed to agent for multimodal processing
+
+### Storage Libraries
+
+- `@aws-sdk/client-s3` - S3 client (works with MinIO + AWS S3)
+- `@aws-sdk/lib-storage` - Multipart uploads for large files
+- Storage utilities in `src/lib/storage/`
+
 ### Database Schema Specifics
 
 - `MCPServer` model supports both stdio and http MCP server types with conditional fields

README.md

@@ -40,6 +40,18 @@ _Complete agent workflow: user input → tool approval → execution → streami
 - Thread-based organization
 - Seamless resume across sessions
 
+### **Multimodal File Uploads**
+
+<div align="center">
+  <img src="docs/images/file-upload.gif" alt="File upload" width="600" />
+  <p><em>Tool approval dialog with detailed parameter inspection</em></p>
+</div>
+
+- Upload images, PDFs, and text files with messages
+- S3-compatible storage (MinIO for development)
+- Automatic file processing for AI consumption
+- Production-ready with AWS S3, Cloudflare R2 support
+
 ### **Real-time Streaming Interface**
 
 - Server-Sent Events (SSE) for live responses
@@ -50,7 +62,7 @@ _Complete agent workflow: user input → tool approval → execution → streami
 ### **Modern Tech Stack**
 
 - **Frontend**: Next.js 15, React 19, TypeScript, Tailwind CSS
-- **Backend**: Node.js, Prisma ORM, PostgreSQL
+- **Backend**: Node.js, Prisma ORM, PostgreSQL, MinIO/S3
 - **AI**: LangGraph.js, OpenAI/Google models
 - **UI**: shadcn/ui components, Lucide icons
 
@@ -59,7 +71,7 @@ _Complete agent workflow: user input → tool approval → execution → streami
 ### Prerequisites
 
 - Node.js 18+ and pnpm
-- Docker (for PostgreSQL)
+- Docker (for PostgreSQL and MinIO)
 - OpenAI API key or Google AI API key
 
 ### 1. Clone and Install
@@ -90,10 +102,10 @@ GOOGLE_API_KEY="..."
 DEFAULT_MODEL="gpt-4o-mini"  # or "gemini-1.5-flash"
 ```
 
-### 3. Start Database
+### 3. Start Services
 
 ```bash
-docker compose up -d
+docker compose up -d  # Starts PostgreSQL and MinIO
 ```
 
 ### 4. Database Setup
@@ -209,10 +221,10 @@ _MCP server configuration form with example filesystem server setup_
 └─────────────────┘    └──────────────────┘    └─────────────────┘
                                 │
                                 ▼
-                       ┌──────────────────┐
-                       │   PostgreSQL     │
-                       │  (Persistence)   │
-                       └──────────────────┘
+                  ┌──────────────────────────────┐
+                  │   PostgreSQL  │  MinIO/S3    │
+                  │  (Persistence)│ (File Store) │
+                  └──────────────────────────────┘
 ```
 
 ### Core Components
@@ -241,6 +253,12 @@ _MCP server configuration form with example filesystem server setup_
 - Stream management and error handling
 - Tool approval user interface
 
+#### File Storage (`src/lib/storage/`)
+
+- S3-compatible storage with MinIO (development) or AWS S3 (production)
+- File validation, upload, and content processing for AI
+- Multimodal message building with base64 conversion
+
 For detailed architecture documentation, see [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md).
 
 ## Development
@@ -266,12 +284,13 @@ pnpm prisma:studio      # Open Prisma Studio (database UI)
 ```
 src/
 ├── app/                 # Next.js App Router
-│   ├── api/            # API routes
+│   ├── api/            # API routes (stream, upload, mcp-servers)
 │   └── thread/         # Thread-specific pages
 ├── components/         # React components
 ├── hooks/              # Custom React hooks
 ├── lib/                # Core utilities
-│   └── agent/          # Agent-related logic
+│   ├── agent/          # Agent-related logic
+│   └── storage/        # File upload & S3 utilities
 ├── services/           # Business logic
 └── types/              # TypeScript definitions
 
@@ -283,9 +302,10 @@ prisma/
 ### Key Files
 
 - **Agent Configuration**: `src/lib/agent/builder.ts`, `src/lib/agent/mcp.ts`
-- **API Endpoints**: `src/app/api/agent/stream/route.ts`
+- **API Endpoints**: `src/app/api/agent/stream/route.ts`, `src/app/api/agent/upload/route.ts`
+- **File Storage**: `src/lib/storage/` (validation, upload, content processing)
 - **Database Models**: `prisma/schema.prisma`
-- **Main Chat Interface**: `src/components/Thread.tsx`
+- **Main Chat Interface**: `src/components/Thread.tsx`, `src/components/MessageInput.tsx`
 - **Streaming Logic**: `src/hooks/useChatThread.ts`
 
 ## Contributing

docs/ARCHITECTURE.md

@@ -11,9 +11,10 @@ This document provides a comprehensive overview of the LangGraph.js AI Agent Tem
 5. [Agent Workflow](#agent-workflow)
 6. [MCP Integration](#mcp-integration)
 7. [Tool Approval Process](#tool-approval-process)
-8. [Streaming Architecture](#streaming-architecture)
-9. [Error Handling](#error-handling)
-10. [Performance Considerations](#performance-considerations)
+8. [File Upload & Storage](#file-upload--storage)
+9. [Streaming Architecture](#streaming-architecture)
+10. [Error Handling](#error-handling)
+11. [Performance Considerations](#performance-considerations)
 
 ## 🌐 System Overview
 
@@ -52,14 +53,14 @@ This document provides a comprehensive overview of the LangGraph.js AI Agent Tem
                                 │
                           Database/Network
                                 │
-┌─────────────────────────────────────────────────────────────────┐
-│                     External Systems                           │
-├─────────────────────────────────────────────────────────────────┤
-│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐ │
-│  │   PostgreSQL    │  │   OpenAI/Google │  │   MCP Servers   │ │
-│  │   (Persistence) │  │   (LLM APIs)    │  │   (Tools)       │ │
-│  └─────────────────┘  └─────────────────┘  └─────────────────┘ │
-└─────────────────────────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                          External Systems                                   │
+├─────────────────────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
+│  │ PostgreSQL  │  │OpenAI/Google│  │ MCP Servers │  │ MinIO/S3 (Storage)  │ │
+│  │(Persistence)│  │ (LLM APIs)  │  │  (Tools)    │  │ (File Uploads)      │ │
+│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────────────┘
 ```
 
 ### Technology Stack
@@ -79,6 +80,7 @@ This document provides a comprehensive overview of the LangGraph.js AI Agent Tem
 - **Prisma ORM**: Type-safe database access
 - **PostgreSQL**: Primary database
 - **Server-Sent Events**: Real-time streaming
+- **MinIO/S3**: Object storage for file uploads
 
 #### AI & Tools
 
@@ -471,6 +473,72 @@ Database MCPServer → getMCPServerConfigs() → MultiServerMCPClient → Agent
 4. **Name Prefixing**: Add server name prefix to prevent conflicts
 5. **Agent Binding**: Bind tools to language model
 
+## 📁 File Upload & Storage
+
+The application supports multimodal AI conversations through file uploads. Files are stored in S3-compatible storage (MinIO for development) and processed for AI consumption.
+
+### Upload Flow
+
+```
+User → MessageInput → Upload API → MinIO/S3 → File Metadata
+                                        ↓
+Agent Request ← processAttachmentsForAI ← Download & Convert to Base64
+```
+
+### Supported File Types
+
+| Type      | Extensions | Max Size | AI Processing         |
+| --------- | ---------- | -------- | --------------------- |
+| Images    | PNG, JPEG  | 10MB     | Base64 data URL       |
+| Documents | PDF        | 32MB     | Base64 data URL       |
+| Text      | MD, TXT    | 1MB      | UTF-8 text extraction |
+
+### Key Components
+
+#### Upload Endpoint (`src/app/api/agent/upload/route.ts`)
+
+Handles file validation and storage:
+
+- Validates MIME type and file size
+- Handles `application/octet-stream` for text files by extension
+- Uploads to MinIO/S3 with unique keys
+- Returns file metadata (URL, key, name, type, size)
+
+#### Storage Utilities (`src/lib/storage/`)
+
+- **s3-client.ts**: AWS SDK S3 client configuration
+- **upload.ts**: Upload functions with multipart support for large files
+- **validation.ts**: File type and size validation rules
+- **content.ts**: File processing for AI (base64 conversion, text extraction)
+
+#### Multimodal Message Building (`src/services/agentService.ts`)
+
+```typescript
+if (opts?.attachments && opts.attachments.length > 0) {
+  const attachmentContents = await processAttachmentsForAI(opts.attachments);
+  messageContent = [{ type: "text", text: userText }, ...attachmentContents];
+}
+```
+
+### Storage Architecture
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  MessageInput   │────►│  Upload API     │────►│   MinIO/S3      │
+│  (File Select)  │     │  (Validation)   │     │   (Storage)     │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+                                                        │
+                                                        ▼
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│  LangChain      │◄────│ processAttach-  │◄────│  Download &     │
+│  HumanMessage   │     │ mentsForAI()    │     │  Base64 Convert │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+```
+
+### Production Migration
+
+The storage layer uses AWS SDK v3, which works with any S3-compatible service. To switch from MinIO to production storage (AWS S3, Cloudflare R2, etc.), update the environment variables - no code changes required.
+
 ## ✅ Tool Approval Process
 
 ### User Interface Flow

docs/images/file-upload.gif

@@ -24,7 +24,6 @@ export async function getMCPServerConfigs(): Promise<Record<string, MCPServerCon
     const servers = await prisma.mCPServer.findMany({
       where: { enabled: true },
     });
-    console.log("Fetched MCP servers from DB:", servers);
 
     const configs: Record<string, MCPServerConfig> = {};
 
@@ -70,7 +69,6 @@ export async function getMCPServerConfigs(): Promise<Record<string, MCPServerCon
 export async function createMCPClient(): Promise<MultiServerMCPClient | null> {
   try {
     const mcpServers = await getMCPServerConfigs();
-    console.log("MCP Server Configs:", mcpServers);
 
     if (Object.keys(mcpServers).length === 0) {
       return null;