构建 Twitter MBTI 分析器：使用 Dify 和 Windsurf 的无代码之旅

摘要： 本文分享了作者利用 AI IDE Windsurf 和无代码平台 Dify，从零开发“Twitter MBTI Receipt”应用的全过程。该项目在上线三天内获得20万次访问，展示了非技术人员如何通过工作流自动化与前端生成的结合，快速构建并部署成功的AI产品。

你好，我是来自 Dify 的 Steven Lynn！如果你最近关注 AI 产品动态，大概率听说过 Windsurf 和 Cursor。这两款由 AI 驱动的新型集成开发环境（IDE）正掀起一股热潮。

在本文中，我将分享我的创作历程：作为一名没有 IT 背景的初学者，我如何利用 Windsurf 和 Dify 打造出一款成功的产品。这款爆款应用“Twitter MBTI Receipt”在上线仅三天后，就在 Twitter 上获得了 20万次 浏览量。该应用通过抓取用户推文数据进行分析，并生成一份详细的 MBTI 人格报告，整个后端逻辑完全基于 Dify 的工作流（Workflow）构建。

你可以
立即尝试
并在
GitHub
上为它点亮 Star。

项目概览

本项目主要依赖两项关键技术：

后端构建： Dify
前端开发： Windsurf

这两个组件通过 HTTP 请求进行通信，实现了无缝集成。

使用 Dify 构建后端

Dify 是一个大语言模型（LLM）应用平台，它让你无需编写代码即可构建 AI 应用程序。这对于后端开发来说尤为合适。

在 Dify 中创建新应用之前，我们需要先理清工作流中的必要步骤。让我们先从思维导图开始：

现在，让我们在 Dify 的工作流中实现这一逻辑。

虽然 Chatflow（对话式工作流）支持持续的多轮对话，但 Workflow更像是一个“脚本”——你输入变量，然后一次性获取输出结果。

如果你还不了解什么是 Workflow：构建工作流的过程就像绘制思维导图一样简单。你可以添加、拖拽节点，并在各个节点上设置变量。

开始节点 (Start Node)

在“开始”节点中，我们可以定义一些输入变量。这里我们添加了 user_id（用户ID）和 languages（语言）。

HTTP 请求节点 (HTTP Request Node)

接下来的步骤需要一个 HTTP 请求节点来调用爬虫服务。Twitter Developer Platform 提供了官方 API。如果你想部署自己的爬虫，可以尝试 RSS Hub，这是一个支持 Twitter 的开源抓取工具。

LLM 节点 (LLM Node)

在 LLM 节点中，你需要调整提示词（Prompt），以便生成一份详尽的报告。如果你不知道如何高效地编写 Prompt，请参考我们的
工作坊
教程。

参数提取器节点 (Parameter Extractor Node)

“参数提取器”可以将长文本转换为 JSON 格式的多个参数，为前端展示准备好数据。

以下是一个最小化的工作流示例：它可以抓取 Twitter 数据、生成报告并输出结果。你可以在我的 GitHub 仓库中查看完整的后端代码。

MVP Web App（最小可行性产品网页应用）

发布后，Dify 会自动提供一个网页应用程序界面。这非常便于快速分享和测试功能。

使用 Windsurf 构建前端

Cascade 是 Windsurf 的 AI 助手（由 Claude-3.5-Sonnet 驱动），它与其他 AI 编码助手相比具有显著优势。它能够：

访问项目目录结构
同时创建和编辑多个文件
自主执行终端命令

连接后端：API 是如何工作的？

Dify 的左侧边栏提供了详细的 API 文档，并给出了 cURL 请求示例。请复制并将你的 API Key 保存在安全的地方。我们强烈建议不要将 API Key 直接硬编码在前端代码中。

向下滚动，你可以看到示例请求和响应数据。

下图展示了与 Dify 交互的 HTTP 请求和响应流程：

inputs（输入）中的变量对应工作流“开始”节点中定义的变量。
outputs（输出）中的变量对应工作流“结束”节点的返回数据。

请注意，由于数据以 JSON 格式传输，请确保变量名能被正确解析。此外，别忘了在 Header 中填入 API Token。

在前端集成之前，你可以复制示例请求，并使用 Postman 进行本地测试。将 cURL 命令粘贴到输入框中，Postman 会自动将其转换为你需要的格式。你需要填写上述提到的相关变量。

构建前端界面

在 Cascade 的帮助下，你可以在几分钟内创建出前端页面。你可以向 AI 提出以下问题来引导开发：

你要构建什么？
你打算使用什么样的框架？
请描述网页的设计风格。
如何与后端连接？

如果你不知道如何用自然语言描述 HTTP 请求和响应，可以直接将 Postman 中测试过的请求和响应作为示例提供给 Cascade。

以下是我在设计该项目时使用的 Prompt（提示词）：

<Design>
创建一个 Twitter MBTI Receipt 应用。用户输入 ID，输出该用户的 MBTI 报告。在输入框的最左侧放置一个 @ 符号，以提示用户输入的是 ID 而非用户名。这需要向 Dify 后端发起请求。在请求中，需要发送两个变量：一个是用户的 ID（不带@）(变量名: user_id)，另一个是用户浏览器的语言环境 (变量名: lang)。
</Design>

<Backend_Request>
示例请求如下：
curl --location 'http://api.dify.ai/v1/workflows/run' \
--header 'Authorization: Bearer ****' \
--header 'Content-Type: application/json' \
--data '{
  "inputs" : {
    "lang" : "en-US",
    "user_id" : "stv_lynn"
  },
  "response_mode" : "streaming",
  "user" : "abc-123"
}'
</Backend_Request>

<Backend_Response>
示例响应如下：
{
  "event": "workflow_finished",
  ...
  "data": {
    ...
    "outputs": {
      "mbti": "INTJ",
      "IE_report": "...",
      "SN_report": "...",
      "TF_report": "...",
      "JP_report": "...",
      "celebrity": "Steve Jobs",
      "celebrity_report": "..."
    },
    ...
  }
}
</Backend_Response>