Cursor + MCP 查询数据库快速生成用户报告

前期准备

在开始项目之前，我们需要进行一些初始化工作以确保项目的顺利进行。

1、初始化 nextjs 项目

首先，我们需要创建一个新的 Next.js 项目。可以使用以下命令来快速初始化项目：

npx create-next-app@latest user-report-live

这条命令将会创建一个名为 user-report-live 的新项目，并且会自动安装所有必要的依赖包。

2、可用的数据源

为了测试和开发，我们需要一个可用的数据源。推荐使用 Docker 来快速启动一个 MySQL 数据库实例，并添加一些测试数据。这可以通过以下步骤完成：

• 安装 Docker 并启动 Docker 服务。
• 使用 Docker 命令拉取 MySQL 镜像并启动一个容器实例。
• 连接到 MySQL 容器并创建一个新的数据库，然后添加一些测试数据。

3、配置 mysql 的 MCP 服务

我们将使用 Smithery 工具来链接数据库。以下是构建 Command 命令的详细步骤：

• 访问 Smithery 的官方网站，具体网址是：https://smithery.ai/server/@benborla29/mcp-server-mysql。
• 该 MySQL Server 主要用于处理 SQL 查询，可以放心使用。
• 源码可以在 GitHub 上找到，地址是：https://github.com/benborla/mcp-server-mysql/blob/main/index.ts。

复制 MCP Server 的配置文件，以便后续使用。

MCP Server 配置

在添加 MCP Server 时，我们需要填写以下详细信息：

• Name：服务器的名称，这里我们可以命名为“mysql”。
• Type：服务器类型，选择“command”。
• Command：执行命令，这里填写我们之前复制的 Command。

例如，完整的命令如下：

npx -y @smithery/cli@latest run @benborla29/mcp-server-mysql --config "{\"mysqlDb\":\"test_db\",\"mysqlHost\":\"localhost\",\"mysqlPass\":\"123456\",\"mysqlPort\":\"3306\",\"mysqlUser\":\"root\"}"

构建用户报告

1、测试 MCP Server 是否能被正常调用

prompt：

测试下 MCP Server 的 mysql 工具是否能够正常链接

2、执行 prompt 生成用户报告

接下来，我们需要执行一个 prompt 来生成用户报告。具体的命令如下：

请用MCP Server 的 mysql tool 做查询，获取 5 个维度的数据用于用户的数据统计。
要求：
1. 使用 MCP Server 的 mysql tool 来获取数据，并将数据保存到 users.ts 文件中
4. 请用 Hook 作为状态管理
5. 页面的渲染使用 shadcn ui 组件，并用图表的方式进行展示，组件可参考 @Shadcn 

这条命令将会触发 MCP 的 mysql 工具来统计用户数据，并使用 Hook 来处理数据获取，最后使用 shadcn ui 组件来渲染页面。

3、渲染效果页面

在数据处理完成后，我们需要将数据渲染到页面上。可以使用 shadcn ui 组件库来快速构建用户界面，提供良好的用户体验。

注意事项

在使用 MCP Server 时，必须确保使用 Compose 的 agent 模式，这是因为它提供了与 MCP Server 交互所需的所有必要功能。

• 录入的 prompt 将直接影响生成的图像效果和最终的网站内容，因此需要仔细设计 prompt 以确保生成的内容符合预期。
• Cursor 调用 MCP Server 时，应明确使用目标，以准确被调用。