yd-mcp反应聊天演示
一个轻量级的React（Vite+TypeScript）演示，向Cloudflare Worker发送GraphQL请求。UI模仿您共享的终端屏幕截图：键入一个自然语言问题，Worker发出GraphQL变异，例如 { askQuestion { answer } }，答案出现在问题的正下方。
技术栈
- React 18与Vite 5结合，实现快速本地开发
graphql-request作为最小的GraphQL客户端- Cloudflare Workers（包括示例脚本）作为问答端点
入门
- 安装deps
npm install- 配置环境 –复制
.env.example到.env并设置您的Worker URL（和可选的承载令牌）：
cp .env.example .env- 在本地运行
npm run devVite继续奔跑 默认情况下。
请求/响应格式（GraphQL）
浏览器和Worker通过GraphQL进行通信。等效 curl 请求：
curl -X POST $WORKER/graphql \
-H "Content-Type: application/json" \
-d '{
"query":"mutation($question:String!){ askQuestion(question:$question){ answer askedAt }}",
"variables":{"question":"解释下什么是云计算"}
}'Worker使用标准的GraphQL JSON进行回复：
{
"data": {
"askQuestion": {
"answer": "云计算是一种通过互联网提供计算资源的模式...",
"askedAt": "2025-11-08T15:30:00.000Z"
}
}
}React组件呈现 question 和 answer 像堆叠的聊天泡泡一样配对。
Cloudflare工作人员示例
workers/chat-graphql-worker.ts 暴露上面显示的确切GraphQL模式：它检查 askQuestion 突变并返回罐装 answer。用AI调用、搜索结果或任何其他数据源替换占位符逻辑。
部署Worker（基本流程）：
- 安装牧马人并登录–
npm i -g wrangler && wrangler login. - 将脚本复制到Worker项目中（或将其作为模块导入）。
- 更新您的
wrangler.toml设置所需的路由和绑定。 wrangler deploy出版。
环境变量
| 名称 | 描述 |
|---|---|
VITE_WORKER_GRAPHQL_ENDPOINT | 必需。GraphQL Worker的完整HTTPS URL（例如。 https://chat-api.your-worker.workers.dev/graphql). |
VITE_WORKER_API_TOKEN | 如果您的Worker需要身份验证，则可以选择承载令牌。 |
下一步
- 将示例答案生成器与实际的AI/搜索管道交换，并在需要时保持对话。
- 添加身份验证（例如Cloudflare Access或JWT），并通过以下方式在请求标头中转发令牌
VITE_WORKER_API_TOKEN. - 通过流式响应、markdown渲染或引用来增强UI。