《前端 + AI 转型探索营》文档

Appearance

本节课代码：

https://github.com/AI-FE/dify-mcp-server

https://github.com/AI-FE/ai-friendly-clean-business-component-template/tree/第14课

上节课的作业：尝试将 Dify 上的 AI 应用集成到 IDE 中：

  • 及时保存文件代码

  • 借助本地的 storybook 运行环境实时预览生成出来的代码效果

提供了几种方案：

  • 基于 Continue 集成

  • 基于 Cline 集成

  • 基于 Cursor 集成

本节课：

基于 Continue 集成：

  • Continue 介绍

  • 集成 AI 应用

    • 方式一：Command

    • 方式二：Context Provider

    • 方式三：Model Provider

    • 方式四： MCP

  • 思考与作业

Continue 介绍 ​

开源的 AI Coding IDE 插件，支持 VSCode（cursor）。

  • 客制化领域的 plugin 天花板

  • 对外暴露的自定义接口十分丰富

基本功能： ​

  • AI Chat

  • 自动补全

客制化能力： ​

  • Model Provider：（在 Chat 选择模型）

  • Command：（在 Chat 中通过/来调用）

  • Context Provider：（在 Chat 中通过@来调用）

集成 AI 应用 ​

方式一：Command ​

集成步骤

  1. 打开 Contunue 的配置文件~/.continue/config.json文件

  2. 配置customCommands

json
{
  "name": "antd-component-codegen",
  "prompt": "#React业务组件生成提示词请根据以下需求生成一个完整的React业务组件：{{{ input }}} ##技术要求-使用React+TailwindCSS+AntDesign(antd)技术栈-TypeScript类型定义-组件必须是纯展示组件，所有数据操作通过props暴露给外部-遵循前后端状态分离原则##文件结构要求请生成以下文件结构：1.`[ComponentName]/[ComponentName].tsx`-主组件文件-使用函数式组件-从interface.ts导入类型定义-实现组件的UI和交互逻辑2.`[ComponentName]/interface.ts`-类型定义文件-定义组件的props接口-定义组件内部使用的类型3.`[ComponentName]/helpers.ts`-工具函数文件-抽离可复用的业务逻辑-纯函数实现，不包含副作用4.`[ComponentName]/index.ts`-导出文件-导出主组件-导出相关类型定义5.`[ComponentName]/[ComponentName].stories.tsx`-Storybook文件-包含组件的基础用法示例-展示不同props组合的效果##Props设计要求-所有异步操作（如数据获取、提交）都通过回调函数形式的props暴露-使用TypeScript为所有props提供完整的类型定义-props命名要符合业务语义-必要时提供默认值##样式要求-优先使用TailwindCSS类名-合理使用AntDesign组件-遵循响应式设计原则-注意组件间距和对齐##代码规范-使用ESLint推荐配置-组件和函数使用PascalCase命名-props和变量使用camelCase命名-代码需要适当的注释说明请根据以上要求，生成完整的组件代码。生成的代码应当：1.可以直接运行2.包含必要的类型定义3.包含基础的错误处理4.提供清晰的props文档",
  "description": "根据设计稿或自然语言需求生成基于 antd 的 React 业务组件"
}

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

方式二：Context Provider ​

集成步骤

  1. 在项目根目录新建.continue/prompts/antd-component-codegen.prompt文件

  2. 在文件中输入如下内容

name: antd-component-codegen
description: 根据设计稿或自然语言需求生成基于 antd 的 React 业务组件
---
# React 业务组件生成提示词

请根据以下需求生成一个完整的 React 业务组件：

[在这里描述设计稿或自然语言需求]

## 技术要求

- 使用 React + TailwindCSS + Ant Design (antd) 技术栈
- TypeScript 类型定义
- 组件必须是纯展示组件，所有数据操作通过 props 暴露给外部
- 遵循前后端状态分离原则

## 文件结构要求

请生成以下文件结构：

1. `[ComponentName]/[ComponentName].tsx` - 主组件文件
   - 使用函数式组件
   - 从 interface.ts 导入类型定义
   - 实现组件的 UI 和交互逻辑
2. `[ComponentName]/interface.ts` - 类型定义文件
   - 定义组件的 props 接口
   - 定义组件内部使用的类型
3. `[ComponentName]/helpers.ts` - 工具函数文件
   - 抽离可复用的业务逻辑
   - 纯函数实现，不包含副作用
4. `[ComponentName]/index.ts` - 导出文件
   - 导出主组件
   - 导出相关类型定义
5. `[ComponentName]/[ComponentName].stories.tsx` - Storybook 文件
   - 包含组件的基础用法示例
   - 展示不同 props 组合的效果

## Props 设计要求

- 所有异步操作（如数据获取、提交）都通过回调函数形式的 props 暴露
- 使用 TypeScript 为所有 props 提供完整的类型定义
- props 命名要符合业务语义
- 必要时提供默认值

## 样式要求

- 优先使用 TailwindCSS 类名
- 合理使用 Ant Design 组件
- 遵循响应式设计原则
- 注意组件间距和对齐

## 代码规范

- 使用 ESLint 推荐配置
- 组件和函数使用 PascalCase 命名
- props 和变量使用 camelCase 命名
- 代码需要适当的注释说明

请根据以上要求，生成完整的组件代码。生成的代码应当：

1. 可以直接运行
2. 包含必要的类型定义
3. 包含基础的错误处理
4. 提供清晰的 props 文档

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

方式三：Model Provider ​

集成步骤

  1. 打开config.json文件

  2. 新增models

json
{
  "model": "claude-3-5-sonnet-latest",
  "title": "Antd Component Codegen",
  "systemMessage": "#React业务组件生成提示词请根据以下需求生成一个完整的React业务组件：[在这里描述设计稿或自然语言需求]##技术要求-使用React+TailwindCSS+AntDesign(antd)技术栈-TypeScript类型定义-组件必须是纯展示组件，所有数据操作通过props暴露给外部-遵循前后端状态分离原则##文件结构要求请生成以下文件结构：1.`[ComponentName]/[ComponentName].tsx`-主组件文件-使用函数式组件-从interface.ts导入类型定义-实现组件的UI和交互逻辑2.`[ComponentName]/interface.ts`-类型定义文件-定义组件的props接口-定义组件内部使用的类型3.`[ComponentName]/helpers.ts`-工具函数文件-抽离可复用的业务逻辑-纯函数实现，不包含副作用4.`[ComponentName]/index.ts`-导出文件-导出主组件-导出相关类型定义5.`[ComponentName]/[ComponentName].stories.tsx`-Storybook文件-包含组件的基础用法示例-展示不同props组合的效果##Props设计要求-所有异步操作（如数据获取、提交）都通过回调函数形式的props暴露-使用TypeScript为所有props提供完整的类型定义-props命名要符合业务语义-必要时提供默认值##样式要求-优先使用TailwindCSS类名-合理使用AntDesign组件-遵循响应式设计原则-注意组件间距和对齐##代码规范-使用ESLint推荐配置-组件和函数使用PascalCase命名-props和变量使用camelCase命名-代码需要适当的注释说明请根据以上要求，生成完整的组件代码。生成的代码应当：1.可以直接运行2.包含必要的类型定义3.包含基础的错误处理4.提供清晰的props文档",
  "provider": "anthropic",
  "apiKey": "sk-GNlgnfG5sZLN6B8xykDN3J0spjxnLApZPBmEYqxM7KpPoVrY",
  "apiBase": "https://api.302.ai/v1",
  "completionOptions": {
    "maxTokens": 8192
  }
}

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

方式四：MCP ​

MCP 是什么

Model Context Protocol 是一个开放的协议，用于帮助 AI 模型与外部系统进行交互，从而让 AI 可以获取外部的资源，或者调度外部系统的能力。

MCP 架构图

  • 主机是 LLM 应用程序（例如 Claude Desktop 、Continue、 Cline 等）

  • MCP 客户端在主机 LLM 应用程序内部与 MCP 服务端保持 1:1 连接

  • MCP 服务端向 MCP 客户端提供上下文、工具等

LLM Host MCP Client、MCP Server 之间的数据流转

MCP Server 可提供的数据获取种类

  1. Resources

资源代表 MCP server 可以提供给 LLM 的数据资源，比如：

  • File Content

  • Database records

  • API Response

  1. Prompts

用来定义可重用的一些 Prompt 模板，比如：

  • 把我们基于 Dify 的 AI 应用中的提示词，直接作为 Prompt 模板
  1. Tools

跟 OpenAI、Anthropic 等 LLM 厂商的 Tools 功能类似，用来帮助 LLM 调用外部系统的能力，比如：

  • 调用外部系统的 API

  • 调用外部系统的数据库

MCP 客户端 & MCP 服务端的 stdio 通讯方式

集成步骤

  1. 准备一个 MCP Server
bash
git clone https://github.com/AI-FE/dify-mcp-server
  1. 在 Continue 中配置 MCP Server
json
{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "/Users/lv/.nvm/versions/node/v23.5.0/bin/node",
          "args": ["/Users/lv/workspace/dify-mcp-server/build/index.js"],
          "env": {
            "DIFY_API_KEY": "app-wT7iLq0uGhEvjKrx9lgeGhmj"
          }
        }
      }
    ]
  }
}

效果测试

Todolist 组件

提示词调度分析

302.AI api 请求日志

MCP 相关资源链接：

MCP 官方文档

MCP 官方架构讲解

MCP Servers 集合

MCP Typescript SDK

思考与作业 ​

dify-mcp-server 中使用了 MCP 的 Tools 来集成外部 AI 应用， 但其实 MCP 还有 Resources 和 Prompts 等开放能力也能实现相同的效果。

作业一：请在当前的 dify-mcp-server 项目中，添加 Prompts、Resources 的集成方式。

参考资料：

提示：可以直接把上述的参考链接丢给 AI 作为上下文，让 AI 来帮你实现。

dify-mcp-server 项目中使用的 Transports 通讯方式是：stdio，除了 stdio 之外，其实还有其它的通讯方式。

作业二：请尝试给 dify-mcp-server 项目添加 HTTP SSE 的通讯方式。

参考资料：

Copyright© 2020-2025 卡颂
京ICP备20028082号-1