AI导哈

酒店搜索聊天前端

一个基于React和TypeScript的对话式酒店搜索和预订前端，支持多语言用户体验，集成Supabase Edge Functions和Anthropic MCP工具。

  • by Dekuran
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Dekuran/looking-com-tourism-technology-hackathon-salzburg-frontend

使用说明

looking.com前端

生产就绪的React+TypeScript前端，用于对话式酒店搜索和预订体验。它集成了i18n、shadcn UI、Supabase Edge Functions和Anthropic MCP工具，可以在聊天流程中查询酒店MCP服务器。

关键能力

快速入门

需求

  • Node 18+和npm
  • 一个名为的具有边函数的Supabase项目 chat
  • 启用MCP客户端测试版的人类API密钥

安装并运行

  • 将所需的环境变量复制到本地 .env

示例.env

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
  • 安装并启动
npm install
npm run dev

构建和预览

npm run build
npm run preview

体系结构概述

前端入口点

页面

UI和设计系统

国际化

后端集成

聊天如何连接到MCP服务器

端到端流程

  • 聊天页面收集消息并调用Supabase边缘功能：
    • 在 src/pages/Chat.tsx, handleSend 用途 supabase.functions.invoke('chat', { body: { messages }})
    • 在 src/pages/Hotel.tsx, handleSendMessage 用同样的方法 type: "hotel" 应用酒店优化系统提示
  • 启用MCP后，边缘功能将转发到Anthropic：
    • suabase/函数/聊天/index.ts 帖子到 https://api.anthropic.com/v1/messages
    • 它包括标题 anthropic-beta: mcp-client-2025-04-04 启用MCP客户端功能
    • 它过去了 mcp_servers 使用您的远程MCP服务器URL suabase/函数/聊天/index.ts
    • Anthropic将工具调用路由到MCP服务器，并返回正常文本和可选文本 tools_used 元数据
  • 该函数提取文本块并返回一个简单的JSON有效载荷 { message, stop_reason, tools_used? }
  • 前端将助手消息呈现到聊天UI中

时序图

sequenceDiagram
  participant UI as React UI
  participant SF as Supabase Function chat
  participant Anth as Anthropic Messages API
  participant MCP as Hotel MCP Server
  UI->>SF: supabase.functions.invoke chat(messages, type)
  SF->>Anth: POST /v1/messages (anthropic-beta mcp-client)
  Anth->>MCP: Tool call via mcp_servers
  MCP-->>Anth: Tool result
  Anth-->>SF: Message content + tool_use blocks
  SF-->>UI: { message, tools_used?, stop_reason }

边缘功能配置

在当地开发和运营

  1. 环境
  • 创建 .env 随着 VITE_SUPABASE_URL 和 VITE_SUPABASE_PUBLISHABLE_KEY
  • 创建Supabase秘密 ANTHROPIC_API_KEY 为了 chat 函数
  1. 前端
  • 运行开发服务器
    • npm run dev
  • 访问 http://localhost:5173
  1. Supabase边缘功能
  • 选项A：通过仪表板将该功能部署到您的Supabase项目中
  • 选项B：使用Supabase CLI
    • supabase functions serve chat
    • supabase secrets set ANTHROPIC_API_KEY=...
  1. MCP服务器

添加新功能

添加新页面

使用shadcn添加用户界面

  • 更倾向于在中重用现有图元 src/组件/ui
  • 如果需要新的shadcn组件，请生成它并将其放置在同一文件夹下

举杯

扩展聊天协议

  • 在中添加客户端命令 src/pages/Chat.tsx 通过解析输入和设置 type 或调用前的元数据 supabase.functions.invoke
  • 在中添加服务器端行为 suabase/函数/聊天/index.ts 通过：
    • 添加新 type 分支与 model, system，以及 mcpUrl
    • 或传递多个条目 mcp_servers 如果您的模型应该访问多个MCP服务器

调用另一个Supabase函数

