Update CLI README with GIF and import/export/push/pull by fredrikekelund · Pull Request #3029 · Automattic/studio

fredrikekelund · 2026-04-09T14:48:49Z

Related issues

Fixes STU-1468

How AI was used in this PR

To help with phrasing.

Proposed Changes

Add a GIF to the top of the CLI README (generated with asciinema and agg, optimized with ImageOptim) that includes a studio site create call, two studio wp calls and a studio export call.
Added details about the studio export and studio import commands to the CLI README.
Added details about the studio pull and studio push commands to the CLI README.
Included the new assets directory in the files array in the CLI package.json file (to ensure the GIF is included when publishing to npm)

Testing Instructions

N/A

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

wpmobilebot · 2026-04-09T15:10:05Z

📊 Performance Test Results

Comparing feea7a7 vs trunk

app-size

Metric	trunk	`feea7a7`	Diff	Change
App Size (Mac)	1276.55 MB	1275.84 MB	0.70 MB	⚪ 0.0%

site-editor

Metric	trunk	`feea7a7`	Diff	Change
load	1532 ms	1858 ms	+326 ms	🔴 21.3%

site-startup

Metric	trunk	`feea7a7`	Diff	Change
siteCreation	8148 ms	8149 ms	+1 ms	⚪ 0.0%
siteStartup	4160 ms	4159 ms	1 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

sejas

Changes look great! Thanks for adding the GIF.
I'll create a follow-up to mention Studio Code between today and tomorrow.
Now I wonder if the Gif should be Studio Code demo 😆 . We can discuss/update it next week.

sejas

Let's change the partial URL to full URL.

sejas · 2026-04-09T16:55:03Z

apps/cli/README.md

 - Publish ephemeral preview sites to share (requires WordPress.com login).
 - Integrate with AI coding agents. Every site comes with an `AGENTS.md` file.

+![WordPress Studio CLI demo](./assets/demo.gif)


@fredrikekelund , probably the gif won't work on NPM. I suggest using the full URL.

Suggested change

![WordPress Studio CLI demo](./assets/demo.gif)

