Vercel AI SDK for Remix Integration Skill

Vercel AI SDK for Remix Integration

The Vercel AI SDK is the standard for building AI UIs. It abstracts streaming, state management, and provider differences.

1. Setup

npm install ai @ai-sdk/openai

2. Server-side Streaming (`action` function)

Remix uses Response objects. The AI SDK has a helper StreamingTextResponse.

// 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

Use useChat to manage message state and input automatically.

// 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

You often want the AI to know about the current Store. Retrieve data in the action and inject it as a "System Message".

// 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)

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+).

Agent Skills: Vercel AI SDK for Remix Integration

Install this agent skill to your local

Skill Files