https://github.com/drbenjamin/imagerecog
Agent AI app utilizing MCP tools with Angular mobile and Phoenix desktop app.
https://github.com/drbenjamin/imagerecog
angular image-recognition js mcp-server phoenix python streamlit ts
Last synced: 2 months ago
JSON representation
Agent AI app utilizing MCP tools with Angular mobile and Phoenix desktop app.
- Host: GitHub
- URL: https://github.com/drbenjamin/imagerecog
- Owner: DrBenjamin
- Created: 2025-04-20T07:37:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-04T17:03:36.000Z (about 1 year ago)
- Last Synced: 2025-06-04T22:16:50.755Z (about 1 year ago)
- Topics: angular, image-recognition, js, mcp-server, phoenix, python, streamlit, ts
- Language: JavaScript
- Homepage: https://www.seriousbenentertainment.org
- Size: 5.34 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# SSE-based Server and mobile Angular App
Image recognition tool on top of the [MCP](https://modelcontextprotocol.io/introduction) protocol. This project is designed to provide a simple and efficient way to recognize images using a server-client architecture.
**Why?**
MCP server can now be some running process that agents (clients) connect to, use, and disconnect from whenever and wherever they want. In other words, an SSE-based server and clients can be decoupled processes (potentially even, on decoupled nodes). This is different and better fits "cloud-native" use-cases compared to the STDIO-based pattern where the client itself spawns the server as a subprocess.
## Setup
Install the required packages and the MCP server and client:
```bash
# Installing Node.js on Linux
sudo apt install nodejs npm
# Installing Node.js on Mac
brew install nodejs npm
# Installing mcp
conda install -c conda-forge mcp
# Cloning the repo
git clone https://github.com/DrBenjamin/imagerecog
```
## Usage
Test bytes for an image to test on MCP Inspector or in VS Code Copilot Chat:
```ini
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
```
Test image URL:
```ini
https://www.seriousbenentertainment.org/R/Image.png
http://212.227.102.172:9000/templategenerator/subfolder/City.Golf.jpg
```
Running the MCP server and Streamlit client app:
```bash
# Creating a conda environment using the environment.yml file
conda env create -f environment.yml
# Activating the conda environment
conda activate imagerecog
python -m pip install "mcp[cli]"
# 1. Running the MCP dev server
mcp dev src/server.py
# 2. Running the MCP server
python src/server.py
# 3. Running the Streamlit app
python -m streamlit run app.py
# or the run script
sudo chmod 755 run.sh
./run.sh
lsof -i :6274
lsof -i :8080
lsof -i :8501
```
## Configuration
Change configuration and add the OpenAI API key in the `.streamlit/st.secrets.toml` file:
```ini
# LLM Provider
LLM_LOCAL = "False" # `False` for local Ollama model, `True` for OpenAI API
# MCP API
[MCP]
MCP_URL = "http://127.0.0.1:8080"
MCP_SYSTEM_PROMPT = ""
MCP_USER_PROMPT = ""
# Ollama API
[OLLAMA]
OLLAMA_URL = "http://127.0.0.1:11434"
OLLAMA_MODEL = "" # e.g. llava or "llama3.2-vision"
# OpenAI API
[OPENAI]
OPENAI_API_KEY = "sk-..."
OPENAI_MODEL = "" # e.g. "o4-mini" or "gpt-4.1" or "gpt-4o" or "gpt-4-turbo"
```
## Ollama
To install und run the Ollama model, use the following command:
```bash
# Running the Ollama service
# Linux
systemctl start ollama
# or Mac
brew services start ollama
# Running the model
ollama run llama3.2-vision
# Sharing the models between Ollama and LM Studio
# https://smcleod.net/2024/03/llamalink-ollama-to-lm-studio-llm-model-linker/
go install github.com/sammcj/llamalink@latest
llamalink
```
## Docker
To use the Docker for MCP hosting, use the following commands:
```bash
# Build the docker image
docker build -t /imagerecog .
# Login to Docker Hub
docker login
# Tagging the image (https://hub.docker.com/repositories/drbenjamin)
docker tag /imagerecog /imagerecog:latest
# Push the image to the registry
docker push /imagerecog:latest
```
Now the MCP docker can be added in VS Code or any other MCP client like Claude Desktop.
## Mobile App
The Angular app can be run using the following commands:
```bash
# Installing Angular CLI
npm install -g @angular/cli
# Installing the required packages
npm install
# Running the app
ng serve
```
### Buildung the app for mobile
To build the app for mobile, use the following commands (pin matching Capacitor versions):
```bash
# Preparing the app for mobile
npm install @capacitor/core@5.7.8 @capacitor/cli@5.7.8
npm install @capacitor/ios@5.7.8
npx cap init imagerecog org.benbox.imagerecog --webDir=../browser
npx cap add ios
# Building the app
ng build
```