Looking Com Tourism Technology Hackathon Salzburg Frontend

looking.com前端

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

关键能力

• 对话式搜索和预订流程 src/pages/Chat.tsx 和 src/pages/Hotel.tsx
• 中的管理员分析仪表板 src/pages/Admin.tsx
• 多语言用户体验 src/i18n/config.ts
• Supabase客户端 src/集成/supabase/client.ts 和无服务器聊天功能 suabase/函数/聊天/index.ts
• 顺风设计系统 src/index.css 已连接主题令牌 顺风配置ts

快速入门

需求

• 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

体系结构概述

前端入口点

• 应用程序引导和i18n初始化 src/main.tsx
• 路由和提供商 src/App.tsx 使用React路由器和React查询
• 全球导航 src/components/Navigation.tsx

页面

• 聊天： src/pages/Chat.tsx
• 酒店降落： src/pages/Hotel.tsx
• 管理员仪表板： src/pages/Admin.tsx
• 预订确认： src/pages/BookingConfirm.tsx
• 未找到： src/pages/NotFound.tsx

UI和设计系统

• 顺风代币和主题 src/index.css 和 顺风配置ts
• 中的shadcn UI图元 src/组件/ui
• 类合并实用程序 src/lib/utils.ts
• 吐司系统（shadcn） src/组件/ui/烤面包机.tsx + src/挂钩/使用固定

国际化

• 所有副本都存在 src/i18n/config.ts 随着 de 和 en 命名空间
• 语言切换处于 src/components/Navigation.tsx

后端集成

• 中的Supabase客户端配置 src/集成/supabase/client.ts
• 脚手架类型 src/集成/supabase/types.ts
• 边缘功能的实现 suabase/函数/聊天/index.ts
• 在中支持本地配置 suabase/config.toml

聊天如何连接到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 }

边缘功能配置

• API密钥：集 ANTHROPIC_API_KEY 在您的Supabase项目环境中
• CORS：允许的默认值 suabase/函数/聊天/index.ts
• 系统提示和型号选择按 type 在 suabase/函数/聊天/index.ts
• 在函数配置对象中配置的MCP服务器URL suabase/函数/聊天/index.ts

在当地开发和运营

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服务器

• 确保MCP服务器URL位于 suabase/函数/聊天/index.ts 可从边缘功能访问

添加新功能

添加新页面

• 在下创建组件 src/页
• 在中注册路线 src/App.tsx 里面 `` 块
• 在中添加导航条目 src/components/Navigation.tsx
• 添加i18n密钥 src/i18n/config.ts

使用shadcn添加用户界面

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

举杯

• 使用遮阳吐司钩 src/挂钩/使用固定 和供应商 src/组件/ui/烤面包机.tsx
• 示例

- import { toast } from "@/hooks/use-toast" - toast({ title: "Saved", description: "Your changes are live." })

扩展聊天协议

• 在中添加客户端命令 src/pages/Chat.tsx 通过解析输入和设置 type 或调用前的元数据 supabase.functions.invoke
• 在中添加服务器端行为 suabase/函数/聊天/index.ts 通过：

- 添加新 type 分支与 model, system，以及 mcpUrl - 或传递多个条目 mcp_servers 如果您的模型应该访问多个MCP服务器

调用另一个Supabase函数

• 在下实现新功能 苏巴基/函数
• 通过以下方式从客户端调用它 src/集成/supabase/client.ts 随着 supabase.functions.invoke("your-func", { body })
• 将共享DTO保存在 /types 模块

添加或修改翻译

• 更新密钥 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文件中。

已经做了什么

• 前端不再使用硬编码密钥。呼叫通过Supabase Edge功能路由 src/lib/claudeApi.ts.
• Edge函数从环境变量（服务器端）中读取机密 suabase/函数/聊天/index.ts.
• MCP服务器URL可通过env配置： suabase/函数/聊天/index.ts.

不要将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过滤器仓库）并与您的提供者一起轮换密钥。