Mastering Object Streaming with the new Vercel AI SDK for Enhanced UX

const SIdeaOutput = z.object({
  name: z.string().describe('The name of the idea.'),
  description: z.string().describe('The description of the idea.'),
})
 
const SToolOutput = z.array(SIdeaOutput).describe('The list of 10 simple ideas.')
 
// some other code
 
const parser = StructuredOutputParser.fromZodSchema(SToolOutput)
 
const formatInstructions = parser.getFormatInstructions()

const systemMessageTemplate = `Generate 10 simple software/tool ideas based on the following requirements folowing exactly the given format instructions:
 
    % REQUIREMENTS
 
    1. The suggested software tool idea should be simple to build and implement (e.g. a simple web app)
    2. The suggested software tool should be a perfect fit for the given WEBSITE URL and SCRAPED WEBSITE TEXT
    4. It should be a tool that can be offered for free on the website
    4. The tool should act well as link bait (specifically crafted with the goal of attracting or encouraging others to link to that content)
 
    % FORMAT INSTRUCTIONS
 
    {formatInstructions}
 
    % WEBSITE URL:
 
    {websiteUrl}
 
    % SCRAPED WEBSITE TEXT:
 
    {textBody}
 
    % GENRERATED IDEAS (REMEMBER TO FOLLOW THE FORM INSTRUCTIONS ABOVE):
    `
const systemMessagePrompt = SystemMessagePromptTemplate.fromTemplate(systemMessageTemplate)
const chatPrompt = ChatPromptTemplate.fromPromptMessages([systemMessagePrompt])
 
const chatPromptFormatted = await chatPrompt.formatPromptValue({
  websiteUrl: url,
  textBody: prompt,
  formatInstructions: formatInstructions,
})
 
const messages = chatPromptFormatted.toChatMessages()
 
llm
  .call(messages)
  .catch(console.error)
  .finally(() => {
    // Call handleStreamEnd when the chat or stream ends
    handlers.handleChainEnd()
  })
 
return new StreamingTextResponse(stream)

const {
  completion: completionIdeas,
  complete: completeIdeas,
  error: errorIdeas,
  isLoading: isLoadingIdeas,
} = useCompletion({
  api: '/api/free-seo-tools/link-bait-software-tools-generator',
  body: {
    url: form.watch('url'),
  },
  onResponse: (res) => {
    if (res.status === 429) {
      toast.error('You are being rate limited. Please try again later.')
    }
    // toast.loading('Generating summary...')
  },
  onFinish: (prompt, completion) => {
    toast.success(`Successfully generated ideas for ${form.watch('url')}.`)
  },
 
  onError: (err) => {
    toast.error(`Error occurred: ${err.message}`)
  },
})

  async function onSubmit(formData: z.infer<typeof FormSchema>) {
    const scrapeWebsitePromise = scrapeWebsite(formData)
 
    const scrapedWebsiteData = await toast.promise(scrapeWebsitePromise, {
      success: (data) => {
        const { bodyText, ...rest } = data
        return 'Succesfully scraped website!'
      },
      error: (err) => err.message,
      loading: `Scraping content from ${formData.url}...`,
    })
 
    const websiteSummaryLoadingToastId = toast.loading(`Generating summary for ${formData.url}...`)
 
    const websiteSummary = await completeSummary(scrapedWebsiteData.bodyText).catch(() =>
      toast.dismiss(websiteSummaryLoadingToastId),
    )
 
    toast.dismiss(websiteSummaryLoadingToastId)
 
    if (!websiteSummary) {
      toast.error('Error occurred while generating summary.')
      return
    }
 
    const ideasLoadingToastId = toast.loading(`Generating ideas for ${formData.url}...`)
 
    const ideas = await completeIdeas(websiteSummary).catch(() =>
      toast.dismiss(ideasLoadingToastId),
    )
 
    toast.dismiss(ideasLoadingToastId)
 
    console.log('All done!')
  }

  const buffer = useBuffer(completionIdeas)
  const ideas = useUniqueJsonObjects(buffer) as TToolOutput

// useBuffer.ts
import { useState, useEffect } from 'react'
 
const useBuffer = (chunk: string): string => {
    const [buffer, setBuffer] = useState('')
 
    useEffect(() => {
        let updatedChunk = chunk
            .replace('```json', '')
            .replace('```', '')
            .replace(/\n/g, ' ')
            .replace(/^\[/, '')
            .replace(/\]$/, '')
            .trim()
 
        setBuffer(updatedChunk)
    }, [chunk])
 
    return buffer
}
 
export default useBuffer

// useUniqueJsonObjects.ts
import { useState, useEffect, useCallback } from 'react'
 
const useUniqueJsonObjects = (buffer: string): object[] => {
    const [objects, setObjects] = useState<object[]>([])
 
    const addObject = useCallback((object: object) => {
        setObjects((prevObjects) => {
            const objectExists = prevObjects.some(
                (prevObject) => JSON.stringify(prevObject) === JSON.stringify(object),
            )
 
            return objectExists ? prevObjects : [...prevObjects, object]
        })
    }, [])
 
    useEffect(() => {
        let newBuffer = buffer
        let match
        while ((match = newBuffer.match(/(\{[^{}]*?\})(?=,|$)/))) {
            const jsonStr = match[0]
 
            try {
                const data = JSON.parse(jsonStr) // Try to parse the JSON
                addObject(data)
                newBuffer = newBuffer.slice(jsonStr.length).replace(/^,/, '').trim() // Remove leading comma and trailing whitespaces
            } catch (e) {
                break
            }
        }
    }, [buffer, addObject])
 
    return objects
}
 
export default useUniqueJsonObjects