Feature/vscode extension readme

.changeset/proud-horses-scream.md

@@ -0,0 +1,6 @@
+---
+'quickmock': patch
+'@lemoncode/quickmock-mcp': patch
+---
+
+Added basic README.md.

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:

packages/mcp/README.md

@@ -0,0 +1,141 @@
+# 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/)
+
+## 👥 Team
+
+Team members participating in this project:
+
+<p align="left">
+  <a href="https://github.com/LourdesRsdp">
+    <kbd><img src="https://github.com/LourdesRsdp.png" alt="Lourdes Rodriguez" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Franlop7">
+    <kbd><img src="https://github.com/Franlop7.png" alt="Fran López" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/oleojake">
+    <kbd><img src="https://github.com/oleojake.png" alt="Pablo Marzal" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/jsanzdev">
+    <kbd><img src="https://github.com/jsanzdev.png" alt="Jesús Sanz" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/devrodrigolec">
+    <kbd><img src="https://github.com/devrodrigolec.png" alt="Rodrigo Leciñana" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/deletidev">
+    <kbd><img src="https://github.com/deletidev.png" alt="Leticia De La Osa" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+    <a href="https://github.com/monikMononoke">
+    <kbd><img src="https://github.com/monikMononoke.png" alt="Mónika" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Ivanruii">
+    <kbd><img src="https://github.com/Ivanruii.png" alt="Ivan Ruíz" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  </a>
+    <a href="https://github.com/raquetelio">
+    <kbd><img src="https://github.com/raquetelio.png" alt="Raquel Toscano" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  </a>
+    <a href="https://github.com/manugallegob">
+    <kbd><img src="https://github.com/manugallegob.png" alt="Manuel Gallego" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Bomasen">
+    <kbd><img src="https://github.com/Bomasen.png" alt="Borja Martínez Sendra" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Pableras90">
+    <kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Alber-Writer">
+    <kbd><img src="https://github.com/Alber-Writer.png" alt="Alberto Escribano" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/El-Mito-de-Giralda">
+    <kbd><img src="https://github.com/El-Mito-de-Giralda.png" alt="Jorge Miranda de la quintana" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/josemitoribio">
+    <kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/sergioelmoreno">
+    <kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/rojasadrian012">
+    <kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/omarlm">
+    <kbd><img src="https://github.com/omarlm.png" alt="Omar Lorenzo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/iria-carballo">
+    <kbd><img src="https://github.com/iria-carballo.png" alt="Iria Carballo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/marcosgiannini">
+    <kbd><img src="https://github.com/marcosgiannini.png" alt="Marcos Giannini" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/IonutGabi">
+    <kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/antonio06">
+    <kbd><img src="https://github.com/antonio06.png" alt="Antonio Contreras" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/brauliodiez">
+    <kbd><img src="https://github.com/brauliodiez.png" alt="Braulio Díez" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+</p>

packages/vscode-extension/README.md

@@ -0,0 +1,157 @@
+# 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
+
+This 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`.
+
+## 🤖 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.
+
+## 🛠️ 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/)
+
+## 👥 Team
+
+Team members participating in this project:
+
+<p align="left">
+  <a href="https://github.com/LourdesRsdp">
+    <kbd><img src="https://github.com/LourdesRsdp.png" alt="Lourdes Rodriguez" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Franlop7">
+    <kbd><img src="https://github.com/Franlop7.png" alt="Fran López" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/oleojake">
+    <kbd><img src="https://github.com/oleojake.png" alt="Pablo Marzal" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/jsanzdev">
+    <kbd><img src="https://github.com/jsanzdev.png" alt="Jesús Sanz" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/devrodrigolec">
+    <kbd><img src="https://github.com/devrodrigolec.png" alt="Rodrigo Leciñana" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/deletidev">
+    <kbd><img src="https://github.com/deletidev.png" alt="Leticia De La Osa" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+    <a href="https://github.com/monikMononoke">
+    <kbd><img src="https://github.com/monikMononoke.png" alt="Mónika" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  </a>
+    <a href="https://github.com/Ivanruii">
+    <kbd><img src="https://github.com/Ivanruii.png" alt="Ivan Ruíz" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  </a>
+    <a href="https://github.com/raquetelio">
+    <kbd><img src="https://github.com/raquetelio.png" alt="Raquel Toscano" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  </a>
+    <a href="https://github.com/manugallegob">
+    <kbd><img src="https://github.com/manugallegob.png" alt="Manuel Gallego" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Bomasen">
+    <kbd><img src="https://github.com/Bomasen.png" alt="Borja Martínez Sendra" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Pableras90">
+    <kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/Alber-Writer">
+    <kbd><img src="https://github.com/Alber-Writer.png" alt="Alberto Escribano" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/El-Mito-de-Giralda">
+    <kbd><img src="https://github.com/El-Mito-de-Giralda.png" alt="Jorge Miranda de la quintana" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/josemitoribio">
+    <kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/sergioelmoreno">
+    <kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/rojasadrian012">
+    <kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/omarlm">
+    <kbd><img src="https://github.com/omarlm.png" alt="Omar Lorenzo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/iria-carballo">
+    <kbd><img src="https://github.com/iria-carballo.png" alt="Iria Carballo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/marcosgiannini">
+    <kbd><img src="https://github.com/marcosgiannini.png" alt="Marcos Giannini" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/IonutGabi">
+    <kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/antonio06">
+    <kbd><img src="https://github.com/antonio06.png" alt="Antonio Contreras" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/brauliodiez">
+    <kbd><img src="https://github.com/brauliodiez.png" alt="Braulio Díez" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+</p>