添加或修改翻译

  • 更新密钥 src/i18n/config.ts
  • 使用 useTranslation 在需要的地方钩住，并确保钥匙存在于两者中 de 和 en

管理员分析

  • API基础配置在 src/pages/Admin.tsx
  • 考虑搬家 API_BASE_URL 如果您需要不同的环境，请将其转换为环境变量

安全和秘密

  • 不要将API密钥提交给回购。使用Supabase函数机密 ANTHROPIC_API_KEY 和 .env 仅适用于可发布的客户端值
  • 文件 src/lib/claudeApi.ts 是脚手架，不应用于生产；首选边缘函数路径
  • 如果您的函数应该是私有的，请限制CORS并验证JWT。看 suabase/config.toml

故障排除

  • 401来自Supabase：验证 VITE_SUPABASE_URL 和 VITE_SUPABASE_PUBLISHABLE_KEY
  • 401来自Anthropic：确保 ANTHROPIC_API_KEY 已为该功能设置
  • 未观察到MCP工具调用：检查 anthropic-beta 标题和 mcp_servers 配置在 suabase/函数/聊天/index.ts
  • 空响应：日志 data.content 在功能；我们只提取文本块

路线图和家政服务

  • 在整个应用程序中整合到一个单一的吐司系统（shadcn），以减少deps
  • 准备就绪后删除未使用的UI包装和资产
  • 将管理员API基本URL移动到环境配置

许可证

麻省理工学院

环境与保密管理

该项目避免将真实的API密钥存储在存储库或本地前端env文件中。

已经做了什么

不要将Anthropic密钥放在Vite env中

  • 切勿使用VITE_CLAUDE_API_KEY或类似产品。任何VITE_*变量都会暴露给浏览器。
  • 必须通过边缘函数中的Deno.env读取服务器端密钥。

您需要提供的秘密（服务器端）

  • ANTHROPIC_API_KEY：边缘函数使用的ANTHROPIC API键
  • MCP_URL：边缘功能使用的MCP服务器URL（以前硬编码）

Supabase函数秘密（生产）

  • 使用Supabase CLI：
    • supabase机密集ANTHROPIC_API_KEY=sk-ant-。..MCP_URL=https://your-mcp-server.example.com/mcp/capcorn
  • 该函数通过Deno.env.get读取它们 suabase/函数/聊天/index.ts

地方发展（职能）

  • 根据您的策略，不要在本地存储真实密钥。保持suabase/functions/.env为空（git会忽略它）。
  • 可选（仅用于本地功能测试）：使用ANTHROPIC_API_KEY和MCP_URL创建supabase/functions/.env。不要提交此文件。

前端环境（Vite）

  • 必填（公共）：
    • 统计
    • VITE_suabase_可发布密钥
  • 可选：
    • VITE_API_BASE_URL（如果您稍后将当前硬编码在中的Admin API外部化 src/pages/Admin.tsx)
  • 请参阅中的模板 .env.示例.您当前的本地 .env git被忽略了。

GitHub操作：设置存储库机密

  • 添加以下GitHub机密（设置→ 秘密和变量→ 行动→ 新存储库机密）：
    • ANTHROPIC_API_键
    • MCP_URL
    • 统计
    • VITE_suabase_可发布密钥
    • 可选：VITE_API_BASE_URL
  • 您的CI/CD工作流（如果/当添加时）可以将这些传递给构建/部署步骤。避免在日志中打印它们。

确认

  • 密钥不应存储在仓库中或推入提交中。
  • 生产密钥作为Supabase函数机密（用于边缘函数）存在。
  • 构建时/公共变量以GitHub Actions secrets的形式存在（导出为工作流的env），并且只有前缀为VITE_的变量对前端是安全的。

安全说明

  • 如果之前提交了任何敏感密钥（例如 src/lib/claudeApi.ts 在重构之前），考虑执行git历史清除（例如git过滤器仓库）并与您的提供者一起轮换密钥。

相关 MCP