Code With The Flow

代码与流

查看内部所有已部署的项目 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帐户。

安装

1. 克隆存储库：

   git clone https://github.com/your-username/code-with-the-flow.git
   cd code-with-the-flow

1. 安装Python依赖项：

   pip install -r requirements.txt

1. 安装部署工具：

   npm install -g surge

配置

1. 创建一个 .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"

1. 登录Surge:

在终端中运行以下命令登录Surge.sh帐户。这是部署所必需的。

   npx surge login

用法

在本地运行服务器

设置好所有内容后，您可以通过运行以下命令启动应用程序：

python src/main.py

这将启动MCP服务器并创建ngrok隧道。您将在控制台输出中看到MCP服务器的公共URL。

与Puch AI的WhatsApp服务器集成

此应用程序旨在用作LLM代理的工具服务器，例如通过以下方式连接到WhatsApp的代理 Puch AI.

要集成：

1. 启动 code-with-the-flow 如上所述的服务器。
2. 控制台将输出MCP服务器的公共URL（例如。， https://.ngrok.io/mcp).
3. 在Puch AI代理设置中，添加一个新的工具服务器并提供此URL。
4. 现在，您可以通过向您的Puch AI WhatsApp号码发送消息来与应用程序进行交互。例如：

- "Create a pomodoro timer app" - "Show me a preview" - "Make the background dark blue" - "Deploy it"