AI导哈

AI网页应用生成器

一款基于自然语言提示生成、预览和部署单页网页应用的生成式AI工具，支持快速原型设计和迭代开发。

  • by deprecated-work
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 akshathmangudi/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

  2. 安装Python依赖项：

    pip install -r requirements.txt

  3. 安装部署工具：

    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"

  2. 登录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://<unique-id>.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"

相关 MCP