MCP Server & VSCode Extension

MCP Server & VSCode Extension

🚀 MCP Server & VSCode Extension A powerful tool that enables developers to create full-fledged web applications using natural language prompts. Built with an MCP Server and a VSCode extension, it integrates with Google's LLM 🤖 to generate HTML, CSS, and JavaScript code. 🎨💻

Suryansh1987

Developer Tools
Visit Server

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 suryanshsingh2586@gmail.com.

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
MCP Package Docs Server

MCP Package Docs Server

Facilitates LLMs to efficiently access and fetch structured documentation for packages in Go, Python, and NPM, enhancing software development with multi-language support and performance optimization.

Featured
Local
TypeScript
Claude Code MCP

Claude Code MCP

An implementation of Claude Code as a Model Context Protocol server that enables using Claude's software engineering capabilities (code generation, editing, reviewing, and file operations) through the standardized MCP interface.

Featured
Local
JavaScript
@kazuph/mcp-taskmanager

@kazuph/mcp-taskmanager

Model Context Protocol server for Task Management. This allows Claude Desktop (or any MCP client) to manage and execute tasks in a queue-based system.

Featured
Local
JavaScript
Linear MCP Server

Linear MCP Server

Enables interaction with Linear's API for managing issues, teams, and projects programmatically through the Model Context Protocol.

Featured
JavaScript
mermaid-mcp-server

mermaid-mcp-server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.

Featured
JavaScript
Jira-Context-MCP

Jira-Context-MCP

MCP server to provide Jira Tickets information to AI coding agents like Cursor

Featured
TypeScript
Linear MCP Server

Linear MCP Server

A Model Context Protocol server that integrates with Linear's issue tracking system, allowing LLMs to create, update, search, and comment on Linear issues through natural language interactions.

Featured
JavaScript
Sequential Thinking MCP Server

Sequential Thinking MCP Server

This server facilitates structured problem-solving by breaking down complex issues into sequential steps, supporting revisions, and enabling multiple solution paths through full MCP integration.

Featured
Python