AppScreenshots MCP server

AppScreenshots MCP

简体中文 · Client setup · Tools · Troubleshooting

Let your AI agent create editable app screenshot projects, work with your authorized assets, review and correct designs using available client browser tools, then hand off the editor link for website export in AppScreenshots.

Preview service is live. On September 18, 2026, a protocol client completed OAuth, created and edited a two-frame project, opened it in the website editor, and exported two PNGs. Individual Claude Code, Codex, Gemini CLI, Kimi Code, ZCode and ChatGPT integrations have not yet been certified. Until the website's loopback callback fix is deployed, clients using a 127.0.0.1 redirect URI may fail authorization; see troubleshooting.

This public repository contains connection examples, a small installation helper, and an optional agent Skill. The MCP server runs within AppScreenshots. Website, authentication, database, billing and rendering backend code remain in their existing private deployment. The helper is not a local stdio server.

Connect the MCP service

Remote Streamable HTTP endpoint:

https://appscreenshots.net/api/mcp

Choose your client and follow its OAuth flow. Sign in with your AppScreenshots account, choose projects/assets, and optionally allow new projects. No database credentials or service API keys are required.

Claude Code

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

Open /mcp in Claude Code and authorize AppScreenshots.

Codex

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

For Gemini CLI, Kimi Code, ZCode and ChatGPT, see client setup. MCP is sufficient to call the tools; the Skill below provides a reusable design and preview workflow.

Install the optional Skill

Requires Git and Node.js 20+. No npm dependencies or install hooks are used.

git clone https://github.com/horace68/appscreenshots-mcp.git
cd appscreenshots-mcp
node bin/appscreenshots.mjs install-skill codex

For Claude Code, replace the last line with:

node bin/appscreenshots.mjs install-skill claude

The installer copies skills/appscreenshots into ~/.agents/skills/appscreenshots for Codex or ~/.claude/skills/appscreenshots for Claude Code. It refuses to overwrite an existing directory. Restart the agent to discover the Skill, then use $appscreenshots in Codex or /appscreenshots in Claude Code. Connect and authorize MCP separately.

For project-local or other compatible skill hosts, choose the parent skill directory explicitly:

node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills --dry-run
node bin/appscreenshots.mjs install-skill custom --dir /path/to/project/.agents/skills

Use the directory required by your client. The installer does not auto-configure other clients or modify existing MCP settings. To update a customized Skill, compare it with this repository and merge your edits; for a clean update, move the old directory aside and rerun installation. To uninstall, remove only the installed appscreenshots skill directory. Revoke server access separately in website settings.

Connection helper

node bin/appscreenshots.mjs config codex
node bin/appscreenshots.mjs config claude
node bin/appscreenshots.mjs config gemini
node bin/appscreenshots.mjs config kimi
node bin/appscreenshots.mjs doctor

config prints a snippet to merge into existing settings. doctor checks public OAuth discovery, sends no credentials, and exits nonzero if discovery is unavailable. It does not authenticate or test rendering. The npm package name is not published to the npm registry; use this Git repository.

Try a task

Shortened. The full README is on GitHub.