Eg of streamText

[nalaso]

I found https://sdk.vercel.ai/examples/next-pages/basics/streaming-text-generation and https://sdk.vercel.ai/examples/next-app/basics/streaming-text-generation

is it possible to use useCompletion in app router with api?

[nalaso]

app/page.tsx

	const {complete, completion, isLoading:elementPropertyLoading} = useCompletion({
		api: '/api/element-property',
	});

	console.log(completion,elementPropertyLoading);

	useEffect(() => {
		const dd = async () => {
			await complete("",{
				body:{
					refine: false,
					imageBase64: imagss,
					imageModelId: imageModel
				}
			})
		}
		dd()
	}, [])

app/api/element-property.ts

import { llm } from '@/lib/llm';
import { getElementProperty, getRefienedElementProperty } from '@/lib/prompt';
import { streamText } from 'ai';
import { z } from 'zod';

export const maxDuration = 60;
export const dynamic = 'force-dynamic';

const inputSchema = z.object({
  imageBase64: z.string().min(1, "Image is required"),
  imageModelId: z.string(),
  refine: z.boolean(),
  oldProperties: z.string().optional(),
});

export async function POST(req: Request) {
  try {
    const body = await req.json();
    
    const { imageModelId, imageBase64, refine, oldProperties } = inputSchema.parse(body);

    const elementProperty = await streamText({
      model: llm(imageModelId),
      messages: [
        {
          role: 'user',
          content: [
            { 
              type: 'text', 
              text: refine?getRefienedElementProperty(oldProperties||""):getElementProperty()
            },
            {
              type: 'image',
              image: imageBase64
            },
          ],
        },
      ],
    });

    elementProperty.toDataStreamResponse();
  } catch (error) {
    console.error('Error in API route:', error);
    if (error instanceof z.ZodError) {
      return new Response(JSON.stringify({ error: 'Invalid input', details: error.errors }), {
        status: 400,
        headers: { 'content-type': 'application/json' },
      });
    }
    return new Response(JSON.stringify({ error: 'Internal server error' }), {
      status: 500,
      headers: { 'content-type': 'application/json' },
    });
  }
}

[nalaso]

⨯ Error: No response is returned from route handler 'src/app/api/element-property/route.ts'. Ensure you return a Response or a NextResponse in all branches of your handler.

[lgrammel]

there is return missing in this line: elementProperty.toDataStreamResponse();

[nalaso]

Still the same

I later changes it to my generateText code. So missed return while typing here

[nalaso]

https://sdk.vercel.ai/docs/ai-sdk-ui/completion

this worked!!

for me complete() was causing error in the backend

Thanks.