diff --git a/packages/op-vscode/README.md b/packages/op-vscode/README.md index 454bb4d22..02b4f3e2d 100644 --- a/packages/op-vscode/README.md +++ b/packages/op-vscode/README.md @@ -1,3 +1,39 @@ # OpenPencil for VS Code -Design-as-code integration for OpenPencil `.op` files: custom editor, MCP configuration, AI skills, and code generation. Under active development; see `openpencil/.superpowers/sdd/` for the implementation plan. +Design-as-code inside your editor — open, view, and edit OpenPencil `.op` files, wire your AI tools to the OpenPencil MCP server, and generate framework code from a design. + +## Features + +- **Custom `.op` editor** — `.op` design files open in a live OpenPencil canvas hosted in a VS Code webview, backed by a local OpenPencil daemon. Edits are tracked as document changes, so save, save-as, revert, and hot-exit backup all work like a native editor. +- **`.fig` import** — opening a `.fig` file converts it into design content on the fly; saves land on the sibling `.op` file (for example `design.fig` → `design.op`) rather than writing back to the `.fig`. +- **MCP configuration** — the extension runs a local MCP proxy and can write the connection into your IDE's MCP config, so an AI assistant can drive OpenPencil through the Model Context Protocol. Commands: *Configure MCP* and *Remove MCP*. +- **AI skill install** — install (or remove) the bundled OpenPencil design skill into your IDE's rules directory (Cursor / Trae / Windsurf); VS Code itself drives OpenPencil through MCP and needs no rules file. Commands: *Install Skill* and *Remove Skill*. +- **Code generation** — generate React or Vue code from the active design. When VS Code's language-model API is available it runs directly; otherwise it hands off a pre-filled prompt to your IDE's chat. Command: *Generate Code*. The target framework is configurable (`react` or `vue`). +- **`@openpencil` chat participant** — an OpenPencil design assistant registered in VS Code chat. +- **Workspace-trust aware** — in an untrusted workspace `.op` files show a read-only placeholder and no local daemon or MCP config is started; granting trust assembles the full stack and reopens the files. + +## Requirements + +- **VS Code** `^1.90.0` or newer. +- An **OpenPencil `op-host-web-server` daemon binary**. The extension probes `/target/debug/op-host-web-server` by default; set `openpencil.dev.daemonPath` to point at another build. A trusted workspace is required to start the daemon and write MCP config. + +## Getting Started + +1. Trust the workspace when prompted (required for the live editor and MCP). +2. Open any `.op` file — it opens in the OpenPencil canvas editor. Opening a `.fig` file imports it and edits are saved to the sibling `.op`. +3. Run **OpenPencil: Configure MCP** from the Command Palette to register the local MCP proxy with your AI tooling. +4. Run **OpenPencil: Generate Code** to produce React or Vue code from the current design, or chat with **@openpencil** in the VS Code chat view. + +## Settings + +- `openpencil.dev.daemonPath` — path to the `op-host-web-server` daemon binary (empty probes `target/debug`). +- `openpencil.proxy.port` — port for the local MCP proxy (`0` auto-selects). +- `openpencil.codegen.framework` — target framework for generated code (`react` or `vue`). + +## Learn More + +Part of the [OpenPencil](https://github.com/ZSeven-W/openpencil) project — an open-source, AI-native, design-as-code vector tool. + +## License + +MIT diff --git a/packages/op-vscode/icon.png b/packages/op-vscode/icon.png new file mode 100644 index 000000000..122ebb2f6 Binary files /dev/null and b/packages/op-vscode/icon.png differ diff --git a/packages/op-vscode/package.json b/packages/op-vscode/package.json index 0012197bc..7d5c64307 100644 --- a/packages/op-vscode/package.json +++ b/packages/op-vscode/package.json @@ -2,16 +2,37 @@ "name": "openpencil-vscode", "displayName": "OpenPencil", "description": "OpenPencil design-as-code integration for VS Code: .op file editing, MCP configuration, AI skills, and code generation.", - "version": "0.0.1", + "version": "0.8.3", "publisher": "openpencil", "private": true, "license": "MIT", + "icon": "icon.png", + "homepage": "https://github.com/ZSeven-W/openpencil", + "bugs": { + "url": "https://github.com/ZSeven-W/openpencil/issues" + }, + "galleryBanner": { + "color": "#1a1a1a", + "theme": "dark" + }, "engines": { "vscode": "^1.90.0" }, "categories": [ + "Visualization", + "AI", "Other" ], + "keywords": [ + "design", + "design-as-code", + ".op", + "MCP", + "AI", + "vector", + "canvas", + "openpencil" + ], "main": "./dist/extension.js", "capabilities": { "untrustedWorkspaces": {