代码与流
查看内部所有已部署的项目 vibecode部署项目
代码与流 是一个生成式人工智能应用程序，允许用户从自然语言提示符创建、预览和部署单页web应用程序。它旨在成为一个无缝直观的工具，用于快速原型制作和开发，使您能够通过简单的描述将您的想法变为现实。
特性
- 人工智能驱动的创作：使用自然语言提示生成单页应用程序。
- 实时预览：立即获得一个公共URL，以实时预览您的创作。我们的预览系统运行在一个小型VPS上，并利用付费计划从单个配置文件中启动多个稳定的端口转发预览。
- 迭代开发：使用后续提示修改和更新您的应用程序。
- 一个命令部署：使用单个命令将完成的应用程序部署到永久公共URL。
- WhatsApp集成：通过Puch AI通过WhatsApp与应用程序交互。
原理
该应用程序构建在客户端-服务器架构上。后端是一个 模型上下文协议（MCP） 服务器，它公开了一组用于创建、预览和部署应用程序的工具。MCP是一个开放标准，允许大型语言模型（LLM）应用程序和外部系统之间进行无缝通信。
当用户发送提示（例如通过WhatsApp）时，MCP服务器会调用相应的工具，然后该工具与生成模型交互，创建一个完整的、自包含的HTML文件，其中包含内联CSS和JavaScript。
可用工具
MCP服务器公开了以下工具：
vibecode:
- 描述：从提示创建简单的单文件web应用程序。 - 用法：采用自然语言提示并为应用程序生成初始HTML、CSS和JavaScript。
preview_app:
- 描述：创建临时公共URL以预览生成的应用程序。 - 用法：为项目启动一个本地web服务器，并使用ngrok创建一个安全的公共隧道。
modify_app:
- 描述：根据用户反馈修改现有应用程序。 - 用法：接受用户反馈，读取现有代码，并使用LLM应用请求的更改。
deploy_app:
- 描述：使用Surge.sh将web应用程序部署到永久公共URL。 - 用法：将项目发布到唯一 .surge.sh 域。
validate:
- 描述：MCP服务器验证连接所需的工具。 - 用法：客户端用于确认与服务器的成功连接。
项目结构
此存储库包含应用程序的完整源代码。
.
├── .gitignore
├── pyproject.toml # Project metadata and build configuration
├── README.md
├── requirements.txt # Python dependencies
└── src/
├── app.py # Defines the MCP tools for user interaction
├── config.py # Application configuration
├── llm.py # Functions for interacting with the generative AI model
├── main.py # Main entry point to start the MCP server
├── preview.py # Manages live application previews
└── utils.py # Utility functions入门指南
先决条件
- Python 3.9+
- Node.js和npm（用于通过
surge) - 与生成式人工智能提供商（例如，Gemini的谷歌人工智能）的帐户
- 用于创建公共网址的ngrok帐户。
安装
- 克隆存储库：
git clone https://github.com/your-username/code-with-the-flow.git
cd code-with-the-flow- 安装Python依赖项：
pip install -r requirements.txt- 安装部署工具：
npm install -g surge配置
- 创建一个
.env文件 在项目的根目录中，使用以下环境变量：
GEMINI_API_KEY="your-gemini-api-key"
GOOGLE_CLOUD_PROJECT="your-gcp-project-id"
GOOGLE_CLOUD_LOCATION="your-gcp-location"
PUCH_AI_API_KEY="your-puch-ai-api-key"
MY_NUMBER="your-phone-number-for-validation"- 登录Surge:
在终端中运行以下命令登录Surge.sh帐户。这是部署所必需的。
npx surge login用法
在本地运行服务器
设置好所有内容后，您可以通过运行以下命令启动应用程序：
python src/main.py这将启动MCP服务器并创建ngrok隧道。您将在控制台输出中看到MCP服务器的公共URL。
与Puch AI的WhatsApp服务器集成
此应用程序旨在用作LLM代理的工具服务器，例如通过以下方式连接到WhatsApp的代理 Puch AI.
要集成：
- 启动
code-with-the-flow如上所述的服务器。 - 控制台将输出MCP服务器的公共URL（例如。，
https://.ngrok.io/mcp). - 在Puch AI代理设置中，添加一个新的工具服务器并提供此URL。
- 现在，您可以通过向您的Puch AI WhatsApp号码发送消息来与应用程序进行交互。例如：
- "Create a pomodoro timer app" - "Show me a preview" - "Make the background dark blue" - "Deploy it"