Agent developer quickstart

Choose your interface

Remote MCP: use a server-side MCP client or an MCP-capable desktop editor. The endpoint is https://www.editableqrcode.com/api/mcp with Streamable HTTP transport. It exposes list_qr_products and get_qr_product, both read-only.

WebMCP: use a supporting browser while viewing this site's public pages. It exposes the same two tool names through document.modelContext. Browser support is experimental; remote MCP does not depend on it.

REST API: use owner-authorized API keys for saved QR codes, creation, changes, downloads and analytics. Public MCP and WebMCP tools cannot perform those account actions. No account credentials should be sent to the public MCP endpoint.

• REST API and OpenAPI
• Authentication and permissions

Connect from VS Code

Add this server to .vscode/mcp.json in your workspace, merging it with any existing servers. This example uses VS Code's servers format; other clients may use a different configuration layout.

Use MCP: List Servers in the Command Palette to start editable-qr-products and inspect its status. Enable its tools for your chat, then try: Find a QR format for sharing a PDF catalogue and tell me what content I need to prepare. Follow your editor's normal server-trust prompts.

{
  "servers": {
    "editable-qr-products": {
      "type": "http",
      "url": "https://www.editableqrcode.com/api/mcp"
    }
  }
}

• VS Code MCP configuration reference

Run a Node.js client

Use Node.js 20 or newer. In a project directory, install the version below, save the JavaScript as qr-agent.mjs, and run node qr-agent.mjs. It connects, searches for PDF products, reads the PDF guide, prints the results and closes the connection.

For a local app, set QR_MCP_URL to its /api/mcp URL, for example QR_MCP_URL=http://localhost:3000/api/mcp node qr-agent.mjs on macOS/Linux. Use your app's actual port. Preview deployments may require Vercel access; a Vercel login page is not an MCP response.

npm install @modelcontextprotocol/[email protected]

import { Client, StreamableHTTPClientTransport } from "@modelcontextprotocol/client";

const endpoint = new URL(process.env.QR_MCP_URL ?? "https://www.editableqrcode.com/api/mcp");
const client = new Client({ name: "qr-guide-example", version: "1.0.0" });

try {
  await client.connect(new StreamableHTTPClientTransport(endpoint));
  const catalog = await client.callTool({
    name: "list_qr_products",
    arguments: { query: "PDF" },
  });
  const guide = await client.callTool({
    name: "get_qr_product",
    arguments: { slug: "pdf" },
  });
  if (catalog.isError || guide.isError) throw new Error("A tool returned an error");
  console.log(JSON.stringify({ catalog: catalog.structuredContent, guide: guide.content }, null, 2));
} finally {
  await client.close();
}

• Official MCP TypeScript SDK

Tool inputs and responses

list_qr_products accepts an optional query string of at most 200 characters. Omit it or pass an empty string to list all 24 formats. Search is a case-insensitive substring match on product names and descriptions, not semantic search; no matches returns an empty array.

Each product has slug, name, description, kind (static or dynamic), url and signup_url. In remote MCP, the array is available at structuredContent.products and as JSON text in content. The response example below shows selected fields only.

get_qr_product requires a slug returned by the catalog, such as pdf, business or link-list. Product slugs can differ from REST qr_type values (link-list versus link_list). The result is Markdown in content[0].text, covering preparation, use cases, static/dynamic behavior and signup links. The guide example below is an excerpt.

Use client.listTools() to inspect current input schemas. Unknown tools, invalid slugs, extra fields and invalid argument types are rejected. Handle both protocol exceptions and tool results with isError: true.

{"name":"list_qr_products","arguments":{"query":"PDF"}}

{
  "structuredContent": {
    "products": [
      {
        "slug": "pdf",
        "kind": "dynamic",
        "url": "https://www.editableqrcode.com/qr-types/pdf",
        "signup_url": "https://www.editableqrcode.com/signup?qr_type=pdf"
      }
    ]
  }
}

{"name":"get_qr_product","arguments":{"slug":"pdf"}}

{
  "content": [
    {
      "type": "text",
      "text": "# PDF QR codes\n\nDynamic QR format.\n\n…"
    }
  ]
}

Use the in-browser WebMCP tools

Open this quickstart, the homepage, /docs, /qr-types or a valid product page in a browser that supports the current document.modelContext API. Wait for the page to load. The site registers tools automatically and removes them when you navigate outside those pages.

For a manual check in that page's DevTools console, run the example below. It passes a discovered tool object and a JavaScript arguments object to executeTool. The search result is a JSON string that you parse into an array; get_qr_product returns a Markdown string. These browser results do not use the remote MCP result envelope.

The example checks availability rather than assuming every browser supports WebMCP. See Chrome's current documentation for experimental availability and setup. If it is unavailable, use remote MCP or the public Markdown pages instead. Tools are not exposed to arbitrary third-party browser origins.

(async () => {
  const api = document.modelContext;
  if (!api?.getTools || !api?.executeTool) {
    return { available: false, message: "Use remote MCP or the Markdown guide in this browser." };
  }
  const tools = await api.getTools();
  const search = tools.find(tool => tool.name === "list_qr_products");
  const read = tools.find(tool => tool.name === "get_qr_product");
  if (!search || !read) throw new Error("Open a supported public page and wait for it to load.");
  const products = JSON.parse(await api.executeTool(search, { query: "PDF" }));
  const guide = await api.executeTool(read, { slug: "pdf" });
  return { available: true, products, guide };
})()

• Chrome WebMCP imperative API and availability

Read Markdown and install the skill

Request this quickstart, /docs, /qr-types or a product page with Accept: text/markdown. HTML remains the default for browser navigation. This is a documentation interface, not a way to access private dashboard content.

For a skill-aware client, discover the QR setup skill through the index below. Read its description, fetch the advertised SKILL.md, and verify the SHA-256 digest against the downloaded bytes before loading it. Follow your client's trusted-source and installation workflow; there is no universal skill install command. The skill is instructions only and gives no account permissions.

curl --fail --silent --show-error -H 'Accept: text/markdown' 'https://www.editableqrcode.com/qr-types/pdf'

• Skill discovery index
• QR setup skill
• API catalog
• MCP server card

Troubleshooting

Use the endpoint for the interface you selected. The public MCP tools do not need API keys; the separate REST API does.