Supplier Risk MCP Agent

供应链风险分析——Next.js + MCP（世界银行）

利用Next.js 15、TypeScript、AI SDK 5、shadcn/ui、AI Elements和MCP服务器，基于世界银行数据按国家分析供应链风险。

特点/特性

• 使用AI元素（对话、消息、提示输入）打造简洁的聊天界面
• 世界银行MCP工具： list_countries， list_indicators， get_indicator_data
• shadcn/UI设计系统
• 通过AI SDK流式传输UI消息响应
• TypeScript 准备就绪

设置

1. 安装依赖项：

   pnpm install

1. 创建 .env.local 包含所需环境变量的文件：

   OPENAI_API_KEY=your_openai_api_key_here
   WORLD_BANK_MCP_SERVER_URL=http://localhost:3001/mcp

1. 开始开发：

- 在A终端（应用）中：

     pnpm dev

应用程序地址：http://localhost:3000

- 在B终端（MCP服务器）：

     cd mcp-servers/world-bank && pnpm dev

MCP: http://localhost:3001（端点：/mcp）

打开 http://localhost:3000（本地主机上的3000端口） 与AI助手聊天。

资源

• Next.js 15 - React 框架
• AI SDK 5（人工智能软件开发工具包第5版） - 人工智能集成工具包
• AI元素 - 预构建的AI组件
• 模型上下文协议 - 工具集成协议
• shadcn/ui（可译为“shadcn用户界面库”或根据具体上下文简化为“shadcn UI”，表示这是一个用于构建用户界面的库或框架） - 组件库
• Tailwind CSS - 实用性优先的CSS
• TypeScript - 类型安全的JavaScript

架构与数据流

+-------------------------+            +--------------------------------------+            +---------------------------+
|       Browser UI        |            |       Next.js API Route              |            |        MCP Server         |
| `ChatAssistant`         |            | `app/api/agent-with-mcp-tools`       |            |  http://localhost:3001    |
|  - AI Elements UI       |            |  - validate input                    |            |  endpoint: /mcp           |
|  - PromptInput submit   |            |  - AI SDK `streamText` with tools    |            +---------------------------+
+-------------------------+            |  - model: openai('gpt-4o')           |                        |
            |                         +--------------------------------------+                        |
            | 1) User types message                                                                 |
            |--------------------------------------------------------------------------------------->|
            |  POST /api/agent-with-mcp-tools { messages }                                          |
            |                                                                                       |
            |                                         2) MCP tool calls (HTTP /mcp)                 |
            |                                         --------------------------------------------->|
            |                                                                                       |
            |                                         3) World Bank API (data fetch)                |
            |                                         <---------------------------------------------|
            |                                                                                       |
            | 4) Streamed UI message response                                                       |
            |<---------------------------------------------------------------------------------------|
            v

Env:
- `OPENAI_API_KEY` → used by AI SDK OpenAI client
- `WORLD_BANK_MCP_SERVER_URL` → MCP endpoint (default: http://localhost:3001/mcp)

Notes:
- If the app selects an alternate port (e.g., 3002), open that port.
- MCP server must be running; otherwise tools will fail to load.