--- title: "Set Up CE.SDK with VS Code Copilot - IMG.LY" description: "Turn GitHub Copilot in VS Code into a CE.SDK expert: install the Agent Skills, connect the live-docs MCP server, and build an editor from one prompt." url: "https://img.ly/capabilities/agents/vscode-copilot/" type: "page" --- > This is the markdown version of [Set Up CE.SDK with VS Code Copilot - IMG.LY](https://img.ly/capabilities/agents/vscode-copilot/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt). --- # VS Code Copilot: Set up CE.SDK with VS Code Copilot GitHub Copilot in VS Code is an in-editor AI agent. Ten minutes of setup turns it into a CE.SDK expert that takes you from an idea like "a photo editor with filters" to a working editor running 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. - [VS Code](https://code.visualstudio.com) with the GitHub Copilot extension, signed in. - [Node.js](https://nodejs.org) 20 or newer. It provides the `npx` command used below and runs the editor you build. ## From setup to working editor in four steps ### Step 01: Install the CE.SDK skills Open a terminal in your project folder (in VS Code: Terminal, then New Terminal) and run one command. It installs the CE.SDK Agent Skills: the CE.SDK docs and starter kits for 10 web frameworks. GitHub ships its own installer for Copilot skills, which records the version and provenance in the skill frontmatter. It needs GitHub CLI 2.90 or newer. **Install the skills for Copilot** ```bash gh skill install imgly/agent-skills ``` The vendor-neutral Skills CLI works too, and installs into `.agents/skills/` beside your project. Add `-g` to install once for every project on your machine. **Or use the Skills CLI** ```bash npx skills add imgly/agent-skills -a github-copilot ``` ### Step 02: Connect the live docs The MCP server gives Copilot real-time search over the current CE.SDK documentation, so answers stay accurate between releases. Create a file named `mcp.json` inside the `.vscode` folder at your project root, paste this in, and reload VS Code. **.vscode/mcp.json** ```json { "servers": { "imgly_docs": { "type": "http", "url": "https://mcp.img.ly/mcp" } } } ``` ### Step 03: Verify it works In Agent mode, check the tools picker for the `imgly_docs` tools, then ask a docs question and confirm the answer cites CE.SDK documentation. **Ask a test question** ```text How do I add background removal to a CE.SDK editor? ``` ### Step 04: Describe what you want to build Open Copilot Chat, switch to Agent mode, and paste a product idea. Copilot 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** ```text Build a photo editor web app with CE.SDK: filters and adjustments, text overlays with our brand fonts, one-click background removal, and PNG export sized for social media. ``` ## What you can do Three skills turn Copilot into a CE.SDK specialist, with live docs behind every answer. Ask in Agent mode and Copilot picks the right one, or call it by name with `/`. ### Build a feature **`build`** sets up a CE.SDK Web project and implements the features you ask for. Describe the outcome and Copilot scaffolds and wires it up. ### Understand a concept **`explain`** breaks down how CE.SDK works and how the pieces fit together, adapted to your framework and level. ### Search the live docs With the MCP server connected, Copilot answers CE.SDK questions from the current documentation, so guidance reflects the latest release. ## Example prompts Copy a starting point into Copilot Chat. Start a product, extend it feature by feature, or ask how something works before you commit to it. **Scaffold an editor** ```text Build a CE.SDK annotation tool: users mark up screenshots with arrows, boxes, and blur for sensitive data, then export as PNG. Build a CE.SDK real estate flyer maker with listing templates, photo placeholders, and print-ready PDF export. Build a CE.SDK video highlight editor: trim clips, add captions, export MP4. ``` **Extend it** ```text Add a template gallery so users start from our designs. Add AI image generation so users can create visuals from a text prompt. Add stickers and shapes from our asset library. ``` **Understand it** ```text What export formats does CE.SDK support? Show me how to configure the CE.SDK toolbar in React. ``` ## Tips Get better results from the first prompt. - Prompt with outcomes, not implementation: "users annotate a screenshot and download it" beats "integrate the export API". - MCP tools surface in Copilot's Agent mode; switch modes if you don't see them. - Skills fire from a plain-language request. To call one directly, type `/` and pick it by name, such as `/build`. - Commit `.vscode/mcp.json` so your whole team shares the connection. - Run skills and MCP together: skills for scaffolding, the MCP server for live docs search. ## Set up another agent Point a different coding agent at CE.SDK. - [Set up CE.SDK with Claude Code](https://img.ly/capabilities/agents/claude-code.md) - [Set up CE.SDK with OpenAI Codex](https://img.ly/capabilities/agents/openai-codex.md) - [Set up CE.SDK with Cursor](https://img.ly/capabilities/agents/cursor.md) - [Set up CE.SDK with Claude Desktop](https://img.ly/capabilities/agents/claude-desktop.md) - [Set up CE.SDK with Devin Desktop](https://img.ly/capabilities/agents/devin-desktop.md) ## VS Code Copilot: Ship a working editor Install the skills, paste a prompt, and Copilot scaffolds a CE.SDK project you can run. [Read the Agent Skills docs](https://img.ly/docs/cesdk/js/get-started/agent-skills-f7g8h9.md#setup-instructions) [Back to all agents](https://img.ly/capabilities/agents.md) ## VS Code Copilot FAQs ### VS Code Copilot **Q: Do I need to know how to code?** A: No. Switch Copilot Chat to Agent mode, describe the product you want in plain language, and Copilot scaffolds the project and tells you how to run it. You review the result in the browser and keep prompting. **Q: Do I need a license key or an account?** A: You need a GitHub Copilot subscription for Copilot itself. The CE.SDK skills and MCP server are free and need no API key, and the project Copilot scaffolds runs locally without a license key. Licensing only comes in when you deploy what you built. **Q: Agent Skills or MCP server?** A: Both, ideally. Agent Skills bundle the docs and starter kits offline so Copilot can scaffold autonomously. The MCP server adds real-time documentation search on top, so answers stay current between releases. **Q: The imgly\_docs tools don't appear.** A: Make sure Copilot Chat is in Agent mode and reload the window; MCP tools only surface in Agent mode. --- ## More Resources - **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design - **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation - **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.