mcpField
M
MCP Server & VSCode Extension

MCP Server & VSCode Extension

本地服务
github.com/Suryansh1987开发工具182 周前更新
代码仓库

关于 MCP Server & VSCode Extension

该项目将 MCP 服务与 VSCode 扩展结合，利用 Google's LLM 根据自然语言提示词生成 HTML、CSS 和 JavaScript 应用，适合在 VSCode 中创建和完善 Web 应用的开发者。

主要功能

  1. 01生成 HTML、CSS 和 JavaScript 应用
  2. 02集成 VSCode 扩展
  3. 03使用 Google's LLM 生成代码
  4. 04自动打开生成的文件
  5. 05在浏览器中预览应用

适用场景

  1. 01根据提示词搭建 Web 应用
  2. 02通过 VSCode 生成应用文件
  3. 03完善生成的代码并预览 Web 应用

MCP 相关

MCP 服务处理提示词并为 VSCode 扩展生成代码。扩展通过 http://localhost:3000 与服务通信。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址，请按项目 README 中的说明安装。

代码仓库

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

MCP 服务与 VSCode 扩展

此仓库包含 MCP（模型控制编程）服务和 VSCode 扩展的代码，借助 Google 的大模型，开发者可以通过简单的提示词使用 HTML、CSS 和 JavaScript 创建应用。

功能

  • 使用自然语言提示词生成完整的 HTML、CSS 和 JavaScript 应用。
  • 与 VSCode 无缝集成，提升开发体验。
  • 利用 Google 大模型生成高质量代码。
  • MCP 服务作为后端，可处理提示词并动态生成代码。

安装

MCP 服务
  1. 克隆此仓库： 
    git clone https://github.com/your-username/mcp-server-vscode-extension.git
  2. 进入服务目录： 
    cd mcp-server
  3. 安装依赖： 
    npm install
  4. 启动服务： 
    npm start
VSCode 扩展
  1. 打开 VSCode 并进入 extensions 目录： 
    cd vscode-extension
  2. 安装依赖： 
    npm install
  3. 在 VSCode 中运行扩展： 
    npm run compile
  4. 在 VSCode 中打开 Run and Debug 选项卡并启动扩展。

用法

  1. 打开 VSCode 并启动 MCP 服务。
  2. 使用命令面板（Ctrl+Shift+P / Cmd+Shift+P），然后选择“Create App with Prompt”。
  3. 输入描述你想生成的应用的提示词。
  4. 扩展将自动生成并打开所需文件。
  5. 根据需要编辑和完善，然后在浏览器中预览应用。

配置

  • 使用扩展前，请确保 MCP 服务正在运行。
  • 扩展通过 http://localhost:3000 与服务通信。如有需要，请修改 config.json。

贡献

欢迎 Fork 此仓库并通过拉取请求贡献代码。请确保代码遵循最佳实践，并在必要时附上文档。

许可证

此项目基于 MIT 许可证授权。

联系方式

如有任何问题或功能请求，请在仓库中提交 issue，或发送邮件至 [email protected]。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。