Skip to content

Commit 4ee3667

Browse files
IvanruiiIvanruii
authored
Merge pull request #861 from Lemoncode/feature/vscode-extension-readme
Feature/vscode extension readme
2 parents aeace9d + 79b48b7 commit 4ee3667

4 files changed

Lines changed: 308 additions & 0 deletions

File tree

‎.changeset/proud-horses-scream.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'quickmock': patch
3+
'@lemoncode/quickmock-mcp': patch
4+
---
5+
6+
Added basic README.md.

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ npm run dev
3636

3737
Open your browser and go to http://localhost:5173 (if this port is busy it will be changed to the next available port)
3838

39+
## VS Code extension
40+
41+
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.
42+
3943
## 🤝 Contributing
4044

4145
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‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# QuickMock MCP Server
2+
3+
![Contributors](https://img.shields.io/github/contributors/Lemoncode/quickmock)
4+
![Forks](https://img.shields.io/github/forks/Lemoncode/quickmock)
5+
![Stars](https://img.shields.io/github/stars/Lemoncode/quickmock)
6+
![Licence](https://img.shields.io/github/license/Lemoncode/quickmock)
7+
![Issues](https://img.shields.io/github/issues/Lemoncode/quickmock)
8+
9+
## 🌟 Project
10+
11+
`@lemoncode/quickmock-mcp` is the MCP server for QuickMock.
12+
13+
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.
14+
15+
### Available tools
16+
17+
- `list_wireframes`: finds `.qm` files in the current workspace.
18+
- `get_wireframe_json`: returns JSON content from a wireframe file.
19+
- `get_wireframe_pages`: returns wireframe pages metadata.
20+
- `get_wireframe_assets`: extracts embedded image assets to disk.
21+
- `capture_wireframe`: renders and returns a PNG screenshot.
22+
23+
## 🚀 Installation
24+
25+
To work on this package locally from the monorepo:
26+
27+
```sh
28+
git clone https://github.com/Lemoncode/quickmock.git
29+
cd quickmock
30+
npm install
31+
```
32+
33+
Build the MCP package:
34+
35+
```bash
36+
npm run build --workspace packages/mcp
37+
```
38+
39+
Run it via stdio:
40+
41+
```bash
42+
npx -y @lemoncode/quickmock-mcp
43+
```
44+
45+
Inspect it with MCP Inspector:
46+
47+
```bash
48+
npm run inspect --workspace packages/mcp
49+
```
50+
51+
## 🤝 Contributing
52+
53+
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.
54+
55+
## 🛠️ Technologies
56+
57+
The package is developed with:
58+
59+
- [TypeScript](https://www.typescriptlang.org/)
60+
- [Model Context Protocol SDK](https://github.com/modelcontextprotocol/typescript-sdk)
61+
- [Puppeteer Core](https://pptr.dev/)
62+
- [Zod](https://zod.dev/)
63+
- [Vitest](https://vitest.dev/)
64+
65+
## 👥 Team
66+
67+
Team members participating in this project:
68+
69+
<p align="left">
70+
<a href="https://github.com/LourdesRsdp">
71+
<kbd><img src="https://github.com/LourdesRsdp.png" alt="Lourdes Rodriguez" width="50" height="50" style="border-radius: 50%;"></kbd>
72+
</a>
73+
<a href="https://github.com/Franlop7">
74+
<kbd><img src="https://github.com/Franlop7.png" alt="Fran López" width="50" height="50" style="border-radius: 50%;"></kbd>
75+
</a>
76+
<a href="https://github.com/oleojake">
77+
<kbd><img src="https://github.com/oleojake.png" alt="Pablo Marzal" width="50" height="50" style="border-radius: 50%;"></kbd>
78+
</a>
79+
<a href="https://github.com/jsanzdev">
80+
<kbd><img src="https://github.com/jsanzdev.png" alt="Jesús Sanz" width="50" height="50" style="border-radius: 50%;"></kbd>
81+
</a>
82+
<a href="https://github.com/devrodrigolec">
83+
<kbd><img src="https://github.com/devrodrigolec.png" alt="Rodrigo Leciñana" width="50" height="50" style="border-radius: 50%;"></kbd>
84+
</a>
85+
<a href="https://github.com/deletidev">
86+
<kbd><img src="https://github.com/deletidev.png" alt="Leticia De La Osa" width="50" height="50" style="border-radius: 50%;"></kbd>
87+
</a>
88+
<a href="https://github.com/monikMononoke">
89+
<kbd><img src="https://github.com/monikMononoke.png" alt="Mónika" width="50" height="50" style="border-radius: 50%;"></kbd>
90+
</a>
91+
<a href="https://github.com/Ivanruii">
92+
<kbd><img src="https://github.com/Ivanruii.png" alt="Ivan Ruíz" width="50" height="50" style="border-radius: 50%;"></kbd>
93+
</a>
94+
</a>
95+
<a href="https://github.com/raquetelio">
96+
<kbd><img src="https://github.com/raquetelio.png" alt="Raquel Toscano" width="50" height="50" style="border-radius: 50%;"></kbd>
97+
</a>
98+
</a>
99+
<a href="https://github.com/manugallegob">
100+
<kbd><img src="https://github.com/manugallegob.png" alt="Manuel Gallego" width="50" height="50" style="border-radius: 50%;"></kbd>
101+
</a>
102+
<a href="https://github.com/Bomasen">
103+
<kbd><img src="https://github.com/Bomasen.png" alt="Borja Martínez Sendra" width="50" height="50" style="border-radius: 50%;"></kbd>
104+
</a>
105+
<a href="https://github.com/Pableras90">
106+
<kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
107+
</a>
108+
<a href="https://github.com/Alber-Writer">
109+
<kbd><img src="https://github.com/Alber-Writer.png" alt="Alberto Escribano" width="50" height="50" style="border-radius: 50%;"></kbd>
110+
</a>
111+
<a href="https://github.com/El-Mito-de-Giralda">
112+
<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>
113+
</a>
114+
<a href="https://github.com/josemitoribio">
115+
<kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
116+
</a>
117+
<a href="https://github.com/sergioelmoreno">
118+
<kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
119+
</a>
120+
<a href="https://github.com/rojasadrian012">
121+
<kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
122+
</a>
123+
<a href="https://github.com/omarlm">
124+
<kbd><img src="https://github.com/omarlm.png" alt="Omar Lorenzo" width="50" height="50" style="border-radius: 50%;"></kbd>
125+
</a>
126+
<a href="https://github.com/iria-carballo">
127+
<kbd><img src="https://github.com/iria-carballo.png" alt="Iria Carballo" width="50" height="50" style="border-radius: 50%;"></kbd>
128+
</a>
129+
<a href="https://github.com/marcosgiannini">
130+
<kbd><img src="https://github.com/marcosgiannini.png" alt="Marcos Giannini" width="50" height="50" style="border-radius: 50%;"></kbd>
131+
</a>
132+
<a href="https://github.com/IonutGabi">
133+
<kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
134+
</a>
135+
<a href="https://github.com/antonio06">
136+
<kbd><img src="https://github.com/antonio06.png" alt="Antonio Contreras" width="50" height="50" style="border-radius: 50%;"></kbd>
137+
</a>
138+
<a href="https://github.com/brauliodiez">
139+
<kbd><img src="https://github.com/brauliodiez.png" alt="Braulio Díez" width="50" height="50" style="border-radius: 50%;"></kbd>
140+
</a>
141+
</p>

‎packages/vscode-extension/README.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
# QuickMock VS Code Extension
2+
3+
![Contributors](https://img.shields.io/github/contributors/Lemoncode/quickmock)
4+
![Forks](https://img.shields.io/github/forks/Lemoncode/quickmock)
5+
![Stars](https://img.shields.io/github/stars/Lemoncode/quickmock)
6+
![Licence](https://img.shields.io/github/license/Lemoncode/quickmock)
7+
![Issues](https://img.shields.io/github/issues/Lemoncode/quickmock)
8+
9+
## 🌟 Project
10+
11+
This is the VS Code extension package for editing QuickMock `.qm` files directly inside VS Code.
12+
13+
It includes:
14+
15+
- Open and edit `.qm` wireframes directly in VS Code.
16+
- Create new wireframe files and start sketching quickly.
17+
- Work with QuickMock + AI workflows through MCP integration.
18+
- Keep wireframing inside your regular development workflow.
19+
20+
## 🚀 Installation
21+
22+
### Install from Visual Studio Marketplace
23+
24+
1. Open VS Code.
25+
2. Go to **Extensions** (`Ctrl+Shift+X` / `Cmd+Shift+X`).
26+
3. Search for **Quickmock** by **Lemoncoders**.
27+
4. Click **Install**.
28+
29+
### Install for development
30+
31+
```sh
32+
git clone https://github.com/Lemoncode/quickmock.git
33+
cd quickmock
34+
npm install
35+
npm run start
36+
```
37+
38+
Then run the extension in VS Code:
39+
40+
1. Open the repository in VS Code.
41+
2. Start **Run and Debug**.
42+
3. Launch the extension host with **F5** (or run it from the **Run and Debug** panel).
43+
44+
Create the `.vsix` artifact:
45+
46+
```bash
47+
npm run package:vscode
48+
```
49+
50+
The packaged extension is generated under `packages/vscode-extension/dist`.
51+
52+
## 🤖 MCP setup
53+
54+
Installing the VS Code extension is enough to get the MCP server configured.
55+
56+
1. Install **Quickmock** from the Marketplace.
57+
2. Open a workspace that contains `.qm` files.
58+
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.
59+
60+
If you want to run the MCP server directly, you can use the following command:
61+
62+
```bash
63+
npx -y @lemoncode/quickmock-mcp
64+
```
65+
66+
In development, it resolves the local workspace build instead.
67+
68+
## 🤝 Contributing
69+
70+
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.
71+
72+
## 🛠️ Technologies
73+
74+
The extension is developed using:
75+
76+
- [TypeScript](https://www.typescriptlang.org/)
77+
- [VS Code Extension API](https://code.visualstudio.com/api)
78+
- [Model Context Protocol](https://modelcontextprotocol.io/)
79+
80+
## 👥 Team
81+
82+
Team members participating in this project:
83+
84+
<p align="left">
85+
<a href="https://github.com/LourdesRsdp">
86+
<kbd><img src="https://github.com/LourdesRsdp.png" alt="Lourdes Rodriguez" width="50" height="50" style="border-radius: 50%;"></kbd>
87+
</a>
88+
<a href="https://github.com/Franlop7">
89+
<kbd><img src="https://github.com/Franlop7.png" alt="Fran López" width="50" height="50" style="border-radius: 50%;"></kbd>
90+
</a>
91+
<a href="https://github.com/oleojake">
92+
<kbd><img src="https://github.com/oleojake.png" alt="Pablo Marzal" width="50" height="50" style="border-radius: 50%;"></kbd>
93+
</a>
94+
<a href="https://github.com/jsanzdev">
95+
<kbd><img src="https://github.com/jsanzdev.png" alt="Jesús Sanz" width="50" height="50" style="border-radius: 50%;"></kbd>
96+
</a>
97+
<a href="https://github.com/devrodrigolec">
98+
<kbd><img src="https://github.com/devrodrigolec.png" alt="Rodrigo Leciñana" width="50" height="50" style="border-radius: 50%;"></kbd>
99+
</a>
100+
<a href="https://github.com/deletidev">
101+
<kbd><img src="https://github.com/deletidev.png" alt="Leticia De La Osa" width="50" height="50" style="border-radius: 50%;"></kbd>
102+
</a>
103+
<a href="https://github.com/monikMononoke">
104+
<kbd><img src="https://github.com/monikMononoke.png" alt="Mónika" width="50" height="50" style="border-radius: 50%;"></kbd>
105+
</a>
106+
</a>
107+
<a href="https://github.com/Ivanruii">
108+
<kbd><img src="https://github.com/Ivanruii.png" alt="Ivan Ruíz" width="50" height="50" style="border-radius: 50%;"></kbd>
109+
</a>
110+
</a>
111+
<a href="https://github.com/raquetelio">
112+
<kbd><img src="https://github.com/raquetelio.png" alt="Raquel Toscano" width="50" height="50" style="border-radius: 50%;"></kbd>
113+
</a>
114+
</a>
115+
<a href="https://github.com/manugallegob">
116+
<kbd><img src="https://github.com/manugallegob.png" alt="Manuel Gallego" width="50" height="50" style="border-radius: 50%;"></kbd>
117+
</a>
118+
<a href="https://github.com/Bomasen">
119+
<kbd><img src="https://github.com/Bomasen.png" alt="Borja Martínez Sendra" width="50" height="50" style="border-radius: 50%;"></kbd>
120+
</a>
121+
<a href="https://github.com/Pableras90">
122+
<kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
123+
</a>
124+
<a href="https://github.com/Alber-Writer">
125+
<kbd><img src="https://github.com/Alber-Writer.png" alt="Alberto Escribano" width="50" height="50" style="border-radius: 50%;"></kbd>
126+
</a>
127+
<a href="https://github.com/El-Mito-de-Giralda">
128+
<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>
129+
</a>
130+
<a href="https://github.com/josemitoribio">
131+
<kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
132+
</a>
133+
<a href="https://github.com/sergioelmoreno">
134+
<kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
135+
</a>
136+
<a href="https://github.com/rojasadrian012">
137+
<kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
138+
</a>
139+
<a href="https://github.com/omarlm">
140+
<kbd><img src="https://github.com/omarlm.png" alt="Omar Lorenzo" width="50" height="50" style="border-radius: 50%;"></kbd>
141+
</a>
142+
<a href="https://github.com/iria-carballo">
143+
<kbd><img src="https://github.com/iria-carballo.png" alt="Iria Carballo" width="50" height="50" style="border-radius: 50%;"></kbd>
144+
</a>
145+
<a href="https://github.com/marcosgiannini">
146+
<kbd><img src="https://github.com/marcosgiannini.png" alt="Marcos Giannini" width="50" height="50" style="border-radius: 50%;"></kbd>
147+
</a>
148+
<a href="https://github.com/IonutGabi">
149+
<kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
150+
</a>
151+
<a href="https://github.com/antonio06">
152+
<kbd><img src="https://github.com/antonio06.png" alt="Antonio Contreras" width="50" height="50" style="border-radius: 50%;"></kbd>
153+
</a>
154+
<a href="https://github.com/brauliodiez">
155+
<kbd><img src="https://github.com/brauliodiez.png" alt="Braulio Díez" width="50" height="50" style="border-radius: 50%;"></kbd>
156+
</a>
157+
</p>

0 commit comments

Comments
 (0)