🚀 MCP聊天前端（代理AI SE启用）
💡 特征：
干净的React UI（使用Tailwind+shadcn/UI）
使用gpt-4.1-nano与OpenAI的MCP后端进行实时聊天
简单的会话跟踪
✅ 先决条件
- 你的前端是使用React+Tailwind构建的，因此它需要React支持（在这种情况下是使用Node）和安装的Tailwind包。
- MCP FastAPI后端通过其API在OpenAI上远程运行(https://api.openai.com/v1/chat/completions)，因此需要一个OpenAI帐户和一个API密钥。尽管如此，您还包含了一个本地LLM版本（MCPChat.jsx.local），您的后端将在其中运行http://localhots:8000/mcp或者可以单独托管（例如通过Render或Railway）。
对于这种用法，您需要一个本地LLM，例如Ollama，它提供对LLM的访问，如llama3、llama3.2、DeepSeek-V2和DeepSeek-V2.5、Mistral等。
- 你有一个GitHub帐户。
- 您已在以下网址注册https://vercel.com.
🗂️ 逐步建立需求
：hourglass_flowing_sand：设置节点安装：
下载Node.jshttps://nodejs.org/en/download或者直接打开终端并执行以下命令。
# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js:
nvm install 22
# Verify the Node.js version:
node -v # Should print "v22.17.0".
nvm current # Should print "v22.17.0".
# Verify npm version:
npm -v # Should print "10.9.2".：twisted_rightwards_arrows:创建您的OpenAI帐户和API密钥
- 首选 OpenAI 并创建一个帐户或登录（如果您已经有了）。在登录按钮上选择“API平台”
- 去你的 设置页面 并选择 API密钥 部分
- 点击 创建新密钥 并保留您的密钥，因为稍后在代码中需要它。请注意，你将无法再看到它，所以 把它放在安全的地方
：octocat：创建一个Github帐户
如果你没有Github帐户，你需要创建一个
- 首选 并创建您的帐户
- 如果你正在使用Homebrew，只需运行
brew install git并验证安装是否正在运行git --version - 如果你更喜欢使用Git binery安装程序，请访问 （请注意，这是4年前的二进制文件，因此不建议使用）
：啤酒：可选：安装自制啤酒
如果你更愿意使用Git包安装，请安装包管理器Homebrew，它也将为你提供一种安装未来包的方法。为此，您有两个主要选择：
- 执行
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"并遵循指示 - 从下载最新的Mac软件包版本 Hombrew git仓库
📂 创建您的Vercel帐户
如果您还没有Vercel帐户，请按照以下步骤操作：
- 首选 维塞尔 然后单击 注册
- 选择 我在做个人项目
- 设置您的姓名并选择 继续使用Github 因此，我们将Vercel和您的github存储库连接起来，以实现更简单、更快的部署
- 授权Vercel连接到Github。
- 你完了！
🗂️ 逐步安装应用程序
克隆mcp聊天前端Github存储库
你有一个应用程序要安装在Github存储库中，所以你只需将存储库克隆到lacal并将其推送到你自己的Github即可。
- 打开A 终端 并创建一个新文件夹，该文件夹将旧化应用程序的代码，例如 MCPChat 执行
mkdir MCPChat - 输入该文件夹
cd MCPChat并执行git clone https://github.com/JL-Amplitude/mcp-chat-frontend.git - 输入新文件夹
cd mcp-chat-frontend - 执行以下命令将其推送到您自己的Github存储库
git init
git add .
git commit -m "Initial MCP chat frontend"
git remote add origin https://github.com/yourusername/mcp-chat-frontend.git
git push -u origin main现在，您已经准备好了代码并将其推送到Github。接下来，我们将部署应用程序，您有两个选择：
- 将其部署到托管基础设施，如Vercel，这是一个专注于简化web开发的云平台，专门用于构建、部署和扩展前端和无服务器应用程序。
- 使用Node.js在本地安装、构建和运行所有内容。
📂 Vercel部署
- 转到您的Vercel帐户控制面板，然后单击\*\*添加新帐户。..“选择 项目
- 在 导入git存储库，选择 添加Github帐户 添加您的github帐户
- 在出现的弹出窗口中，选择 在所有存储库中安装Vercel
- 使用您的Github帐户登录
- 选择 mcp聊天前端 存储库并单击 导入.
在下一个屏幕中，您将看到Vercel已自动检测到它是一个具有预设框架的React Native应用程序 创建React应用程序。只需检查 构建和输出设置 由于React Native框架，您将自动看到（至少） npm run build 和 npm install whcih将生成所有需要的模块。
- 点击 环境变量 并添加从环境中读取的OpenAI API密钥
- 密钥：REACT_APP_OPENAI_API_Key - 价值：您的OpenAI API密钥(
- 点击 部署
- 祝贺 你！！您已成功部署应用程序！！点击 继续到仪表板
要访问该应用程序，您需要在 领域 应用程序仪表板上的支架。您可能会看到主域https://mcp-chat-frontend.vercel.app还有至少两个，其中一个用你的用户名固定， 选择后者 打开应用程序。
📂 本地部署
从a 终端 shell，去（留在）你克隆代码的文件夹里 mcp聊天前端，以及：
- 输入文件夹
cd ~/your_path/mcp-chat-frontend - 编辑
.env文件vi .env并使用API密钥更改附加值 - 执行
npm run build - 执行
npm install
这将安装所有需要的模块，并生成服务器以在本地执行您的应用程序。为此，只需执行 npm start；这将在中启动服务器 http://localhost:3000/ 并使用该应用程序打开浏览器。
这就是全部！！无论是与Vercel本地部署，玩得开心！！