Nuxt•5mo ago

@ai-sdk/vue: How do I react to an error I catch inside `/api` in .vue file?

I am both new to vue and nuxt. How and where do I react to that error, i sent from the api endpoint now? I want to create a new toast message in the frontend on error. This is my code at /api/chat:

import { StreamingTextResponse, streamText } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';

export default defineLazyEventHandler(async () => {
    const apiKey = useRuntimeConfig().openaiApiKey;
    if (!apiKey) throw new Error('Missing OpenAI API key');

    const openai = createOpenAI({
        apiKey: apiKey,
    });

    return defineEventHandler(async (event: any) => {
        const { messages } = await readBody(event);

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

            return new StreamingTextResponse(result.toAIStream());
        } catch (error) {
            console.error("AI request errored:", error);
            sendError(event, createError({ statusCode: 500, statusMessage: 'Internal Server Error', message: 'AI request errored' }));
        }
    });
});

import { StreamingTextResponse, streamText } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';

export default defineLazyEventHandler(async () => {
    const apiKey = useRuntimeConfig().openaiApiKey;
    if (!apiKey) throw new Error('Missing OpenAI API key');

    const openai = createOpenAI({
        apiKey: apiKey,
    });

    return defineEventHandler(async (event: any) => {
        const { messages } = await readBody(event);

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

            return new StreamingTextResponse(result.toAIStream());
        } catch (error) {
            console.error("AI request errored:", error);
            sendError(event, createError({ statusCode: 500, statusMessage: 'Internal Server Error', message: 'AI request errored' }));
        }
    });
});

How I interact in the frontend:

const { messages, input, handleSubmit, isLoading } = useChat()

const { messages, input, handleSubmit, isLoading } = useChat()

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

@ai-sdk/vue: How do I react to an error I catch inside `/api` in .vue file?