Back to Details

vercel-ai-sdk

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vercel AI SDK for Remix Integration

Vercel AI SDK 与 Remix 集成指南

The Vercel AI SDK is the standard for building AI UIs. It abstracts streaming, state management, and provider differences.
Vercel AI SDK是构建AI UI的标准工具，它对流式传输、状态管理以及不同服务提供商的差异做了抽象封装。

1. Setup

1. 环境配置

bash
npm install ai @ai-sdk/openai
bash
npm install ai @ai-sdk/openai

2. Server-side Streaming (
action
function)

2. 服务端流式传输（
action
函数）

Remix uses 
Response
objects. The AI SDK has a helper 
StreamingTextResponse
.
typescript
// app/routes/api.chat.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { ActionFunctionArgs } from "@remix-run/node";

export const action = async ({ request }: ActionFunctionArgs) => {
  const { messages } = await request.json();

  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  return result.toDataStreamResponse();
};
Remix使用
Response
对象，AI SDK提供了辅助工具
StreamingTextResponse
。
typescript
// app/routes/api.chat.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { ActionFunctionArgs } from "@remix-run/node";

export const action = async ({ request }: ActionFunctionArgs) => {
  const { messages } = await request.json();

  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  return result.toDataStreamResponse();
};

3. Client-side UI hooks

3. 客户端UI Hooks

Use 
useChat
to manage message state and input automatically.
tsx
// app/routes/app.assistant.tsx
import { useChat } from 'ai/react';

export default function AssistantPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat', // points to the action above
  });

  return (
    <div className="chat-container">
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user-msg' : 'ai-msg'}>
          {m.content}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input 
          value={input} 
          onChange={handleInputChange} 
          placeholder="Ask AI something..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}
使用
useChat
可以自动管理消息状态和输入内容。
tsx
// app/routes/app.assistant.tsx
import { useChat } from 'ai/react';

export default function AssistantPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat', // points to the action above
  });

  return (
    <div className="chat-container">
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user-msg' : 'ai-msg'}>
          {m.content}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input 
          value={input} 
          onChange={handleInputChange} 
          placeholder="Ask AI something..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

4. Shopify Context Injection

4. Shopify上下文注入

You often want the AI to know about the current Store. Retrieve data in the 
action
and inject it as a "System Message".
typescript
// app/routes/api.chat.ts
const { session } = await authenticate.admin(request);
// Fetch store data with Mongoose
const products = await Product.find({ shop: session.shop }).limit(5).lean();
const contextInfo = JSON.stringify(products);

const result = await streamText({
  model: openai('gpt-4o'),
  system: `You are a helper for shop ${session.shop}. Here are likely relevant products: ${contextInfo}`,
  messages,
});
通常你需要让AI了解当前店铺的相关信息，你可以在
action
中获取对应数据，并将其作为「系统消息」注入。
typescript
// app/routes/api.chat.ts
const { session } = await authenticate.admin(request);
// Fetch store data with Mongoose
const products = await Product.find({ shop: session.shop }).limit(5).lean();
const contextInfo = JSON.stringify(products);

const result = await streamText({
  model: openai('gpt-4o'),
  system: `You are a helper for shop ${session.shop}. Here are likely relevant products: ${contextInfo}`,
  messages,
});

5. Deployment Note (Streaming)

5. 部署注意事项（流式传输）

Streaming works out-of-the-box on Vercel, Fly.io, and VPS. If using standard Node.js adapter, ensure your server supports standard Web Streams (Node 18+).
流式传输功能在Vercel、Fly.io和VPS上可以开箱即用。如果你使用标准Node.js适配器，请确保你的服务器支持标准Web Streams（需要Node 18及以上版本）。