Loading...
Loading...
Compare original and translation side by side
npm install ai @ai-sdk/openainpm install ai @ai-sdk/openaiactionactionResponseStreamingTextResponse// 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();
};ResponseStreamingTextResponse// 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>
);
}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,
});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,
});