From 552ec97fbc1882226aaa1550fcc5855e86712b31 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 09:32:30 +0200 Subject: [PATCH 1/7] wip --- packages/mcp/README.md | 155 ++++++++++++++++++++++++++++ packages/vscode-extension/README.md | 155 ++++++++++++++++++++++++++++ 2 files changed, 310 insertions(+) create mode 100644 packages/mcp/README.md create mode 100644 packages/vscode-extension/README.md diff --git a/packages/mcp/README.md b/packages/mcp/README.md new file mode 100644 index 00000000..9b1e2c85 --- /dev/null +++ b/packages/mcp/README.md @@ -0,0 +1,155 @@ +# QuickMock MCP Server + +![Contributors](https://img.shields.io/github/contributors/Lemoncode/quickmock) +![Forks](https://img.shields.io/github/forks/Lemoncode/quickmock) +![Stars](https://img.shields.io/github/stars/Lemoncode/quickmock) +![Licence](https://img.shields.io/github/license/Lemoncode/quickmock) +![Issues](https://img.shields.io/github/issues/Lemoncode/quickmock) + +## 🌟 Project + +`@lemoncode/quickmock-mcp` is the MCP server for QuickMock. + +It provides tools to inspect `.qm` wireframe files, read their content and pages, extract image assets, and generate rendered screenshots through a headless browser flow. + +### Available tools + +- `list_wireframes`: finds `.qm` files in the current workspace. +- `get_wireframe_json`: returns JSON content from a wireframe file. +- `get_wireframe_pages`: returns wireframe pages metadata. +- `get_wireframe_assets`: extracts embedded image assets to disk. +- `capture_wireframe`: renders and returns a PNG screenshot. + +## 🚀 Installation + +To work on this package locally from the monorepo: + +```sh +git clone https://github.com/Lemoncode/quickmock.git +cd quickmock +npm install +``` + +Build the MCP package: + +```bash +npm run build --workspace packages/mcp +``` + +Run it via stdio: + +```bash +npx -y @lemoncode/quickmock-mcp +``` + +Inspect it with MCP Inspector: + +```bash +npm run inspect --workspace packages/mcp +``` + +## 🤝 Contributing + +Your feedback and contributions are welcome. If you find issues related to MCP tool behavior, wireframe parsing, or rendering output, please open an issue with reproduction steps and environment details. + +## 🛠️ Technologies + +The package is developed with: + +- [TypeScript](https://www.typescriptlang.org/) +- [Model Context Protocol SDK](https://github.com/modelcontextprotocol/typescript-sdk) +- [Puppeteer Core](https://pptr.dev/) +- [Zod](https://zod.dev/) +- [Vitest](https://vitest.dev/) + +## 💖 Sponsor Quick Mock + +Are you or your company interested in supporting Quick Mock? Sponsorship helps us maintain and improve the project. + +If you're interested in sponsoring this project, please reach out at: info@lemoncode.net + +## 📐 Custom Component Libraries for Enterprise + +If your organization uses its own design system and component library, we can build a custom low-fidelity component set aligned with your branding guidelines. + +For more information and quotes, contact us at: info@lemoncode.net. + +## 👥 Team + +Team members participating in this project: + +

+ + Lourdes Rodriguez + + + Fran López + + + Pablo Marzal + + + Jesús Sanz + + + Rodrigo Leciñana + + + Leticia De La Osa + + + Mónika + + + + Ivan Ruíz + + + + Raquel Toscano + + + + Manuel Gallego + + + Borja Martínez Sendra + + + Pablo Reinaldo + + + + Alberto Escribano + + + Jorge Miranda de la quintana + + + Josemi Toribio + + + Sergio (El Moreno) del campo + + + Adrian Rojas + + + Omar Lorenzo + + + Iria Carballo + + + Marcos Giannini + + + Gabi Birsan + + + Antonio Contreras + + + Braulio Díez + +

