@appscreenshotstudio/mcp 0.5.4 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +226 -225
  2. package/dist/index.js +12 -9
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,225 +1,226 @@
1
- # @appscreenshotstudio/mcp
2
-
3
- MCP server for generating App Store screenshots via [AppScreenshotStudio](https://appscreenshotstudio.com).
4
-
5
- Let your AI agent (Claude Code, Cursor, Windsurf) generate, edit, and export App Store screenshots as a native tool.
6
-
7
- ## Setup
8
-
9
- ### 1. Get an API key
10
-
11
- Create one at [appscreenshotstudio.com/settings](https://appscreenshotstudio.com/settings) under **API Keys**.
12
-
13
- ### 2. Install
14
-
15
- **Claude Code:**
16
-
17
- ```bash
18
- claude mcp add appscreenshotstudio -- npx -y @appscreenshotstudio/mcp
19
- ```
20
-
21
- Then add to your shell profile (`.bashrc`, `.zshrc`, etc.):
22
-
23
- ```bash
24
- export APPSCREENSHOTSTUDIO_API_KEY="sk_live_your_key_here"
25
- ```
26
-
27
- **Cursor / Windsurf / Other MCP clients:**
28
-
29
- Add to your MCP config (`.cursor/mcp.json`, `settings.json`, etc.):
30
-
31
- ```json
32
- {
33
- "mcpServers": {
34
- "appscreenshotstudio": {
35
- "command": "npx",
36
- "args": ["-y", "@appscreenshotstudio/mcp"],
37
- "env": {
38
- "APPSCREENSHOTSTUDIO_API_KEY": "sk_live_your_key_here"
39
- }
40
- }
41
- }
42
- }
43
- ```
44
-
45
- ## Tools
46
-
47
- ### `prepare-screenshot-brief`
48
-
49
- Get a research checklist and strategy guide before generating. Returns file patterns to search for across tech stacks, story flow recommendations per app category, headline tips, and the `codebase_context` schema to fill in.
50
-
51
- **Free — no API call or credits.**
52
-
53
- ### `generate-screenshots`
54
-
55
- Create a complete set of App Store screenshots. The agent researches your codebase first, then passes rich context for accurate, app-specific designs.
56
-
57
- | Parameter | Type | Required | Description |
58
- |---|---|---|---|
59
- | `app_name` | string | Yes | App name |
60
- | `app_description` | string | Yes | What the app does (1-3 sentences) |
61
- | `features` | string[] | No | Key features, ordered by importance (max 10) |
62
- | `brand_colors` | object | No | `{ primary, secondary?, accent? }` as hex |
63
- | `mood` | string | No | "energetic", "calm", "minimal", "bold", etc. |
64
- | `device_id` | string | No | Target device (default: `iphone-6.9`) |
65
- | `count` | number | No | Number of cards, 3-10 (default: 5) |
66
- | `story_flow` | string | No | Narrative structure (default: `auto`) |
67
- | `codebase_context` | object | No | App context from codebase research (see below) |
68
-
69
- **Costs 5 credits.**
70
-
71
- #### `codebase_context`
72
-
73
- Pass this for dramatically better screenshots. The context is persisted on the project and used in all subsequent chats.
74
-
75
- | Field | Description |
76
- |---|---|
77
- | `readme_summary` | App overview from README or docs |
78
- | `key_screens` | Main screens/views (e.g. "Dashboard", "Settings") |
79
- | `color_tokens` | Brand colors from theme files (e.g. `{ "primary": "#7C3AED" }`) |
80
- | `target_audience` | Who the app is for |
81
- | `app_category` | fitness, finance, social, productivity, etc. |
82
- | `competitive_edge` | What makes it unique |
83
- | `app_store_description` | Existing store listing if found |
84
- | `tech_stack` | React Native, SwiftUI, Flutter, etc. |
85
- | `ui_style` | "dark mode with neon accents", "clean minimal", etc. |
86
- | `primary_user_flow` | Main user journey through the app |
87
-
88
- ### `edit-screenshots`
89
-
90
- Make changes to an existing project with natural language. Optionally target specific cards.
91
-
92
- | Parameter | Type | Required | Description |
93
- |---|---|---|---|
94
- | `project_id` | string | Yes | From a previous `generate-screenshots` call |
95
- | `message` | string | Yes | What to change |
96
- | `card_indices` | number[] | No | Target specific cards by index (0-based). Omit to edit all. |
97
- | `codebase_context` | object | No | App context to enrich the edit (same schema as above) |
98
-
99
- **Costs 5 credits.**
100
-
101
- ### `upload-screenshots`
102
-
103
- Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. Reads files from your local filesystem and places them into the device frames.
104
-
105
- | Parameter | Type | Required | Description |
106
- |---|---|---|---|
107
- | `project_id` | string | Yes | From a previous `generate-screenshots` call |
108
- | `screenshots` | array | Yes | Array of `{ file_path, card_index }` — maps local files to cards |
109
-
110
- Each item in `screenshots`:
111
-
112
- | Field | Type | Description |
113
- |---|---|---|
114
- | `file_path` | string | Absolute path to a local PNG, JPG, or WEBP file |
115
- | `card_index` | number | Which card to place this screenshot on (0-based) |
116
-
117
- **Free.**
118
-
119
- ### `render-screenshots`
120
-
121
- Export to high-resolution PNGs. Returns download URLs.
122
-
123
- | Parameter | Type | Required | Description |
124
- |---|---|---|---|
125
- | `project_id` | string | Yes | Project to render |
126
-
127
- **Free.**
128
-
129
- ### `get-project`
130
-
131
- Retrieve a project's current state — cards, elements, backgrounds, and metadata.
132
-
133
- | Parameter | Type | Required | Description |
134
- |---|---|---|---|
135
- | `project_id` | string | Yes | Project ID to retrieve |
136
-
137
- **Free.**
138
-
139
- ### `generate-background`
140
-
141
- Generate an AI background for a specific card. Uses project metadata (brand colors, mood, theme) for contextual results.
142
-
143
- | Parameter | Type | Required | Description |
144
- |---|---|---|---|
145
- | `project_id` | string | Yes | Project containing the card |
146
- | `card_index` | number | Yes | Which card (0-based) |
147
- | `prompt` | string | Yes | Description of the background |
148
-
149
- **Costs 6 credits.**
150
-
151
- ### `generate-panoramic-background`
152
-
153
- Generate one wide image and slice it across multiple cards so they read as a continuous scene in the App Store gallery. Use after a panoramic chat edit ("pano the background across cards 1-3") to fulfill the pending panoramic, or pass an explicit `prompt` / `pexels_query`.
154
-
155
- | Parameter | Type | Required | Description |
156
- |---|---|---|---|
157
- | `project_id` | string | Yes | Project containing the cards |
158
- | `prompt` | string | No | AI scene description (Gemini). Costs 6 credits. |
159
- | `pexels_query` | string | No | Stock photo search query (Pexels). Free. |
160
- | `card_indices` | number[] | No | Cards sharing the panoramic (0-based, min 2). Default: first 3. |
161
-
162
- Omit both `prompt` and `pexels_query` to fulfill a panoramic already set up by `generate-screenshots` / `edit-screenshots`.
163
-
164
- **Costs 6 credits (AI prompt) or free (Pexels query).**
165
-
166
- ### `list-devices`
167
-
168
- Show all supported device specs. No API call needed.
169
-
170
- **Free.**
171
-
172
- ## Claude Code Skill
173
-
174
- The MCP server auto-installs a Claude Code skill on first startup. The skill teaches Claude a structured research-first workflow for better screenshot results. You can also install it manually:
175
-
176
- ```bash
177
- npx @appscreenshotstudio/mcp install-skill
178
- ```
179
-
180
- Once installed, use `/appscreenshotstudio` in Claude Code or just ask "generate App Store screenshots for my app".
181
-
182
- ## Supported Devices
183
-
184
- | ID | Name | Size | Required |
185
- |---|---|---|---|
186
- | `iphone-6.9` | iPhone 16 Pro Max | 1260x2736 | App Store |
187
- | `iphone-6.3` | iPhone 17 Pro | 1206x2622 | Optional |
188
- | `ipad-13` | iPad Pro 13" | 2064x2752 | App Store |
189
- | `android-phone` | Android Phone | 1080x2340 | Play Store |
190
- | `android-tablet-10` | Android Tablet 7" | 1200x1920 | Play Store |
191
- | `apple-watch-ultra` | Apple Watch Ultra 2 | 410x502 | App Store |
192
-
193
- ## Design Features
194
-
195
- The AI generates professional screenshots using:
196
-
197
- - **94 shape types** (17 core + 77 decorative across 13 categories): nature (leaf, flower, tree), weather (cloud, sun, snowflake), celebration (sparkle, trophy, crown, confetti), social (chat-bubble, music-note), tech (rocket, code-bracket), health (dumbbell, flame), food (coffee-cup, pizza), travel (airplane, compass), finance (dollar-sign, piggy-bank), education (graduation-cap, lightbulb), pets (paw-print, cat-face), emoji (smiley, fire-emoji), abstract (swirl, infinity, gem)
198
- - **Rich text**: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
199
- - **Compound trust signals**: statRow, laurelStat, starRating, quote, pressBanner, featureGrid, beforeAfterSplit, stepList — auto-positioned per layout
200
- - **Frame color**: recolor the device frame `natural` (default), `black`, `white`, `gold`. Requires Growth plan or higher.
201
- - **Panoramics**: slice one wide image across cards (chat tags the cards, then `generate-panoramic-background` creates and slices the image) or stretch a foreground element across adjacent cards (`apply_element_span`). Gallery gutters are accounted for.
202
- - **9 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, landscape-left, landscape-right
203
- - **13 layouts**: `text-top-device-bottom`, `text-top-device-tilted`, `device-hero`, `social-proof`, `review-clip`, `screen-hero`, `lifestyle-hero`, `feature-grid`, `before-after`, `stats-hero`, `metric-badge`, `annotated-feature`, `step-flow`. The AI varies `deviceScale`, `deviceSide`, `textPosition`, and `textAlign` per card so a set never looks like duplicates.
204
-
205
- ## Workflow
206
-
207
- 1. **Research** — Agent calls `prepare-screenshot-brief`, then searches your codebase for app name, features, colors, screens, and audience
208
- 2. **Generate** — Agent calls `generate-screenshots` with `codebase_context` for app-specific designs
209
- 3. **Iterate** — Agent calls `edit-screenshots` to refine (codebase context carries over automatically)
210
- 4. **Upload** — Agent calls `upload-screenshots` with local file paths to fill device mockups
211
- 5. **Export** — Agent calls `render-screenshots` or click "Download All" in the web app
212
-
213
- ## Security
214
-
215
- - API key stays on your machine (environment variable)
216
- - All API calls over HTTPS
217
- - stdio transport no network ports opened
218
- - Revoke keys anytime in Settings
219
-
220
- ## Links
221
-
222
- - [Screenshot API + MCP overview](https://appscreenshotstudio.com/api)
223
- - [Full docs](https://appscreenshotstudio.com/docs/mcp)
224
- - [REST API reference](https://appscreenshotstudio.com/docs/api)
225
- - [Pricing](https://appscreenshotstudio.com/pricing)
1
+ # @appscreenshotstudio/mcp
2
+
3
+ MCP server for generating App Store screenshots via [AppScreenshotStudio](https://appscreenshotstudio.com).
4
+
5
+ Let your AI agent (Claude Code, Cursor, Windsurf) generate, edit, and export App Store screenshots as a native tool.
6
+
7
+ ## Setup
8
+
9
+ ### 1. Get an API key
10
+
11
+ Create one at [appscreenshotstudio.com/settings](https://appscreenshotstudio.com/settings) under **API Keys**.
12
+
13
+ ### 2. Install
14
+
15
+ **Claude Code:**
16
+
17
+ ```bash
18
+ claude mcp add appscreenshotstudio -- npx -y @appscreenshotstudio/mcp
19
+ ```
20
+
21
+ Then add to your shell profile (`.bashrc`, `.zshrc`, etc.):
22
+
23
+ ```bash
24
+ export APPSCREENSHOTSTUDIO_API_KEY="sk_live_your_key_here"
25
+ ```
26
+
27
+ **Cursor / Windsurf / Other MCP clients:**
28
+
29
+ Add to your MCP config (`.cursor/mcp.json`, `settings.json`, etc.):
30
+
31
+ ```json
32
+ {
33
+ "mcpServers": {
34
+ "appscreenshotstudio": {
35
+ "command": "npx",
36
+ "args": ["-y", "@appscreenshotstudio/mcp"],
37
+ "env": {
38
+ "APPSCREENSHOTSTUDIO_API_KEY": "sk_live_your_key_here"
39
+ }
40
+ }
41
+ }
42
+ }
43
+ ```
44
+
45
+ ## Tools
46
+
47
+ ### `prepare-screenshot-brief`
48
+
49
+ Get a research checklist and strategy guide before generating. Returns file patterns to search for across tech stacks, story flow recommendations per app category, headline tips, and the `codebase_context` schema to fill in.
50
+
51
+ **Free — no API call or credits.**
52
+
53
+ ### `generate-screenshots`
54
+
55
+ Create a complete set of App Store screenshots. The agent researches your codebase first, then passes rich context for accurate, app-specific designs.
56
+
57
+ | Parameter | Type | Required | Description |
58
+ |---|---|---|---|
59
+ | `app_name` | string | Yes | App name |
60
+ | `app_description` | string | Yes | What the app does (1-3 sentences) |
61
+ | `features` | string[] | No | Key features, ordered by importance (max 10) |
62
+ | `brand_colors` | object | No | `{ primary, secondary?, accent? }` as hex |
63
+ | `mood` | string | No | "energetic", "calm", "minimal", "bold", etc. |
64
+ | `device_id` | string | No | Target device (default: `iphone-6.9`) |
65
+ | `count` | number | No | Number of cards, 3-10 (default: 5) |
66
+ | `story_flow` | string | No | Narrative structure (default: `auto`) |
67
+ | `codebase_context` | object | No | App context from codebase research (see below) |
68
+
69
+ **Costs 5 credits.**
70
+
71
+ #### `codebase_context`
72
+
73
+ Pass this for dramatically better screenshots. The context is persisted on the project and used in all subsequent chats.
74
+
75
+ | Field | Description |
76
+ |---|---|
77
+ | `readme_summary` | App overview from README or docs |
78
+ | `key_screens` | Main screens/views (e.g. "Dashboard", "Settings") |
79
+ | `color_tokens` | Brand colors from theme files (e.g. `{ "primary": "#7C3AED" }`) |
80
+ | `target_audience` | Who the app is for |
81
+ | `app_category` | fitness, finance, social, productivity, etc. |
82
+ | `competitive_edge` | What makes it unique |
83
+ | `app_store_description` | Existing store listing if found |
84
+ | `tech_stack` | React Native, SwiftUI, Flutter, etc. |
85
+ | `ui_style` | "dark mode with neon accents", "clean minimal", etc. |
86
+ | `primary_user_flow` | Main user journey through the app |
87
+
88
+ ### `edit-screenshots`
89
+
90
+ Make changes to an existing project with natural language. Optionally target specific cards.
91
+
92
+ | Parameter | Type | Required | Description |
93
+ |---|---|---|---|
94
+ | `project_id` | string | Yes | From a previous `generate-screenshots` call |
95
+ | `message` | string | Yes | What to change |
96
+ | `card_indices` | number[] | No | Target specific cards by index (0-based). Omit to edit all. |
97
+ | `codebase_context` | object | No | App context to enrich the edit (same schema as above) |
98
+
99
+ **Costs 5 credits.**
100
+
101
+ ### `upload-screenshots`
102
+
103
+ Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. Reads files from your local filesystem and places them into the device frames.
104
+
105
+ | Parameter | Type | Required | Description |
106
+ |---|---|---|---|
107
+ | `project_id` | string | Yes | From a previous `generate-screenshots` call |
108
+ | `screenshots` | array | Yes | Array of `{ file_path, card_index }` — maps local files to cards |
109
+
110
+ Each item in `screenshots`:
111
+
112
+ | Field | Type | Description |
113
+ |---|---|---|
114
+ | `file_path` | string | Absolute path to a local PNG, JPG, or WEBP file |
115
+ | `card_index` | number | Which card to place this screenshot on (0-based) |
116
+
117
+ **Free.**
118
+
119
+ ### `render-screenshots`
120
+
121
+ Export to high-resolution PNGs. Returns download URLs.
122
+
123
+ | Parameter | Type | Required | Description |
124
+ |---|---|---|---|
125
+ | `project_id` | string | Yes | Project to render |
126
+
127
+ **Free.**
128
+
129
+ ### `get-project`
130
+
131
+ Retrieve a project's current state — cards, elements, backgrounds, and metadata.
132
+
133
+ | Parameter | Type | Required | Description |
134
+ |---|---|---|---|
135
+ | `project_id` | string | Yes | Project ID to retrieve |
136
+
137
+ **Free.**
138
+
139
+ ### `generate-background`
140
+
141
+ Generate an AI background for a specific card. Uses project metadata (brand colors, mood, theme) for contextual results.
142
+
143
+ | Parameter | Type | Required | Description |
144
+ |---|---|---|---|
145
+ | `project_id` | string | Yes | Project containing the card |
146
+ | `card_index` | number | Yes | Which card (0-based) |
147
+ | `prompt` | string | Yes | Description of the background |
148
+
149
+ **Costs 6 credits.**
150
+
151
+ ### `generate-panoramic-background`
152
+
153
+ Generate one wide image and slice it across multiple cards so they read as a continuous scene in the App Store gallery. Use after a panoramic chat edit ("pano the background across cards 1-3") to fulfill the pending panoramic, or pass an explicit `prompt` / `pexels_query`.
154
+
155
+ | Parameter | Type | Required | Description |
156
+ |---|---|---|---|
157
+ | `project_id` | string | Yes | Project containing the cards |
158
+ | `prompt` | string | No | AI scene description (Gemini). Costs 6 credits. |
159
+ | `pexels_query` | string | No | Stock photo search query (Pexels). Free. |
160
+ | `card_indices` | number[] | No | Cards sharing the panoramic (0-based, min 2). Default: first 3. |
161
+
162
+ Omit both `prompt` and `pexels_query` to fulfill a panoramic already set up by `generate-screenshots` / `edit-screenshots`.
163
+
164
+ **Costs 6 credits (AI prompt) or free (Pexels query).**
165
+
166
+ ### `list-devices`
167
+
168
+ Show all supported device specs. No API call needed.
169
+
170
+ **Free.**
171
+
172
+ ## Claude Code Skill
173
+
174
+ The MCP server auto-installs a Claude Code skill on first startup. The skill teaches Claude a structured research-first workflow for better screenshot results. You can also install it manually:
175
+
176
+ ```bash
177
+ npx @appscreenshotstudio/mcp install-skill
178
+ ```
179
+
180
+ Once installed, use `/appscreenshotstudio` in Claude Code or just ask "generate App Store screenshots for my app".
181
+
182
+ ## Supported Devices
183
+
184
+ | ID | Name | Size | Required |
185
+ |---|---|---|---|
186
+ | `iphone-6.9` | iPhone 16 Pro Max | 1260x2736 | App Store |
187
+ | `iphone-6.3` | iPhone 17 Pro | 1206x2622 | Optional |
188
+ | `ipad-13` | iPad Pro 13" | 2064x2752 | App Store |
189
+ | `android-phone` | Android Phone | 1080x2340 | Play Store |
190
+ | `android-tablet-10` | Android Tablet 7" | 1200x1920 | Play Store |
191
+ | `apple-watch-ultra` | Apple Watch Ultra 2 | 410x502 | App Store |
192
+
193
+ ## Design Features
194
+
195
+ The AI generates professional screenshots using:
196
+
197
+ - **94 shape types** (17 core + 77 decorative across 13 categories): nature (leaf, flower, tree), weather (cloud, sun, snowflake), celebration (sparkle, trophy, crown, confetti), social (chat-bubble, music-note), tech (rocket, code-bracket), health (dumbbell, flame), food (coffee-cup, pizza), travel (airplane, compass), finance (dollar-sign, piggy-bank), education (graduation-cap, lightbulb), pets (paw-print, cat-face), emoji (smiley, fire-emoji), abstract (swirl, infinity, gem)
198
+ - **Rich text**: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
199
+ - **Compound trust signals**: statRow, laurelStat, starRating, quote, pressBanner. Auto-positioned per layout, and opt-in: supply the real figure or the card ships clean
200
+ - **Background textures**: diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Ask for one explicitly; they are subtle by design and run continuously across the set.
201
+ - **Frame color**: recolor the device frame `natural` (default), `black`, `white`, `gold`. Requires Growth plan or higher.
202
+ - **Panoramics**: slice one wide image across cards (chat tags the cards, then `generate-panoramic-background` creates and slices the image) or stretch a foreground element across adjacent cards (`apply_element_span`). Gallery gutters are accounted for.
203
+ - **9 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, landscape-left, landscape-right
204
+ - **10 layouts**: `text-top-device-bottom`, `text-top-device-tilted`, `device-hero`, `social-proof`, `review-clip`, `screen-hero`, `lifestyle-hero`, `stats-hero`, `metric-badge`, `annotated-feature`. The AI varies `deviceScale`, `deviceSide`, `textPosition`, and `textAlign` per card so a set never looks like duplicates.
205
+
206
+ ## Workflow
207
+
208
+ 1. **Research** — Agent calls `prepare-screenshot-brief`, then searches your codebase for app name, features, colors, screens, and audience
209
+ 2. **Generate** — Agent calls `generate-screenshots` with `codebase_context` for app-specific designs
210
+ 3. **Iterate** — Agent calls `edit-screenshots` to refine (codebase context carries over automatically)
211
+ 4. **Upload** — Agent calls `upload-screenshots` with local file paths to fill device mockups
212
+ 5. **Export** — Agent calls `render-screenshots` or click "Download All" in the web app
213
+
214
+ ## Security
215
+
216
+ - API key stays on your machine (environment variable)
217
+ - All API calls over HTTPS
218
+ - stdio transport no network ports opened
219
+ - Revoke keys anytime in Settings
220
+
221
+ ## Links
222
+
223
+ - [Screenshot API + MCP overview](https://appscreenshotstudio.com/api)
224
+ - [Full docs](https://appscreenshotstudio.com/docs/mcp)
225
+ - [REST API reference](https://appscreenshotstudio.com/docs/api)
226
+ - [Pricing](https://appscreenshotstudio.com/pricing)
package/dist/index.js CHANGED
@@ -192,7 +192,7 @@ const chatImagesSchema = z.array(z.object({
192
192
  // ─── MCP Server ─────────────────────────────────────────────────────────────────
193
193
  const server = new McpServer({
194
194
  name: 'appscreenshotstudio',
195
- version: '0.5.4',
195
+ version: '0.5.5',
196
196
  });
197
197
  // Tool 1: generate-screenshots
198
198
  server.registerTool('generate-screenshots', {
@@ -211,14 +211,11 @@ The AI picks a narrative arc that fits the app's sell angle (trust-first for fin
211
211
  - review-clip: rating-statement headline + stars + quote + bottom-clipped device
212
212
  - screen-hero: top-clipped device + centered headline + optional trust stat
213
213
  - lifestyle-hero: full-bleed photo background + text overlay (no device)
214
- - feature-grid: headline + 2×2 or 2×3 icon+label grid, no device
215
- - before-after: dark before-half + bright after-half (transformation apps)
216
214
  - stats-hero: giant centered stat(s), no device, numbers-led
217
215
  - metric-badge: centered device + chunky "achievement card" floating over its screen
218
216
  - annotated-feature: tilted device + side callout chip linked by a connector line
219
- - step-flow: headline + 2-4 numbered step rows ("how it works"), no device
220
217
 
221
- Each card can carry auto-positioned compound fields: statRow, laurelStat, pressBanner, starRating, quote, featureGrid, beforeAfterSplit, stepList.
218
+ Each card can carry auto-positioned compound fields: statRow, laurelStat, pressBanner, starRating, quote. Trust signals are opt-in: supply the real number, quote or press name, or the card ships clean rather than inventing one.
222
219
 
223
220
  Panoramic backgrounds slice one wide AI-generated or Pexels image across multiple cards for cohesion. Panoramic element spans stretch a foreground image or device across adjacent cards. Note: if the design comes back with a panoramic background, the chat only tags the cards; call generate-panoramic-background afterwards to actually create and slice the wide image.
224
221
 
@@ -351,8 +348,9 @@ server.registerTool('edit-screenshots', {
351
348
  What you can change:
352
349
  - Text: headlines, subtitles, badge text, font size, font family (Inter, Poppins, Montserrat, DM Sans, Space Grotesk, etc.)
353
350
  - Text styling: per-word color, bold, italic, underline, highlight pills (colored background behind words), gradient text, text stroke outlines
354
- - Colors: brand palette, gradient backgrounds, accent colors, text colors
355
- - Layouts (13 types): text-top-device-bottom, text-top-device-tilted, device-hero, social-proof, review-clip, screen-hero, lifestyle-hero, feature-grid, before-after, stats-hero, metric-badge, annotated-feature, step-flow. The AI picks a narrative arc (HOOK EDUCATE PROVE CONVERT) across the set.
351
+ - Colors: brand palette, gradient backgrounds, accent colors, text colors. A set can rotate MULTIPLE accents card by card ("pink, then coral, then brick") and each card keeps its own highlight colour.
352
+ - Background textures (ask for one explicitly, they are never added on their own): diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Kept subtle by design so they cannot affect headline contrast. Tiled textures run continuously across the whole set; radial-rays and concentric-circles can be centred on the middle of the set so the pattern fans out across every card.
353
+ - Layouts (10 types): text-top-device-bottom, text-top-device-tilted, device-hero, social-proof, review-clip, screen-hero, lifestyle-hero, stats-hero, metric-badge, annotated-feature. The AI picks a narrative arc (HOOK → EDUCATE → PROVE → CONVERT) across the set.
356
354
  - Layout params: deviceScale (small/medium/large), deviceSide (left/right), textPosition (above/below), textAlign (left/center)
357
355
  - Device mockups: perspective variants (flat, left-15, right-15, left-30, right-30, isometric, top-down, landscape-left, landscape-right), 2D rotation, resize, reposition
358
356
  - Frame color: recolor the device frame — "natural" (default), "black", "white", "gold". Examples: "make the iPhone gold", "black titanium finish", "white iPhone". Requires Growth plan or higher.
@@ -382,7 +380,6 @@ Example edit messages:
382
380
  - "Recolor the iPhone frame to gold across all cards"
383
381
  - "Replace card 3 with a CTA card saying Download Free"
384
382
  - "Switch card 2 to device-hero layout with statRow showing our three key metrics"
385
- - "Add a before-after card showing the transformation"
386
383
  - "Add decorative leaf and sparkle shapes scattered in the background"
387
384
  - "Make 'Every' underlined and italic in the headline"`,
388
385
  inputSchema: z.object({
@@ -438,15 +435,21 @@ Example edit messages:
438
435
  }
439
436
  const data = res.data.data;
440
437
  const creditsRemaining = res.data.credits_remaining;
438
+ // A device switch ("make this for iPad") clones the project. All further
439
+ // edits, uploads, and renders must target the NEW project id, not the old one.
440
+ const activeProjectId = data.duplicated_project_id || project_id;
441
441
  return {
442
442
  content: [{
443
443
  type: 'text',
444
444
  text: [
445
445
  data.message,
446
446
  '',
447
+ data.duplicated_project_id
448
+ ? `NEW PROJECT CREATED at the target device size: ${data.duplicated_project_id}\nUse this project_id for all further edits, screenshot uploads, and rendering. The original project (${project_id}) is unchanged.`
449
+ : '',
447
450
  `Cards: ${data.canvas_state?.cards?.length || 0}`,
448
451
  `Credits remaining: ${creditsRemaining}`,
449
- `Project URL: ${API_BASE}/builder/${project_id}`,
452
+ `Project URL: ${API_BASE}/builder/${activeProjectId}`,
450
453
  '',
451
454
  data.suggestions?.length
452
455
  ? `Suggestions: ${data.suggestions.join(', ')}`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscreenshotstudio/mcp",
3
- "version": "0.5.4",
3
+ "version": "0.6.0",
4
4
  "description": "MCP server for generating App Store screenshots via AppScreenshotStudio",
5
5
  "type": "module",
6
6
  "license": "MIT",