Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@jl-image-vison describe https://example.com/mockup.png focusing on layout"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for image understanding — structured description of UI designs, HTML pages, and visual layouts, powered by Agnes 2.0 Flash.
describe_imageAnalyse an image and return a richly structured breakdown — layout hierarchy, UI components, readable text, interactions, design notes, and accessibility observations. Optimised for UI mockups, Figma exports, HTML/CSS screenshots, dashboards, and app interfaces.
Parameter | Type | Required | Description |
| string | yes | The image to analyse. Accepts three formats: (1) a public URL — |
| enum: | no (default | How thorough the description should be. |
| string | no | Steering hint, e.g. |
content[0].text — the full structured description (markdown).
structuredContent — machine-readable fields: summary, description, model, tokens.
Related MCP server: Vison-MCP
npm install
npm run buildEnvironment variables (all optional except AGNES_API_KEY at runtime):
Variable | Default | Description |
| — | Your Agnes AI API key (required to call the tool). |
|
| Override the API base URL. |
|
| Override the model name. |
Get an API key from the Agnes AI developer console.
Add to your MCP config:
{
"mcpServers": {
"image-vison": {
"command": "node",
"args": ["D:/my/oss/jl_image-vison-mcp/dist/index.js"],
"env": {
"AGNES_API_KEY": "sk-your-key-here"
}
}
}
}AGNES_API_KEY=sk-your-key npx tsx src/index.tsnpm run dev # run with tsx (no build step)
npm run typecheck # type-check only
npm run build # compile to dist/
npm run inspect # launch MCP Inspector for interactive testingSingle image — one image per call. Multi-image comparison is not yet supported.
Agnes 2.0 Flash only — first release supports only this model.
Local file size limit — 10 MB per image (Agnes payload limit).
Claude Code pasted images — when you paste an image into Claude Code, it may pass a file path or a data URL; both are now supported. If you get a "Cannot read file" error, the path Claude Code passed doesn't exist on the server's filesystem — upload to a public URL instead.
Analyse an image and return a richly structured description — layout hierarchy, UI components, readable text, interactions, design notes, and accessibility observations. Optimised for UI mockups, HTML/CSS screenshots, Figma exports, dashboards, and web/app interfaces. Accepts a public URL, a local file path, or a base64 data URL.
| Name | Required | Description | Default |
|---|---|---|---|
| focus | No | Optional steering for what to emphasise, e.g. "layout only", "extract all text / OCR", "focus on accessibility", "identify design system", "describe the data visualisation". Keeps the description on-task for your current need. | |
| image | Yes | The image to analyse. Accepts three formats: (1) a public URL — e.g. https://example.com/screenshot.png; (2) a local file path — e.g. ~/Desktop/mockup.png or C:\Users\you\shot.png; (3) a base64 data URL — data:image/png;base64,.... Relative paths resolve from the server's working directory. | |
| detail_level | No | How thorough the description should be. standard ≈ 1 paragraph + key elements. detailed ≈ full structured breakdown (default). comprehensive ≈ exhaustive, including edge cases and fine details. | detailed |
| Name | Required | Description |
|---|---|---|
| model | Yes | |
| tokens | Yes | |
| summary | Yes | |
| description | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark this as readOnly and non-destructive. The description adds valuable behavioral context by enumerating the output structure (text, interactions, accessibility) and accepted input formats (URL, local path, base64), going beyond the annotation's bare safety hints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three concise sentences that front-load the purpose and output, then cover use cases and input formats. Every sentence contributes information, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the readOnly annotation, an output schema, and the tool's complexity, the description covers all necessary aspects: input variants, optimization targets, and output richness. The presence of an output schema makes a detailed return-value explanation unnecessary, so no gaps remain.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with all three parameters clearly described. The description mentions the accepted input formats, but this duplicates the 'image' parameter's schema description without adding new semantic detail. It achieves the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool 'Analyses an image' and specifies the rich output categories (layout hierarchy, UI components, text, interactions, design notes, accessibility). This is a specific verb+resource pair that fully conveys what the tool does and distinguishes it from any conceivable alternative.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context by noting it is 'optimised for UI mockups, HTML/CSS screenshots, Figma exports, dashboards, and web/app interfaces,' which implies appropriate use cases. Since there are no sibling tools, explicit alternatives are unnecessary, but exclusionary guidance is absent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v0.2.0describe_imageScored across 1 tool
With only one tool, there is no possibility of confusion between tools. The tool's purpose is clear and distinct by default.
The single tool 'describe_image' follows a clear verb_noun pattern, and consistency is trivially maintained with only one tool.
A single tool feels thin for a server dedicated to image vision, but the tool is comprehensive and not trivial, making this borderline.
The tool provides a rich analysis covering layout, text, interactions, and accessibility, which covers the primary use case. However, other vision operations like comparison or classification are not available, leaving minor gaps.
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server for VC pitch-deck scoring, thesis-fit matching, and deal-flow management.
MCP server for building and testing AI agents with multi-model experimentation and insights.
The Figma MCP server brings Figma design context directly into your AI workflow.
