When building full-stack applications, we often get boxed into choosing a platform early. But what happens when your native mobile app needs a desktop-grade web version with a multi-pane layout, real-time streaming, and zero friction?
For my project, LLM Council, I decided to bridge that gap entirely. Here is the breakdown of how I migrated our native architecture to a high-performance web client.
The Architecture Setup
The goal was simple: support our iOS/Android mobile builds while building a completely detached, premium desktop web app from the exact same codebase.
- Frontend: Expo Web (React Native for Web) + NativeWind (Tailwind CSS)
- State Management: Zustand (Local caching, bypassing heavy sync networks for guest modes)
- Backend: Python / FastAPI hosted on Render
- Hosting: Vercel (Edge network optimization)
3 Technical Hurdles We Overcame
1. Bypassing CORS with a Server-to-Server Proxy
Browsers enforce strict Cross-Origin Resource Sharing (CORS) rules when talking directly to third-party AI APIs like OpenRouter. To solve this, we routed our frontend requests straight to our FastAPI backend. Because Python servers don't face browser CORS restrictions, our backend handles the secure API calls seamlessly.
2. Live Streams via Server-Sent Events (SSE)
To get that ultra-smooth, ChatGPT-style typing animation on the web, we bypassed heavy database listeners and went straight to the native browser ReadableStream API. We parse the incoming raw binary text streams chunk-by-chunk and surgically dispatch updates to our Zustand store to animate the different stages of the AI debate.
3. Fighting the Vercel "White Screen of Death"
Deploying an Expo Router app on a static platform like Vercel usually results in MIME-type panics or routing issues if you refresh a subpage (like /chat/123). Dropping a custom vercel.json rewrite configuration into our directory fixed the single-page routing loop permanently:
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
We Are Officially Live! 🚀
The desktop client is officially up, running, and streaming context seamlessly on Vercel's global edge network.
Check out the live announcement and see the final UI breakdown here:
https://x.com/JimmyFalco65924/status/2061129219049181598?s=20
Have you ever migrated an Expo app to the web? What was your biggest layout or deployment hurdle? Let's discuss below!
Top comments (2)
A 3-pane desktop layout for an AI interface is a smart UX call, because agent interactions don't fit the single-column chat mold, you usually need three things visible at once: the conversation, the work the agent is doing (tool calls, files, reasoning), and the artifact or state it's producing. Cramming all that into one chat stream is exactly why so many agent UIs feel like a black box, and a multi-pane layout is how you make the agent legible, which is the foundation of trust. The pane I'd treat as most important is the middle one, the show-the-work view, because the difference between an agent users trust and one they don't is whether they can see what it's doing instead of staring at a spinner that hides ten minutes of autonomous activity. The pattern that's worked for me there is making each action glanceable but expandable, calm by default, full detail on demand, so the pane is informative without being noise. The Expo-web-plus-FastAPI choice is pragmatic too, reusing the mobile codebase for desktop is the kind of leverage that lets a small team ship a richer surface. Give the agent's work its own pane, and make actions inspectable. That make-the-agent-legible instinct is core to how I think about agent UX in Moonshift. In the middle pane, are you streaming the agent's tool calls/steps live, or summarizing them after each turn?
Yeah that a very fine insight UI view which one can learn from. Thanks for sharing insightful learning