MCP Fastapi Streamlit App

库存管理系统

一个本地数据驱动的应用程序，展示了用户友好的Streamlit前端、强大的FastAPI后端和由本地模型上下文协议（MCP）服务器启用的AI代理之间的强大协同作用。

该项目展示了如何构建一个全栈Python应用程序，该应用程序可以由人类用户通过web UI和AI代理通过自然语言命令进行交互。

关键技术

• FastAPI：一个现代、快速（高性能）的web框架，用于构建后端API。

• Streamlit：一个开源应用程序框架，用于在纯Python中创建交互式web应用程序，作为用户友好的前端。

• SQLite：一个轻量级的、基于文件的数据库，用于存储库存数据。

• MCP（模型上下文协议）：一种开放标准，允许AI代理与本地应用程序的工具和数据安全地交互。

建筑

该系统由三个相互连接的组件组成，所有组件都在您的本地计算机上运行。

• Streamlit前端使用标准HTTP请求与FastAPI后端通信，以显示和管理库存数据。

• FastAPI后端处理所有数据逻辑，并将信息持久化到SQLite数据库文件（inventory.db）中。

• 专用的本地MCP服务器将FastAPI端点作为可调用工具公开。这允许AI代理（例如GitHub Copilot Chat）通过自然语言命令调用这些工具，有效地绕过UI直接与后端交互。

入门指南

按照以下步骤设置和运行应用程序。

先决条件

• Python 3.8+安装时启用了pip和venv。

• 已安装Visual Studio代码。

• GitHub Copilot聊天扩展和MCP扩展安装在VS代码中。

步骤1：项目设置

• 打开终端或命令提示符并创建新的项目目录。

mkdir InventoryApp
cd InventoryApp

• 创建并激活Python虚拟环境。

python -m venv venv
.\venv\Scripts\activate

• 安装所有必需的Python库。

pip install fastapi "uvicorn[standard]" streamlit "mcp[cli]" pandas

步骤2：创建应用程序文件

在InventoryApp目录中创建以下三个文件。

• 数据库.py

• api.py

• app.py

• mcp_server.py

复制前一对话中每个文件的代码。

步骤3：配置MCP服务器

• 在VS Code中打开项目（文件>打开文件夹…）。

• 在项目的根目录中创建一个名为.vscode的新文件夹。

• 在.vcode文件夹中，创建一个名为settings.json的新文件。

• 将以下JSON配置添加到settings.JSON文件中。这告诉VS代码MCP扩展如何运行本地服务器。

{
    "mcpServers": {
        "Inventory Manager": {
            "command": "python",
            "args": ["${workspaceFolder}\\mcp_server.py"],
            "description": "An MCP server for managing inventory data."
        }
    }
}

步骤4：运行应用程序

您需要在两个不同的终端中运行两个单独的命令。

• 运行FastAPI后端：打开第一个终端，导航到项目目录，激活虚拟环境，然后启动FastAPI服务器。

uvicorn api:app --reload

• 运行Streamlit前端：打开第二个终端，激活虚拟环境，并启动Streamlit应用程序。这将在浏览器中打开web UI。

streamlit run app.py

您的应用程序现在正在本地运行！

如何使用

方法1：通过流式Web UI

打开浏览器http://localhost:8501.在这里，您可以使用表单添加新项目，然后单击“刷新库存”按钮查看数据库内容。

方法2：通过AI代理

在VS Code中打开GitHub Copilot Chat并尝试这些提示。AI将自动使用Inventory Manager MCP服务器与后端进行交互。

• 提示：“列出当前库存中的所有项目。”

• 提示：“添加一个名为‘锤子’的新项目，数量为10，价格为15.75。”

• 提示：“数据库中‘锤子’的总量是多少？”（这需要人工智能调用工具，解析结果并执行计算，以展示这种架构的真正力量。）