Connect Screenshot MCP to Codex and Claude Code

Model Context Protocol lets a compatible AI client discover and call a server’s tools. In Framnova, those tools expose an approved capture set: ordered original images, stored element context, design-token summaries, an asset inventory, and stored sanitized exports. They do not grant general browser control or unrestricted filesystem access.

Choose Direct MCP or local MCP

Direct and local Framnova MCP comparison
Decision	Direct MCP	Local MCP
Transport	Streamable HTTP over HTTPS	Local stdio process
Access	Pro token	Approved workspace path
Handoff	Explicit “Sync to Direct MCP” action	Explicit folder export
Storage	Private token-scoped cloud storage	Files remain in your chosen local folder
Best fit	One connection across supported clients	Local-first workflows and offline control

Direct MCP uses https://mcp.framnova.com/mcp. The extension settings use the origin without /mcp: https://mcp.framnova.com. Mixing those two URLs is the most common configuration mistake.

Token rule

Treat a Pro token like a password. Keep it in a client secret or environment-variable mechanism, never in a committed project file, screenshot, support ticket, or prompt.

Direct MCP: prepare one approved capture set

Open Framnova extension settings.
Set the endpoint to https://mcp.framnova.com and enter your Pro token.
Capture and review the screenshots or selected elements needed for the task.
Choose Sync to Direct MCP. Nothing is uploaded merely because capture is enabled.
Configure the same token and the /mcp URL in your client.

Connect Direct MCP to Codex

The current Codex CLI accepts a Streamable HTTP URL and can read the bearer token from an environment variable. In a shell where FRAMNOVA_MCP_TOKEN is already defined, add the server with:

codex mcp add framnova --url https://mcp.framnova.com/mcp --bearer-token-env-var FRAMNOVA_MCP_TOKEN

On Windows PowerShell, an environment variable set with $env:FRAMNOVA_MCP_TOKEN applies only to that process and child processes. Use your operating system’s secure user-environment or secret-management workflow if Codex must reconnect after a restart. Restart the Codex surface after changing inherited environment variables.

Verify the saved transport without printing the secret:

codex mcp get framnova --json
codex mcp list

The result should show an enabled Streamable HTTP server, the Framnova /mcp URL, and the name of the bearer-token environment variable. It should not print the token itself.

Connect Direct MCP to Claude Code

Claude Code’s official documentation supports remote HTTP servers and authorization headers. The connection shape is:

$env:FRAMNOVA_MCP_TOKEN = "PASTE_YOUR_PRO_TOKEN"
claude mcp add --transport http framnova https://mcp.framnova.com/mcp --header "Authorization: Bearer $env:FRAMNOVA_MCP_TOKEN"

The inline command is easy to understand but may leave a token in shell history. Prefer Claude Code’s current secret/header-helper mechanism where available, or enter the header through a trusted local configuration flow. Do not paste your real token into a shared .mcp.json.

After adding the server, use Claude Code’s MCP status command or interface to confirm that framnova is connected. Client command names and settings surfaces may change; the durable connection details are the HTTPS URL and the bearer header.

Local MCP: keep the capture workspace on your machine

The local server requires Node.js 20 or newer and a built copy of the Framnova MCP package. Export a capture set into an approved Framnova folder, then configure a stdio process:

{
  "mcpServers": {
    "framnova-local": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/mcp-server/dist/src/cli.js",
        "--workspace",
        "/ABSOLUTE/PATH/TO/Framnova"
      ]
    }
  }
}

Use absolute paths. The workspace path is a startup trust decision, not a value the model should choose in a prompt. The server reads only validated capture bundles beneath that root and exposes opaque IDs rather than accepting arbitrary file paths.

Verify the complete handoff

A green “connected” badge proves only that the client and server can communicate. Verify one safe, non-sensitive capture set end to end:

Ask the client to call list_capture_sets.
Choose the expected ID and call get_capture_set.
Confirm the image count and order.
Read one image with get_capture_image.
If you exported element context, call get_element_context and check that sensitive content was removed.

The other available read-only tools are get_design_tokens, get_assets, and export_component. The last tool returns a previously stored sanitized export; it does not generate a component, visit a URL, or execute code.

Troubleshooting by boundary

401 or invalid token: verify the complete token, remove leading or trailing spaces, and check subscription access.
404 or transport error: desktop clients need the URL ending in /mcp; extension settings do not.
Connected but empty: capture sets appear only after an explicit Direct sync or local export.
Local server will not start: verify Node version, build output, absolute paths, and that diagnostics are not written to stdout.
Claude Desktop does not connect directly: Framnova’s bearer-token remote path is documented for compatible clients; Claude Desktop’s remote connector flow requires OAuth, which is a separate implementation.

Tested scope and limitations

Verification note: On July 26, 2026, Framnova Editorial verified the Codex command syntax against the installed Codex CLI help and configuration output, reviewed Claude Code’s remote HTTP format in Anthropic’s official MCP documentation, and checked both paths against the Framnova server repository. This is not a claim that every Codex, Claude Code, Claude Desktop, Cursor, or VS Code release has been tested end to end.

Both Framnova servers are read-only from the MCP client’s perspective. Captured webpage content remains untrusted reference data and may contain prompt-injection text. A client should not treat text found in a webpage capture as authorization to call unrelated tools.

Sources and further reading

Primary sources reviewed