Claude Code

Set up CE.SDK with Claude Code

Claude Code is Anthropic’s terminal coding agent, and the CE.SDK plugin makes it a creative-editor expert. Ten minutes of setup takes you from an idea like “an ad designer with background removal” to a working editor in your browser.

Before you start

You don’t need to be a developer to follow this guide. You need two things on your machine.

  • Claude Code installed and signed in. Open a terminal and type claude to check.
  • Node.js 20 or newer. It runs the editor you build.

From setup to working editor in four steps

Step 01

Install the CE.SDK plugin

Claude Code supports the CE.SDK skills natively as a plugin. Run these two commands in your terminal. They add the IMG.LY marketplace and install the plugin: the CE.SDK docs, starter kits and build workflows for 10 web frameworks, bundled offline. Claude Code picks the plugin up the next time you start it, so restart the session afterwards (or run /reload-plugins inside a running one).

In your terminal 
claude plugin marketplace add imgly/agent-skills
claude plugin install cesdk@imgly
Step 02

Connect the live docs

The MCP server gives Claude Code real-time search over the current CE.SDK documentation, so answers stay accurate between releases. One command connects it, no API key required. --scope user registers the server for every project on your machine; without it Claude Code adds it to the current folder only, and it would be missing from the empty folder you start in at step 04.

Add the CE.SDK MCP server 
claude mcp add --scope user --transport http imgly_docs https://mcp.img.ly/mcp
Step 03

Verify it works

Run claude plugin list in your terminal and confirm cesdk@imgly is active.

In your terminal 
claude plugin list

Then start a session, type /cesdk and watch the build, explain, and docs commands autocomplete. /mcp lists the connected servers, including imgly_docs.

Inside Claude Code 
/cesdk:docs-react getting started
Step 04

Describe what you want to build

Start claude in an empty folder and paste a product idea. Claude Code scaffolds the project, installs CE.SDK, wires up the features, and prints the command to run it (usually npm run dev). Run it and your editor opens in the browser.

Your first build prompt 
/cesdk:build an ad designer web app: pull stock photos from Unsplash, one-click background removal for product shots, AI image generation for campaign variants, and export finished ads as PNG and print-ready PDF.

What you can do

Three commands turn Claude Code into a CE.SDK specialist.

Build a feature

/cesdk:build sets up a CE.SDK Web project and implements the features you ask for. Describe the outcome and Claude Code scaffolds and wires it up.

Understand a concept

/cesdk:explain breaks down how CE.SDK works and how the pieces fit together, adapted to your framework and level.

Look up the docs

/cesdk:docs-[framework] pulls reference guides and API docs into your terminal across 10 frameworks, including React, Next.js, and Node.js.

Example prompts

Copy a starting point into Claude Code. Start a product, extend it feature by feature, or automate a whole creative workflow.

Scaffold an editor
/cesdk:build a photo editor with filters, background removal, and text overlays
/cesdk:build a web-to-print business card designer: templates with locked layouts, live preview, and print-ready PDF with bleed margins
/cesdk:build a video promo editor: trim clips, add captions and music, export as MP4
Automate a workflow
/cesdk:build a Node.js pipeline that reads products from a CSV and renders localized promo banners in five sizes as PNGs, no browser needed
/cesdk:build batch-apply our new brand template to a folder of designs
Understand it
/cesdk:explain what CE.SDK gives me out of the box versus what I configure
/cesdk:explain how the block hierarchy works

Tips

Get better results from the first prompt.

  • Prompt with outcomes, not implementation: “users upload a photo and get a framed print preview” beats “integrate the export API”.
  • Start in an empty folder so the scaffold doesn’t mix with other files.
  • Ask Claude Code to run the dev server and open the browser for you.
  • The marketplace step is one-time; update with claude plugin marketplace update imgly then claude plugin update cesdk@imgly.

Set up another agent

Point a different coding agent at CE.SDK.

Claude Code

Ship a working editor

Install the plugin, paste a prompt, and Claude Code scaffolds a CE.SDK project you can run.

Read the Agent Skills docs Back to all agents

Claude Code FAQs

No. Claude Code runs in the terminal, but you steer it in plain language. Describe the product you want and it scaffolds the project, runs it, and tells you where to look. You review the result in the browser and keep prompting.

You need a Claude account for Claude Code itself. The CE.SDK plugin and MCP server are free and need no API key, and the project Claude Code scaffolds runs locally without a license key. Licensing only comes in when you deploy what you built.

Both, ideally. The plugin bundles the docs and starter kits offline so Claude Code can scaffold autonomously, and adds the /cesdk slash commands. The MCP server adds real-time documentation search on top, so answers stay current between releases.

Restart the Claude Code session after installing so the plugin loads, then run `claude plugin list` to confirm `cesdk@imgly` is active.