In this article, I’ll share my experience using the MCP (Model-Controller-Presenter) architecture combined with TypeScript, integrating the GPT API for detailed image recognition and classification, using Supabase as the backend. I’ll detail how I overcame some initial challenges to achieve an efficient solution.

What is MCP architecture?

MCP (Model-Controller-Presenter) is a variant of the MVC architecture, clearly organized to facilitate maintenance and scalability through well-defined responsibilities:

• Model: Manages data and business logic.

• Controller: Receives and handles requests.

• Presenter: Formats data for visualization.

Why MCP with TypeScript and GPT?

Initially, I used only TypeScript and Supabase to store images and metadata. However, I quickly realized managing large volumes of images manually was impractical, especially for a photography company. I decided to integrate an AI solution using the GPT (OpenAI) API to automate detailed customer photo descriptions.

Project Structure

src/
├── controllers/
│ └── imageController.ts
├── models/
│ └── imageModel.ts
├── presenters/
│ └── imagePresenter.ts
├── services/
│ └── gptService.ts
└── app.ts

Supabase Connection

Initially configure the connection:


import { createClient } from '@supabase/supabase-js';

const supabase = createClient('<SUPABASE_URL>', '<ANON_KEY>');

Model for Supabase

Directly interacts with the image database:

Integrating GPT for Image Recognition

Initially, I used GPT’s generic endpoint but noticed the need for something image-specific. So, I migrated to GPT-4 Vision:
// gptService.ts
import axios from 'axios';

export async function analyzeImage(imageUrl: string): Promise<string> {
const apiKey = '<OPENAI_API_KEY>';
const prompt = "Describe this customer photo in detail, including environment, objects, emotions, and photographic style.";

const response = await axios.post('https://api.openai.com/v1/chat/completions', {
model: 'gpt-4-vision-preview',
messages: [{
role: 'user',
content: [
{ type: 'text', text: prompt },
{ type: 'image_url', image_url: { url: imageUrl } }
]
}]
}, {
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});

return response.data.choices[0].message.content;
}

Controller Handling Requests

The Controller mediates between AI and Supabase:

// imageController.ts
import { analyzeImage } from '../services/gptService';
import { saveImageData } from '../models/imageModel';

export async function processCustomerImage(req: any, res: any) {
try {
const imageUrl = req.body.url;
const description = await analyzeImage(imageUrl);
await saveImageData(imageUrl, description);

res.status(200).json({ imageUrl, description });
} catch (error) {
res.status(500).json({ error: error.message });
}
}

Presenter Formatting Results

The Presenter clearly formats received data for application display:

Practical Case: Photography Company with MCP

As an example, imagine a photography company receiving numerous customer images daily. With MCP integrated with GPT:

• The customer uploads an image.

• AI automatically generates a detailed, personalized description.

• Supabase stores this information, simplifying organization, search, and management.

This approach significantly enhances operational efficiency and customer experience.

Testing the Complete Workflow

Conclusion

Adopting MCP architecture with TypeScript, GPT, and Supabase allowed me to solve initial scalability and automation challenges. This combination provides a robust, scalable, and highly efficient solution for automated and intelligent image management.