README.md

QuickMock VS Code Extension

🌟 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

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:

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:

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
• VS Code Extension API
• Model Context Protocol

👥 Team

Team members participating in this project: