OpenTiny NEXT

Appearance

介绍

接入三方 AI 应用 ​

VSCode Copilot ​

  1. 在 VSCode 软件中打开你的项目工程，在项目根目录增加 .vscode 文件夹，里面添加一个 mcp.json 文件，在该文件中加入以下内容。
json
{
  "servers": {
    "my-app-mcp-server": {
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=stream06-1921-4f09-af63-51de410e9e09"
    }
  }
}
  1. 配置完成之后点击 my-app-mcp-server 上方的启动按钮，这时你的前端应用的 MCP Server 就启动了。

  1. 然后使用快捷键 Ctrl + Alt + I 打开 VSCode Copilot AI 对话框，切换到 Agent 模式。

  1. 在输入框中输入需要操作的内容，这时 AI 就会调用你的前端应用中定义的 MCP 工具，操作你的前端应用，例如帮我选中 ID 为 6 的公司,就会调用定义的 MCP 工具，点击继续按钮。

  1. 查看是否调用 MCP 工具成功。

Cursor ​

  1. 在 Cursor 官网下载软件。

  1. 在 Cursor 使用快捷键 Ctrl + L 弹出 AI 对话框，点击设置按钮进行设置 MCP Server。

  1. 按照下面的步骤手动进行手动添加。
json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=stream06-1921-4f09-af63-51de410e9e09"
    }
  }
}
  1. 查看 MCP 是否配置成功并且进行验证。

  1. 新建会话，切换到 Agent 模式，在输入框中输入需要操作的内容，这时 AI 就会调用你的前端应用中定义的 MCP 工具，操作你的前端应用。

  1. 查看是否调用 MCP 工具成功。

Windsurf ​

  1. 在 Windsurf 官网下载软件。

  1. 在 Windsurf 中使用快捷键 Ctrl + L 弹出 AI 对话框，点击设置按钮进行设置 MCP Server。

  1. 配置 mcp_config.json 文件，格式如下。
json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=stream06-1921-4f09-af63-51de410e9e09"
    }
  }
}

  1. 点击 Refresh 会出现我们的 MCP Servers 是否成功。

  1. 新建会话，切换到 Chat 模式，在输入框中输入需要操作的内容，这时 AI 就会调用你的前端应用中定义的 MCP 工具，操作你的前端应用。

Trae ​

  1. 在 Trae 官网下载软件。

  1. 在 Trae 使用快捷键 Ctrl + U 弹出 AI 对话框，点击设置按钮进行设置 MCP Servers。

  1. 继续按照下面的步骤手动添加 MCP Servers ，格式如下：
json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=34a49b60-3368-467d-b9a0-1f067dd9d2ce"
    }
  }
}

  1. 查看 MCP Server 是否配置成功。

  1. 新建会话，在输入框中输入需要操作的内容，这时 AI 就会调用你的前端应用中定义的 MCP 工具，操作你的前端应用。

  1. 查看是否调用 MCP 工具成功。

Cherry Studio ​

  1. 在 Cherry Studio 官网下载软件。

  1. 选择助手

3.在 Cherry Studio 配置 MCP Servers。

json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "type": "streamableHttp",
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=f7e8e829-7eeb-4f10-816e-746253961237"
    }
  }
}

  1. 查看 MCP Server 是否配置成功。

  1. 新建会话，在输入框中输入需要操作的内容，选择定义的 MCP 工具，点击发送按钮。

  1. 查看是否调用 MCP 工具成功。

Cline ​

  1. Vscode 下载 Cline 插件。

  1. 用 github 账号进行登录并且在 Cline 中配置 MCP Servers。

  1. 配置好后会自动生成下面的文件。
json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 60,
      "type": "streamableHttp",
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=64b25d93-381d-4c6b-b43c-c5cf2f49445d"
    }
  }
}

  1. 查看 MCP Server 是否配置成功。

  1. 新建会话，在输入框中输入需要操作的内容，点击发送按钮。

  1. 查看是否调用 MCP 工具成功。

通义灵码 ​

  1. 在 通义灵码 官网下载软件。

  1. 在通义灵码 IDE 使用快捷键 Ctrl + Shift + L 弹出 AI 对话框，点击设置按钮进行设置 MCP Server。

  1. 继续按照下面的步骤手动添加 MCP Servers。

  1. 手动配置格式如图。

  1. 查看 MCP Server 是否配置成功。

  1. 新建会话，选择智能体，输入需要操作的内容，点击发送按钮。

  1. 查看是否调用 MCP 工具成功。

Dify ​

  1. 在 Dify 官网进行登录

2.创建 Chatflow 空白应用。

  1. 新建 Agent 智能体。

  1. 设置 Agent 策略。

  1. 设置模型。

  1. MCP 服务配置中输入配置信息。
json
{
  "my-app-mcp-server": {
    "transport": "streamable_http",
    "url": "https://ai.opentiny.design/sse?sessionId=df8f46fd-84a2-4079-88b9-b3dfef176f15"
  }
}

  1. 查看运行是否成功。

  1. 预览这个编排任务并且在输入框中输入需要操作的内容验证这个任务。

  1. 查看是否调用 MCP 工具成功。

Coze ​

  1. 进入 Coze 官网，登录后点击打开网页版。

  1. 在 Coze 中配置 MCP Servers ，先添加管理工具。

  1. 添加自定义管理工具。
json
{
  "mcpServers": {
    "my-app-mcp-server": {
      "type": "streamableHttp",
      "url": "https://agent.opentiny.design/api/v1/webmcp-trial/mcp?sessionId=64b25d93-381d-4c6b-b43c-c5cf2f49445d"
    }
  }
}

  1. 查看 MCP Server 是否配置成功。

  1. 新建会话，选择智能体，输入需要操作的内容，点击发送按钮。

  1. 查看是否调用 MCP 工具成功。