AppScreenStudio — Claude Code MCP server: what it does, how to install
Connects your coding assistant to the browser graphic canvas to build App Store and Google Play mockups. Handy for mobile teams creating store visuals.
claude mcp add --transport http appscreenstudio https://www.appscreenstudio.com/api/mcpWhat AppScreenStudio does
This hosted server links an MCP assistant to the web canvas on appscreenstudio.com over HTTP. Once hooked up, the agent can inspect the active scene, place device frames for iPhone or Android, modify text layers, and apply Google Fonts. Edits show up immediately on the visual canvas.
The toolset covers card creation, multi-phone placement, AI-assisted background rendering, and store listing metadata editing. You can roll back mistakes instantly using built-in undo and redo calls.
Without an active browser tab, every command will fail. The remote server dispatches instructions straight to your live session, so closing the tab immediately triggers a connection error. You must keep the project open and supply an account Bearer token.
What it helps with
- assemble store screenshot sets for iOS and Android
- insert smartphone frames and align application captures
- translate headline copy across several localized layouts
- create graphic backgrounds and decorative assets with AI
Example prompts for the agent
- Update the primary headline on card 1 to 'Habit Tracker Pro' and switch the font to Inter.
- Switch all device frames across this set to the latest iPhone in dark finish.
- Generate a soft blurred backdrop for the second screenshot and render a preview strip.
How to install AppScreenStudio
Platform CLI: remote server
claude mcp add --transport http appscreenstudio https://www.appscreenstudio.com/api/mcpPlatform CLI: remote server
codex mcp add appscreenstudio --url https://www.appscreenstudio.com/api/mcpConfig file
{
"mcpServers": {
"appscreenstudio": {
"url": "https://www.appscreenstudio.com/api/mcp"
}
}
}Config file
{
"servers": {
"appscreenstudio": {
"type": "http",
"url": "https://www.appscreenstudio.com/api/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http appscreenstudio https://www.appscreenstudio.com/api/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about AppScreenStudio
How do I install AppScreenStudio in Claude Code?
Run claude mcp add --transport http appscreenstudio https://www.appscreenstudio.com/api/mcp in your terminal. You will also need to attach the Bearer token generated inside the web interface under Connect Your Agent.
What does the AppScreenStudio MCP server do?
It exposes tools for controlling the web mockup builder, letting your AI adjust copy, position device mockups, customize templates, and generate visual elements for app listings.
Why does the assistant return "No editor is connected"?
All actions are relayed straight to your running web browser tab. If that page is closed or not loaded, the server has nowhere to apply the changes and drops the request.