diff --git a/packages/vscode-extension/README.md b/packages/vscode-extension/README.md new file mode 100644 index 00000000..b4a485ac --- /dev/null +++ b/packages/vscode-extension/README.md @@ -0,0 +1,155 @@ +# QuickMock VS Code Extension + +![Contributors](https://img.shields.io/github/contributors/Lemoncode/quickmock) +![Forks](https://img.shields.io/github/forks/Lemoncode/quickmock) +![Stars](https://img.shields.io/github/stars/Lemoncode/quickmock) +![Licence](https://img.shields.io/github/license/Lemoncode/quickmock) +![Issues](https://img.shields.io/github/issues/Lemoncode/quickmock) + +## 🌟 Project + +`quickmock` is the VS Code extension package for editing QuickMock `.qm` files directly inside VS Code. + +It includes: + +- Open and edit `.qm` wireframes directly in VS Code. +- Create new wireframe files and start sketching quickly. +- Work with QuickMock + AI workflows through MCP integration. +- Keep wireframing inside your regular development workflow. + +## 🚀 Installation + +### Install from Visual Studio Marketplace + +1. Open VS Code. +2. Go to **Extensions** (`Ctrl+Shift+X` / `Cmd+Shift+X`). +3. Search for **Quickmock** by **Lemoncoders**. +4. Click **Install**. + +### Install for development + +```sh +git clone https://github.com/Lemoncode/quickmock.git +cd quickmock +npm install +npm run start +``` + +Then run the extension in VS Code: + +1. Open the repository in VS Code. +2. Start **Run and Debug**. +3. Launch the extension host with **F5** (or run it from the **Run and Debug** panel). + +Create the `.vsix` artifact: + +```bash +npm run package:vscode +``` + +The packaged extension is generated under `packages/vscode-extension/dist`. + +## 🤝 Contributing + +Your feedback and contributions are welcome. If you find issues with `.qm` editor behavior, VS Code integration, command handling, or MCP registration, please open an issue with clear reproduction steps. + +## 🛠️ Technologies + +The extension is developed using: + +- [TypeScript](https://www.typescriptlang.org/) +- [VS Code Extension API](https://code.visualstudio.com/api) +- [Model Context Protocol](https://modelcontextprotocol.io/) +- [Vitest](https://vitest.dev/) + +## 💖 Sponsor Quick Mock + +Are you or your company interested in supporting Quick Mock? Sponsorship helps us maintain and improve the project. + +If you're interested in sponsoring this project, please reach out at: info@lemoncode.net + +## 📐 Custom Component Libraries for Enterprise + +If your organization uses its own design system and component library, we can build a custom low-fidelity component set aligned with your branding guidelines. + +For more information and quotes, contact us at: info@lemoncode.net. + +## 👥 Team + +Team members participating in this project: + +

+ + Lourdes Rodriguez + + + Fran López + + + Pablo Marzal + + + Jesús Sanz + + + Rodrigo Leciñana + + + Leticia De La Osa + + + Mónika + + + + Ivan Ruíz + + + + Raquel Toscano + + + + Manuel Gallego + + + Borja Martínez Sendra + + + Pablo Reinaldo + + + + Alberto Escribano + + + Jorge Miranda de la quintana + + + Josemi Toribio + + + Sergio (El Moreno) del campo + + + Adrian Rojas + + + Omar Lorenzo + + + Iria Carballo + + + Marcos Giannini + + + Gabi Birsan + + + Antonio Contreras + + + Braulio Díez + +

