mcpField
M
MCP Server & VSCode Extension

MCP Server & VSCode Extension

Local
github.com/Suryansh1987Developer Tools1Updated 82w ago
Repository

About MCP Server & VSCode Extension

This project pairs an MCP server with a VSCode extension for generating HTML, CSS, and JavaScript applications from natural-language prompts using Google's LLM. It is aimed at developers who want to create and refine web apps within VSCode.

Key features

  1. 01Generate HTML, CSS, and JavaScript apps
  2. 02VSCode extension integration
  3. 03Use Google's LLM to generate code
  4. 04Open generated files automatically
  5. 05Preview apps in a browser

Use cases

  1. 01Scaffolding a web app from a prompt
  2. 02Generating app files from VSCode
  3. 03Refining generated code and previewing a web app

MCP support

The MCP server processes prompts and generates code for the VSCode extension. The extension communicates with the server at http://localhost:3000.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

MCP Server & VSCode Extension

This repository contains the code for the MCP (Model-Controlled Programming) Server and a VSCode extension that enables developers to create applications using HTML, CSS, and JavaScript through simple prompts, powered by Google's LLM.

Features

  • Generate full HTML, CSS, and JavaScript applications using natural language prompts.
  • Seamless integration with VSCode for an enhanced developer experience.
  • Leverages Google LLM for high-quality AI-generated code.
  • MCP Server acts as the backend to process prompts and generate code dynamically.

Installation

MCP Server
  1. Clone this repository: 
    git clone https://github.com/your-username/mcp-server-vscode-extension.git
  2. Navigate to the server directory: 
    cd mcp-server
  3. Install dependencies: 
    npm install
  4. Start the server: 
    npm start
VSCode Extension
  1. Open VSCode and navigate to the extensions directory: 
    cd vscode-extension
  2. Install dependencies: 
    npm install
  3. Run the extension in VSCode: 
    npm run compile
  4. Open the Run and Debug tab in VSCode and launch the extension.

Usage

  1. Open VSCode and start the MCP Server.
  2. Use the command palette (Ctrl+Shift+P / Cmd+Shift+P) and select "Create App with Prompt".
  3. Enter your prompt describing the application you want to generate.
  4. The extension will generate and open the required files automatically.
  5. Edit and refine as needed, then preview the app in a browser.

Configuration

  • Ensure that the MCP Server is running before using the extension.
  • The extension communicates with the server via http://localhost:3000. Modify the config.json if needed.

Contributing

Feel free to fork this repository and contribute via pull requests. Ensure that your code follows best practices and includes documentation where necessary.

License

This project is licensed under the MIT License.

Contact

For any issues or feature requests, please open an issue in the repository or reach out via email at [email protected].

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.