前期准备
在开始项目之前，我们需要进行一些初始化工作以确保项目的顺利进行。
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 时，应明确使用目标，以准确被调用。