From e0aafb1f5bd27d6d1aeadc53202f44c278f88f98 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 19 May 2026 10:05:09 +0200 Subject: [PATCH 2/7] wip --- packages/vscode-extension/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-extension/README.md b/packages/vscode-extension/README.md index b4a485ac..ef14266d 100644 --- a/packages/vscode-extension/README.md +++ b/packages/vscode-extension/README.md @@ -8,7 +8,7 @@ ## 🌟 Project -`quickmock` is the VS Code extension package for editing QuickMock `.qm` files directly inside VS Code. +This is the VS Code extension package for editing QuickMock `.qm` files directly inside VS Code. It includes: From 171e6666ec4adc20234506e2e5cbef932397461f Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Wed, 20 May 2026 08:38:23 +0200 Subject: [PATCH 3/7] chore: remove sponsorship and custom component library sections from README --- packages/vscode-extension/README.md | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/vscode-extension/README.md b/packages/vscode-extension/README.md index ef14266d..ec3cc7e3 100644 --- a/packages/vscode-extension/README.md +++ b/packages/vscode-extension/README.md @@ -60,19 +60,6 @@ The extension is developed using: - [TypeScript](https://www.typescriptlang.org/) - [VS Code Extension API](https://code.visualstudio.com/api) - [Model Context Protocol](https://modelcontextprotocol.io/) -- [Vitest](https://vitest.dev/) - -## 💖 Sponsor Quick Mock - -Are you or your company interested in supporting Quick Mock? Sponsorship helps us maintain and improve the project. - -If you're interested in sponsoring this project, please reach out at: info@lemoncode.net - -## 📐 Custom Component Libraries for Enterprise - -If your organization uses its own design system and component library, we can build a custom low-fidelity component set aligned with your branding guidelines. - -For more information and quotes, contact us at: info@lemoncode.net. ## 👥 Team @@ -118,7 +105,6 @@ Team members participating in this project: Pablo Reinaldo - Alberto Escribano From 4dea29450d96e7dc3403c0eff6c4907672b5afc9 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Wed, 20 May 2026 08:40:52 +0200 Subject: [PATCH 4/7] chore: remove sponsorship and custom component library sections from README --- packages/mcp/README.md | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/mcp/README.md b/packages/mcp/README.md index 9b1e2c85..1691993d 100644 --- a/packages/mcp/README.md +++ b/packages/mcp/README.md @@ -62,18 +62,6 @@ The package is developed with: - [Zod](https://zod.dev/) - [Vitest](https://vitest.dev/) -## 💖 Sponsor Quick Mock - -Are you or your company interested in supporting Quick Mock? Sponsorship helps us maintain and improve the project. - -If you're interested in sponsoring this project, please reach out at: info@lemoncode.net - -## 📐 Custom Component Libraries for Enterprise - -If your organization uses its own design system and component library, we can build a custom low-fidelity component set aligned with your branding guidelines. - -For more information and quotes, contact us at: info@lemoncode.net. - ## 👥 Team Team members participating in this project: @@ -100,8 +88,7 @@ Team members participating in this project: Mónika - - + Ivan Ruíz @@ -118,7 +105,6 @@ Team members participating in this project: Pablo Reinaldo - Alberto Escribano From 5559598146ecce1b51b51279c8e4d895bac0d907 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Wed, 20 May 2026 08:45:22 +0200 Subject: [PATCH 5/7] docs: add MCP setup instructions to README --- packages/vscode-extension/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/vscode-extension/README.md b/packages/vscode-extension/README.md index ec3cc7e3..e4ffc8d5 100644 --- a/packages/vscode-extension/README.md +++ b/packages/vscode-extension/README.md @@ -49,6 +49,22 @@ npm run package:vscode The packaged extension is generated under `packages/vscode-extension/dist`. +## 🤖 MCP setup + +Installing the VS Code extension is enough to get the MCP server configured. + +1. Install **Quickmock** from the Marketplace. +2. Open a workspace that contains `.qm` files. +3. The extension registers the **QuickMock Wireframe Tools** MCP server automatically for VS Code / GitHub Copilot and updates supported external MCP clients, like Claude Code. + +If you want to run the MCP server directly, you can use the following command: + +```bash +npx -y @lemoncode/quickmock-mcp +``` + +In development, it resolves the local workspace build instead. + ## 🤝 Contributing Your feedback and contributions are welcome. If you find issues with `.qm` editor behavior, VS Code integration, command handling, or MCP registration, please open an issue with clear reproduction steps. From 1a3e31b919ddec8048d7ccefdf10cf10091ca1a9 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Wed, 20 May 2026 08:49:08 +0200 Subject: [PATCH 6/7] docs: add section for VS Code extension in README --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 3c3f9cf3..0ac8d160 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,10 @@ npm run dev Open your browser and go to http://localhost:5173 (if this port is busy it will be changed to the next available port) +## VS Code extension + +If you prefer to work inside VS Code, install the [QuickMock VS Code extension](./packages/vscode-extension/README.md). It adds a custom editor for `.qm` files and also configures the MCP server for AI tools. + ## 🤝 Contributing Your feedback and contributions are welcome! If you have ideas for new features or have found a bug, we would love to hear about it. Here's how you can contribute: From 79b48b7683d82afe2d95ab88a98cf8c030795c29 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Wed, 20 May 2026 08:53:04 +0200 Subject: [PATCH 7/7] chore: added changeset --- .changeset/proud-horses-scream.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/proud-horses-scream.md diff --git a/.changeset/proud-horses-scream.md b/.changeset/proud-horses-scream.md new file mode 100644 index 00000000..959e691a --- /dev/null +++ b/.changeset/proud-horses-scream.md @@ -0,0 +1,6 @@ +--- +'quickmock': patch +'@lemoncode/quickmock-mcp': patch +--- + +Added basic README.md.