Front Ia MCP

前端SSO–聊天IA

前端em Vite+React+TypeScript 带屏幕 IA聊天，集成到 Vercel AI SDK (@ai-sdk/react e ai).

API（后端）

O前端美国O挂钩 useChat com DefaultChatTransport聊天端点必须是 与Vercel AI SDK合同兼容:

• 方法： POST
• 主体： { id: string, conversationId: string, messages: UIMessage[] } --o阵列 messages 跟随类型 UI消息\[\] （每个项目 id, role, parts).前端仅发送当前用户消息（数组中的单个元素）。
• 答案 ： 流无格式 UIMessageStreamResponse （例如：返回 streamText(...).toUIMessageStreamResponse())

后端路径示例（Node/Express with AI SDK）：

import { streamText, convertToModelMessages, type UIMessage } from 'ai';

app.post('/api/chat', async (req, res) => {
  const { id, conversationId, messages }: { id: string; conversationId: string; messages: UIMessage[] } = req.body;
  // messages: UIMessage[] — apenas a última mensagem do usuário; o backend deve montar o histórico (ex.: carregar por id/conversationId) e acrescentar esta mensagem antes de chamar o modelo
  const result = streamText({
    model: openai('gpt-4o'), // ou outro provider
    messages: await convertToModelMessages(messages),
  });
  return result.toUIMessageStreamResponse();
});

查看文档 API-SSO/docVercelIA.txt 了解更多详情。

配置

1. 安装依赖关系

   npm install

1. 环境变量（ 可选）

创建文件 .env 项目根（可以使用 .env.example 作为基础）：

- VITE_API_CHAT_URL –URL完成端点去聊天。 - 如果未设置，则前端使用 /api/chat （在 dev 中，Vite 可以代理后端；参见 vite.config.ts). - 同一台机器上的后端示例 ：\ VITE_API_CHAT_URL=http://localhost:3334/api/chat

1. Proxy 开发中

不 vite.config.ts 代理服务器已配置为转发 /api 段落 http://localhost:3334如果您的后端在另一个端口上运行，请更改 target 做代理。

脚本

• npm run dev 开发服务器（Vite）。
• npm run build 生成生产构建。
• npm run preview – 在本地提供构建以进行测试。

相关结构

• src/components/Chat.tsx –组件Da结构去聊天（使用聊天+默认实例）。
• src/App.tsx – 显示 o Chat.
• src/env.d.ts – 打字 import.meta.env （例如： VITE_API_CHAT_URL).

堆栈

• 快7
• 反应19
• TypeScript
• Vercel AI SDK： ai, @ai-sdk/react

前端---代理商