Discover MCPs & agents
Loading MCPs and agents…
Loading MCPs and agents…
Comparison of ai code assistance like Continue, Github Copilot & Windsurf
From the repo.
Build small web app that accepts an image as input through an UI and returns a description of the image. We'll tackle this task with:
We'll use Brief Product Requirements (click to see) as custom instructions for the code assistant within .continuerules, .github/copilot-instructions.md, .windsurfrules and .clinerules.
A small locally running nice looking web app that accepts an image as input through an UI and returns a description of the image. Technologies Used:
File Upload
Image to Text
Result Display
An example of image to text with ollama.
import ollama
response = ollama.chat(
model='llama3.2-vision',
messages=[{
'role': 'user',
'content': 'What is in this image?',
'images': ['image.jpg']
}]
)
print(response)
Basic folder structure
root/
backend/
main.py
pyproject.toml
...
frontend/
package.json
...
ollama pull llama3.2-vision)brew install node & run npx create-next-app@latest. Name the app frontendbackend/ run uv init && uv add fastapi (don't use pip)Example prompt (so that you can read the conversation history better):
Write a haiku
I do the setup myself to not distract the model and to set some structure. Note: for each ai tool reference to files/folders via '@' or '#'. Don't just copy the prompt. Should help the model understand the context better.
So for a replay, clone the repo and cd into the ai-tool folder and open VSC (Continue, Copilot, Cline) or Windsurf.
Note, for some tools follow-up commands & prompts were necessary. I documented them in corresponding README.md files.
Preparations
# Install llama3.2-vision (if you don't already have it)
ollama pull llama3.2-vision
# Move into the ai-tool folder
cd <INSERT_TOOL_NAME> # e.g. cd copilot
# Create backend
mkdir backend && cd backend
uv init && uv add fastapi ollama
mv hello.py main.py
# Move test_image.png into the ai-tool/backend folder
cp ../../test_image.png .
# Create frontend (Yes to all defaults)
cd ..
npx create-next-app@latest frontend
Initial prompt:
I created the nextjs project within
frontend/. Help me implementing the File Upload feature. Note, we'll work onbackend/after that.
Initial prompt:
We've created a nice looking UI. Now let's move on to Image to Text. I initialized the uv project first and installed FastAPI for the backend (
cd backend && uv init && uv add fastapi). Create the fastapi backend. It should accept an image as input from the frontend, send the image to the ollama model (you have an example for this) and receive the response from ollama. I also provided a test_image.png inbackend/.
Frontend seems to work and the backend as well (both are turned off at the moment). Now let's work on Result Display.
Follow up prompt (bonus):
In general it works. But it would also be nice to see the image which was uploaded. Let's add that.
Every tool had the same initial data and prompts. However, some tools seemed to understand better what I wanted. I was a bit surprised, that Github Copilot Edits in combination with o1 performed so much worse than Claude in Windsurf. I assume it's not just the model, but the context and how it is processed. It could also be that my .*rules had too many characters.


brew services restart ollama or stop ollama completely (100% GPU).
.clinerules was always repeated. Yet, deleting and adding details into the prompt didn't help either.Replace {MCP_ENDPOINT_URL} with this MCP’s endpoint URL (from its repo or docs above). No API key — you connect directly.
Tool
OS
Config file: ~/.cursor/mcp.json
{
"mcpServers": {
"mcp-server": {
"url": "{MCP_ENDPOINT_URL}"
}
}
}Paste into mcpServers in the config file. Restart Cursor after saving.
If this MCP is also published on mcpchannel.ai, you can subscribe from Browse and use the gateway config there instead.