![WordPress Studio CLI demo](https://raw.githubusercontent.com/Automattic/studio/584431b94109f957843f85b62d8f2a6da6012b0c/apps/cli/assets/demo.gif)

ora is a good example that shows this approach should work. See the npm package and the raw README.

Apparently, npm uses GitHub's API to render the Markdown. Makes sense then that the package.json must contain details about the location of the GitHub repo for image rendering to work as expected (see this StackOverflow answer)

fredrikekelund · 2026-04-10T08:07:01Z

I'll create a follow-up to mention Studio Code between today and tomorrow.

Great 👍

Now I wonder if the Gif should be Studio Code demo 😆 . We can discuss/update it next week.

Yeah, that seems sensible. I think the ideal showcase would be something like a combination of studio site create, studio site pull, and studio code. That's the kind of workflow we want to promote.

* Update CLI README * Tweaks * More tweaks * Tweak * Wider

* [skip ci] Code freeze: Update translatable strings for 1.7.8 * [skip ci] Code freeze: Add draft release notes for 1.7.8 * Add push/pull/import/export MCP tools for AI agents (#3022) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * Sort studio code commands and subcommands alphabetically (#3027) * Moved the `code` command registration in `apps/cli/index.ts` so that top-level CLI commands appear in alphabetical order * Strip unnecessary fields in wpcom_request response (#3005) * Strip bloated plan.features from wpcom_request responses The WP.com /sites/{id} endpoint returns a plan object whose features sub-field alone is 60K+ characters, pushing the total response past Claude Code's ~100K character MCP tool result limit. The agent only needs product_slug, is_free, and expired to gate features, since the system prompt hardcodes what each plan tier can and can't do. Strip plan.features and keep only essential plan properties. * Also compact large array responses by stripping content and _links List endpoints like GET /templates can return 80K+ chars of block markup. Strip content and _links from array items when the response exceeds 80K chars — the agent can still identify items by slug/title and fetch individual ones for full content. * Add _fields prompt guidance and scope plan compaction as special case Add system prompt hint instructing the agent to use _fields on wp/v2 listing endpoints to minimize response sizes. Scope compactResponse() to only handle plan.features stripping with a clear comment that this is a special case (the API doesn't support sub-field filtering). Remove the generic array compaction in favor of prompt-driven field selection. * Add fields guidance for v1.1, rename stripOversizedFields Update system prompt to instruct the agent to use fields (v1.1) and _fields (wp/v2) to minimize response sizes, always including ID for v1.1 requests. Rename compactResponse to stripOversizedFields for clarity. * Remove indentation in JSON to save tokens * Fix dark mode visibility for error/success text in site list (#3034) * Fix dark mode onbiarding screen (#3025) Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Studio: Filter out deprecated warnings from fatal errors (#3018) * Filter out deprecated warnings from fatal errors * Ensure our error filtering approach is consistent with CLI * Apply changes to default exporter * Fix unit tests --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta1 * CLI: ensure Studio root exists before starting code agent (#3039) * Ensure startAiAgent() checks whether ~/Studio exists before launching the Claude SDK. * Define a localeData type to fix lint error: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. (ts 7056) * [skip ci] Bump version to 1.7.8-beta2 * Update illustration colors and add dot grid background (#3004) * Update Sync and Preview illustrations with dark mode support and dot grid background Rebuild the Sync tab illustration SVG with proper light/dark mode color switching. Update the Preview tab browser chrome to use light colors in light mode. Add an interactive DotGrid canvas component behind both illustrations with a radial gradient mask for a clean fade effect. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Extract IllustrationGrid wrapper, use CSS tokens in SVGs, add tests - Extract shared IllustrationGrid component (DotGrid + radial mask) used by both Sync and Preview tabs - Replace hardcoded SVG colors with CSS custom properties (--color-frame-surface, --color-frame-bg, etc.) so illustrations adapt automatically to theme changes - Scope SVG class names with short prefixes (sti-, sds-) to avoid collisions - Add basic tests for DotGrid and IllustrationGrid components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mock DotGrid in sync tests to fix canvas error in jsdom Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Respect prefers-reduced-motion in DotGrid When reduced motion is preferred, render a static grid with no intro animation, hover repulsion, or click ripples. Mouse event listeners are not attached at all. The grid still responds to resize and color scheme changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Keep WP logo white in dark mode on blue browser, dedup resize logic Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Solve for strange sidebars --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> * Upgrade archiver to v7 to fix glob and inflight deprecation warnings (#3050) * CLI: upgrade archiver to v7 to fix glob and inflight deprecation warnings archiver@6 → archiver@7 pulls in archiver-utils@5 which uses glob@10 instead of glob@8, eliminating the glob and inflight deprecation warnings. @types/archiver@7 dropped followSymlinks from CoreOptions (it's still supported at runtime), so cast ArchiverOptions at call sites instead of patching node_modules. Also fixes the broken ProgressData named import which doesn't work with the export= module style in @types/archiver@7. * Studio: upgrade archiver to v7, drop @types/archiver patch Consistent with the CLI upgrade. Drops the @types+archiver+6.0.4 patch in favour of the same cast-based approach used in apps/cli. * Studio: remove obsolete archiver@6 runtime patch * Studio: Fix sync info icon color in dark mode (#3053) The info icons next to the push progress bar had no fill color class, defaulting to black which is invisible on the dark background. Add fill-frame-text-secondary to match the existing offline icon style. * Update CLI README with GIF and import/export/push/pull (#3029) * Update CLI README * Tweaks * More tweaks * Tweak * Wider * Enforce minimum node version in the CLI (#3049) * Enforce minimum node version in the CLI * Tweaks * Allow translations to load first * Fix sidebar top padding on Windows (#3026) * [skip ci] Update translations * [skip ci] Bump version to 1.7.8-beta3 --------- Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> Co-authored-by: Roberto Aranda <roberto.aranda@automattic.com> Co-authored-by: Bernardo Cotrim <bmmcotrim@gmail.com> Co-authored-by: katinthehatsite <katerynakodonenko@gmail.com> Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Antonio Sejas <antonio@sejas.es> Co-authored-by: Shaun Andrews <shaun@automattic.com> Co-authored-by: Wojtek Naruniec <wojtek.naruniec@automattic.com> Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com> Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev> Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>

fredrikekelund added 3 commits April 9, 2026 16:36

Update CLI README

1c65b18

Tweaks

7e0161c

More tweaks

584431b

fredrikekelund requested review from a team and youknowriad April 9, 2026 14:48

fredrikekelund self-assigned this Apr 9, 2026

sejas approved these changes Apr 9, 2026

View reviewed changes

sejas reviewed Apr 9, 2026

View reviewed changes

fredrikekelund added 2 commits April 10, 2026 10:41

Tweak

7c4ee88

Wider

feea7a7

fredrikekelund enabled auto-merge (squash) April 10, 2026 08:44

fredrikekelund merged commit f565847 into trunk Apr 10, 2026
10 checks passed

fredrikekelund deleted the stu-1468-update-cli-readme branch April 10, 2026 09:09

lezama pushed a commit that referenced this pull request Apr 10, 2026

Update CLI README with GIF and import/export/push/pull (#3029)

97fbdc3

* Update CLI README * Tweaks * More tweaks * Tweak * Wider

katinthehatsite pushed a commit that referenced this pull request Apr 10, 2026

Update CLI README with GIF and import/export/push/pull (#3029)

7804f6f

* Update CLI README * Tweaks * More tweaks * Tweak * Wider

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update CLI README with GIF and import/export/push/pull#3029

Update CLI README with GIF and import/export/push/pull#3029
fredrikekelund merged 5 commits intotrunkfrom
stu-1468-update-cli-readme

fredrikekelund commented Apr 9, 2026

Uh oh!

wpmobilebot commented Apr 9, 2026 •

edited

Loading

Uh oh!

sejas left a comment

Uh oh!

sejas left a comment

Uh oh!

sejas Apr 9, 2026

Uh oh!

fredrikekelund Apr 10, 2026

Uh oh!

fredrikekelund Apr 10, 2026

Uh oh!

fredrikekelund commented Apr 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	![WordPress Studio CLI demo](./assets/demo.gif)
	![WordPress Studio CLI demo](https://raw.githubusercontent.com/Automattic/studio/584431b94109f957843f85b62d8f2a6da6012b0c/apps/cli/assets/demo.gif)

Conversation

fredrikekelund commented Apr 9, 2026

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

wpmobilebot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

fredrikekelund Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

fredrikekelund Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

fredrikekelund commented Apr 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wpmobilebot commented Apr 9, 2026 •

edited

Loading