Vercel AI SDK without NextJS?

[LeonHecht]

I am building a RAG chat using openai API. This is my first "bigger" web side-projectI. started off with React/Vite and FastAPI. For search I use OpenSearch on docker. But still rn everything runs locally on my laptop.

Right now, the "agentic" Chat is already roughly behaving as I want it too (I optimized system prompt, implemented the tools, etc. in python FastAPI, no agentic framework like LangGraph etc.). So I was already quite happy with the backend chat-wise.

Frontend-wise it is very simplistic: just chat messages rendered and input textbox plus send button. All pure React components. So I was starting to think about: How am I gonna do streaming? How am I gonna handle chat history of several chats? How am I gonna do stuff lime pretty Citations and Mic-button with voice-to-text, Colapsable real-time reasoning hints, etc.? And all of a sudden I felt like: Wow this will be so much work if I want to implement that from scratch, there must be some library already that implements all that.

So I found Vercel AI SDK and AI Elements. But it is made to work with NextJS from what I read. ChatGPT says, I can just reuse their components in the frontend, but don't bother with NextJS and don't have to re-write my entire backend. But for me it's hard to tell if that's a good decision in the long run. In the long run, I do want this to be a "production-grade" app with like up to 50 users. I know, a little advantageous having little experience in Webdev haha.

What do you guys think? Should I stay with Vite and just "steal" the components from Vercel AI SDK and the useChat or move completely to NextJS? How much work would you guess it would be and how much of my backend would I have to re-write? Or is there any other library that would suit well in my case?

Thanks a lot in advance!

[euMts]

Stick with React/Vite + FastAPI. Don’t rewrite for Next just to use Vercel AI SDK.

• AI Elements are just web components, drop them into Vite.
• useChat/client bits work fine if you point them at your FastAPI stream; worst case, copy/tweak the hook.

What to add now:

• SSE from FastAPI for streaming (EventSource or fetch ReadableStream in React).
• Simple threads table for history (user_id, thread_id, role, content, created_at).
• Return citations as ids/spans; render with react-markdown + a tooltip/accordion.
• Mic: start with Web Speech API; upgrade to Whisper later.
• UI: shadcn/ui or Mantine for collapsible, skeleton, etc.

Move to Next.js only if you need SSR/marketing pages, Auth.js, uploads, edge caching. Your Python backend stays the same either way.

[LeonHecht]

Thanks a lot!

[Denoroy737]

Hi @LeonHecht,

If your FastAPI backend is already solid, I’d suggest sticking with React + Vite for now instead of migrating to Next.js immediately. The Vercel AI SDK is great, but its main advantage comes from tight integration with Next.js server routes — something you don’t necessarily need since you already have FastAPI handling that layer.

You can absolutely reuse their frontend components and logic (like useChat() or UI elements) and just point them to your FastAPI endpoints. It might take a bit of adaptation, but it’s much easier than rewriting your backend.

For streaming, you can implement Server-Sent Events (SSE) or WebSockets in FastAPI — both integrate nicely with React. For chat history, citations, and voice input, you can build lightweight custom React components or use libraries like:

• react-speech-recognition for mic input,
• react-markdown for citations and formatted messages,
• idb or localforage for local chat history caching.

Once your app scales beyond local use (say 50+ users), you can always migrate the frontend to Next.js later — mainly for server-side rendering and built-in Vercel SDK compatibility. But for now, keeping your current stack will save time and complexity while letting you focus on improving the core experience.

[LeonHecht]

Okay, thank you for you detailed response!🙏

[sattarrasouli]

Hello,
I think if your project doesn't get large enough yet, you should switch to nextjs.
because maintenance is much easier, almost every new feature and useful tools introduced by vercel team(the creator of nextjs).
in using some packages you may have conflict or need community support which nextjs community is enormous i'm sure you get your answer soon.
Nextjs provide ssr,ssg,isr and turbopack and biome these features give us a good dx and actually good ux.
Almost every week i see a new update from nextjs team, they are working hard to be on the edge of development techs.

and here you can check my two repo i create a mcp using nextjs both server and client side handled:
https://github.com/sattarrasouli/MCP-Next.js.git