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., "@instruckt-mcp show my pending annotations"
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 and API handlers for instruckt visual annotations. Stores annotations and screenshots to disk, and exposes them to your AI agent via MCP tools.
npm install instruckt-mcpRelated MCP server: Lens
Pick your setup below — each section is self-contained.
Setup | Use when |
App Router route handler | |
Dev-server middleware via | |
Any Node.js framework |
Create a route handler at app/api/annotations/[[...slug]]/route.ts:
import { createHandlers } from 'instruckt-mcp/nextjs'
export const { GET, POST, PATCH } = createHandlers()Then wire up the MCP server in your Claude/agent config:
{
"mcpServers": {
"instruckt": {
"command": "npx",
"args": ["instruckt-mcp"]
}
}
}Add the adapter to your Ember CLI dev-server in server/index.js:
const { createEmberMiddleware } = require('@tdwesten/instruckt-mcp/ember');
module.exports = createEmberMiddleware();This registers GET, POST, and PATCH /api/annotations on the Ember CLI Express
dev-server. Request bodies up to 10 MB are accepted (large enough for base64-encoded
screenshots). Options:
Option | Type | Default | Description |
route | string |
| Base path for the endpoints (trailing slashes are trimmed) |
dir | string |
| Storage directory |
Development only. Ember CLI's middleware runs during ember serve. For production,
use the Custom backend setup with your own Node server.
Then wire up the MCP server in your Claude/agent config:
{
"mcpServers": {
"instruckt": {
"command": "npx",
"args": ["instruckt-mcp"]
}
}
}Use createRequestHandlers with any Node.js framework:
import { InstrucktStorage, createRequestHandlers } from 'instruckt-mcp'
const storage = new InstrucktStorage('.instruckt')
const handlers = createRequestHandlers(storage)
// GET /annotations
app.get('/annotations', async (req, res) => {
res.json(await handlers.getAnnotations())
})
// POST /annotations
app.post('/annotations', async (req, res) => {
res.status(201).json(await handlers.createAnnotation(req.body))
})
// PATCH /annotations/:id
app.patch('/annotations/:id', async (req, res) => {
res.json(await handlers.updateAnnotation(req.params.id, req.body))
})Once connected, your AI agent has three tools:
Tool | Description |
| Returns all unresolved annotations — comment, element, page URL, severity |
| Returns the screenshot image for a specific annotation by ID |
| Marks an annotation as resolved; the instruckt widget removes the marker on its next poll |
instruckt runs in your app and captures annotations with optional screenshots
Annotations are posted to your API endpoint and stored as JSON on disk
Your AI agent connects via MCP and calls get_all_pending to see what needs fixing
The agent reads the feedback, inspects screenshots with get_screenshot, and makes code changes
When done, the agent calls resolve — the widget picks up the status change on its next poll and removes the marker
Annotations are stored in .instruckt/annotations.json. Screenshots go in .instruckt/screenshots/<id>.png. The directory is created automatically on first use.
import { InstrucktStorage } from 'instruckt-mcp'
const storage = new InstrucktStorage('.instruckt')
await storage.getAll() // all annotations
await storage.getPending() // unresolved only
await storage.add(input) // create annotation
await storage.update(id, input) // update annotation
await storage.resolve(id) // mark as resolved
await storage.getScreenshot(id) // Buffer | nullMIT
Get all pending (unresolved) annotations from the UI. Returns annotation metadata including comment, element, page URL, and severity. Does not include screenshot data — use get_screenshot for that.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Without annotations, the description carries the full burden and discloses key behaviors: it returns metadata fields (comment, element, URL, severity), excludes screenshots, and focuses on unresolved annotations. While it doesn't cover every conceivable detail like pagination or permissions, it gives a clear behavioral contract for a simple read-only operation.
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 two sentences long, front-loaded with the core purpose and immediately followed by return-value details and an exclusion with an alternative. Every word earns its place, with no redundancy or irrelevant information.
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?
For a simple parameterless tool with no output schema, the description is quite complete, listing the returned metadata fields and explicitly noting the absence of screenshot data. It could theoretically add details like sorting or global scope, but for a straightforward listing action, it covers the essential information needed by an agent.
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?
The tool has zero parameters, and the input schema is empty, so there is no parameter detail to explain. Per the baseline for 0-parameter tools, a score of 4 is appropriate; the description adds no parametric information, but none is required.
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 retrieves all pending (unresolved) annotations from the UI, using a specific verb and resource. It also distinguishes itself from the sibling tool get_screenshot by explicitly noting it excludes screenshot data, making its unique purpose obvious.
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 explicit guidance on when to use this tool (when needing annotation metadata) and when not to (when needing screenshots), naming the alternative get_screenshot. This covers the primary use case decision and sets expectations for users.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get the screenshot image for a specific annotation by ID.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The annotation ID |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It only restates the basic function ('Get the screenshot image') and does not mention return format, error behavior, or any side effects. For a tool that retrieves a resource, more detail is needed (e.g., whether it returns binary data or a URL, what happens if the ID is invalid).
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 a single, clear sentence that is front-loaded with the action and resource. It contains no redundant words and is appropriately concise for the tool's simplicity.
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?
The tool is simple (one parameter, no output schema, no annotations), so the description is mostly adequate. However, since there is no output schema, the description should clarify what 'screenshot image' means as a return value (e.g., binary, path, URL). This missing detail prevents a higher score.
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 description coverage is 100% – the schema already explains the 'id' parameter as 'The annotation ID'. The description adds no additional meaning beyond this, so the baseline of 3 applies.
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's action ('Get the screenshot image'), the target resource ('for a specific annotation'), and the scope ('by ID'). This distinguishes it from sibling tools like get_all_pending (which lists pending items) and resolve (which likely acts on annotations).
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 implies usage when you have an annotation ID and need its screenshot, but it does not explicitly state when to use this tool versus alternatives or provide any exclusions. No mention of when not to use or prerequisites beyond the ID is given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Mark an annotation as resolved. This removes the marker from the browser on next page load.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | The annotation ID to resolve |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It transparently discloses a key side effect: 'This removes the marker from the browser on next page load.' This goes beyond a generic mutation statement by specifying both the removal and the timing, though it does not address edge cases like invalid IDs or idempotency.
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 consists of two concise sentences that are front-loaded with the primary action and add a valuable detail about the side effect. Every word earns its place.
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?
For a simple one-parameter mutation tool with no output schema, the description provides sufficient context: the action and the timing of the visible effect. While it doesn't describe return values or error handling, the simplicity of the tool makes this acceptable.
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 description coverage is 100% with the parameter 'id' described as 'The annotation ID to resolve.' The tool description adds no additional meaning beyond this, so the baseline of 3 is appropriate.
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 action: 'Mark an annotation as resolved.' This is a specific verb+resource construction that distinguishes it from siblings (get_all_pending, get_screenshot) by focusing on resolution rather than listing or capturing.
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 for the tool's purpose via the verb 'resolve' and the sibling tool names, but it does not explicitly mention when to use it over alternatives or when not to use it. This matches a 'clear context, no exclusions' score.
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.1.0get_all_pendingget_screenshotresolveScored across 3 tools
Each tool has a clearly distinct purpose: listing pending annotations, fetching a screenshot by ID, and resolving an annotation. There is no overlap or ambiguity between them.
Names are mostly consistent with verb_noun pattern: get_all_pending, get_screenshot, but resolve is a bare verb lacking an object. Minor deviation does not hurt readability.
Three tools is a compact set for a narrow domain (annotation review and resolution). It feels slightly thin, but each tool is necessary and the scope is well-defined.
The set covers the core workflow of listing pending annotations, viewing details (screenshot), and resolving them. A minor gap is lack of access to resolved annotations, but it's not essential for the intended use.
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
MCP server that lets AI assistants use all OneSchema features exposed via the public API.
MCP Server for an Agent Task Marketplace
Official MCP server for Agentwork — delegate tasks to AI agents with human-in-the-loop
