[websockets/fastapi-ai-chat] switch to use latest services (#1512)

### Description

Updates to use the latest `services` schema, as well as README fixes.

Depends on vercel/vercel#16757

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] New Example
- [x] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

Author: fantix

websockets/fastapi-ai-chat/README.md

@@ -1,13 +1,12 @@
 # FastAPI AI Chat with WebSocket
 
-A real-time AI chat application using **Next.js** (frontend), **FastAPI** (backend), **WebSocket** for streaming, and the [Python AI SDK](https://github.com/vercel-labs/ai-python) for LLM integration. Deployed on Vercel using [experimental services](https://vercel.com/docs/functions/experimental-services).
+A real-time AI chat application using **Next.js** (frontend), **FastAPI** (backend), **WebSocket** for streaming, and the [Python AI SDK](https://github.com/vercel-labs/ai-python) for LLM integration. Deployed on Vercel using [Services](https://vercel.com/docs/services).
 
 ## How It Works
 
 - The **frontend** is a Next.js single-page app with a chat UI that connects to the backend via WebSocket.
 - The **backend** is a FastAPI server that accepts WebSocket connections, streams LLM responses using the Python AI SDK, and sends text deltas back to the client in real time.
-- On Vercel, the frontend and backend run as separate services routed by path prefix (`/` and `/svc/api`).
-- Python ASGI apps handle WebSocket upgrades natively on Vercel — no `experimental_upgradeWebSocket` workaround needed.
+- On Vercel, the frontend and backend run as separate services routed by path prefix (`/` and `/api`).
 
 ## How to Use
 

websockets/fastapi-ai-chat/backend/main.py

@@ -1,8 +1,6 @@
 import os
 
-import fastapi
-
-import ai
+import ai, fastapi
 
 app = fastapi.FastAPI()
 
@@ -15,13 +13,15 @@
     "system": ai.system_message,
 }
 
+api = fastapi.APIRouter(prefix="/api")
+
 
-@app.get("/")
+@api.get("/")
 async def health():
     return {"status": "ok"}
 
 
-@app.websocket("/ws")
+@api.websocket("/ws")
 async def websocket_endpoint(websocket: fastapi.WebSocket):
     await websocket.accept()
     try:
@@ -47,3 +47,5 @@ async def websocket_endpoint(websocket: fastapi.WebSocket):
                     )
     except fastapi.WebSocketDisconnect:
         pass
+
+app.include_router(api)

websockets/fastapi-ai-chat/frontend/app/page.js

@@ -2,8 +2,6 @@
 
 import { useState, useEffect, useRef } from "react";
 
-const BACKEND = process.env.NEXT_PUBLIC_BACKEND_URL || "/svc/api";
-
 export default function Chat() {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
@@ -25,7 +23,7 @@ export default function Chat() {
       if (cancelled) return;
 
       const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-      const wsUrl = `${protocol}//${window.location.host}${BACKEND}/ws`;
+      const wsUrl = `${protocol}//${window.location.host}/api/ws`;
 
       setStatus("connecting");
       const ws = new WebSocket(wsUrl);

websockets/fastapi-ai-chat/vercel.json

@@ -1,14 +1,28 @@
 {
-  "experimentalServices": {
+  "rewrites": [
+    {
+      "source": "/api/:path*",
+      "destination": {
+        "type": "service",
+        "service": "backend"
+      }
+    },
+    {
+      "source": "/(.*)",
+      "destination": {
+        "type": "service",
+        "service": "frontend"
+      }
+    }
+  ],
+  "services": {
     "frontend": {
-      "framework": "nextjs",
-      "entrypoint": "frontend",
-      "routePrefix": "/"
+      "root": "frontend",
+      "framework": "nextjs"
     },
     "backend": {
-      "framework": "fastapi",
-      "entrypoint": "backend/main.py",
-      "routePrefix": "/svc/api"
+      "root": "backend",
+      "framework": "fastapi"
     }
   }
 }