home / skills / toilahuongg / shopify-agents-kit / vercel-ai-sdk

vercel-ai-sdk skill

safe

This skill helps you integrate Vercel AI SDK into Remix apps to build AI chatbots and agents with streaming and context injection.

npx playbooks add skill toilahuongg/shopify-agents-kit --skill vercel-ai-sdk

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.5 KB

---
name: vercel-ai-sdk
description: Guide for integrating Vercel AI SDK into Remix apps. Build AI chatbots, text completion, and agents within your Shopify app.
---

# 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

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

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

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();
};
```

## 3. Client-side 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>
  );
}
```

## 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".

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

Overview

This skill guides integrating the Vercel AI SDK into Remix applications to build chatbots, text completion, and agent features inside a Shopify app. It shows how to stream responses from server actions, manage client-side chat state with React hooks, and inject Shopify store context for more relevant AI outputs. Practical deployment notes cover streaming support across common hosts.

How this skill works

On the server, the skill uses the SDK’s streaming helper to produce a Response-compatible stream from Remix action functions. On the client, use the provided useChat hook to manage messages, input state, and submit flows that call the server action. For Shopify apps, fetch store or product data in the action and prepend it as a system message so the model has contextual knowledge about the shop.

When to use it

Building conversational UIs in Remix that require streaming AI responses.
Embedding AI assistants inside a Shopify app that need awareness of store data.
When you want unified handling of provider differences and streaming details.
Implementing fast, responsive chat experiences with minimal client-side plumbing.

Best practices

Return streaming responses from Remix action functions using the SDK’s stream helpers to avoid buffering delays.
Use useChat on the client to automatically manage message state and input handlers for minimal UI code.
Inject store-specific context as a system message after fetching authenticated data; keep the context size reasonable (summaries or a few items).
Ensure your deployment target supports Web Streams (Node 18+ or Vercel/Fly.io) to preserve streaming behavior.
Limit sensitive data in system messages and sanitize or redact fields before sending to the model.

Example use cases

Shopify assistant that recommends products based on cart or recent orders by injecting product summaries into the system message.
Customer support chatbot that streams concise, context-aware replies while fetching relevant order or user data server-side.
Admin-facing assistant for bulk-editing product metadata using model suggestions and streamed completions.
In-app help widget that uses useChat for instant messaging and server-side actions for longer-running generation tasks.

FAQ

How do I stream model output from a Remix action?

Call the SDK’s streamText or equivalent with your model and messages, then return the result as a Response-compatible data stream from the action.

How can the AI know which shop or products to reference?

Authenticate the request in the action, fetch the shop-specific data (e.g., a few products), serialize or summarize it, and include it as a system message when calling the model.

Does streaming work on all hosts?

Streaming works out-of-the-box on Vercel and Fly.io. For standard Node servers, use Node 18+ or another runtime that supports standard Web Streams to maintain streaming behavior.