Build Week #1, Day 4:
Build long-running OpenAI experiences

Vercel x OpenAI x Defer: beyond streaming

Vercel is the easiest and fastest way to ship LLM experiences. Vercel AI comes with a set of handful helpers to rapidly scaffold chat and completion-based experiences:

1'use client';2
3import { useChat } from 'ai/react';4
5export default function MyComponent() {6  const { messages, input, handleInputChange, handleSubmit } = useChat();7
8  return (9    // ...10  );11}12

Vercel recommends leveraging OpenAI Streaming transport to overcome Serverless timeout limitations. While this pattern is a perfect fit for experiences based on direct prompting, it comes short when fetching and preprocessing of data is necessary.

Today's Build Week example showcases a GitHub Profile Generator application that combines user input and its GitHub data to prompt OpenAI, leveraging Defer's @defer/client/next integration:

1"use client";2import { useDeferRoute } from "@defer/client/next";3import generateGitHubProfile from "@/defer/generateGitHubProfile";4
5export default function Index() {6  // trigger our Defer function from our Client Component7  const [generate, { loading, result }] =8    useDeferRoute<typeof generateGitHubProfile>("/api/githubProfile");9
10    // ...11
12    return (13        /* ... */14    )15}16

Learn more about @defer/client/next helpers in our ready-to-deploy to Vercel demo, available on GitHub.