Loading...
Loading...
Guide for integrating Vercel AI SDK into Remix apps. Build AI chatbots, text completion, and agents within your Shopify app.
npx skill4agent add toilahuongg/shopify-agents-kit vercel-ai-sdknpm install ai @ai-sdk/openaiactionResponseStreamingTextResponse// 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();
};useChat// 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>
);
}action// 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,
});