[Graphite MQ] Draft PR GROUP:spec_1ef982 (PRs 1392, 1393)

examples/ai-agent/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/ai-agent/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Message, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 export function App() {
 	const aiAgent = useActor({
@@ -77,4 +76,4 @@ export function App() {
 			</div>
 		</div>
 	);
-}
+}

examples/better-auth-external-db/src/backend/server.ts

@@ -6,7 +6,12 @@ import { auth } from "./auth";
 import { registry } from "./registry";
 
 // Start RivetKit
-registry.start();
+registry.start({
+	cors: {
+		origin: "http://localhost:5173",
+		credentials: true,
+	},
+});
 
 // Setup router
 const app = new Hono();

examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx

@@ -1,11 +1,9 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { registry } from "../../backend/registry";
 import { authClient } from "../auth-client";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 interface ChatRoomProps {
 	user: { id: string; email: string };

examples/chat-room/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Message, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:6420");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export function App() {
 	const [roomId, setRoomId] = useState("general");

examples/crdt/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/crdt/src/frontend/App.tsx

@@ -1,11 +1,10 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useRef, useState } from "react";
 import * as Y from "yjs";
 import { applyUpdate, encodeStateAsUpdate } from "yjs";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 function YjsEditor({ documentId }: { documentId: string }) {
 	const yjsDocument = useActor({
@@ -192,4 +191,4 @@ function bufferToBase64(buffer: Uint8Array): string {
 		binary += String.fromCharCode(buffer[i]);
 	}
 	return btoa(binary);
-}
+}

examples/database/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/database/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Note, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 function NotesApp({ userId }: { userId: string }) {
 	const [notes, setNotes] = useState<Note[]>([]);
@@ -199,4 +198,4 @@ export function App() {
 			<NotesApp key={selectedUser} userId={selectedUser} />
 		</div>
 	);
-}
+}

examples/freestyle/src/frontend/App.tsx

@@ -1,13 +1,12 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Message, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>({
+const { useActor } = createRivetKit<typeof registry>({
 	endpoint: import.meta.env.VITE_RIVET_ENDPOINT ?? "http://localhost:8080/api",
 	namespace: import.meta.env.VITE_RIVET_NAMESPACE,
 	runnerName: import.meta.env.VITE_RIVET_RUNNER_NAME ?? "freestyle-runner",
 });
-const { useActor } = createRivetKit(client);
 
 export function App() {
 	const [roomId, setRoomId] = useState("general");

examples/game/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/game/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useRef, useState } from "react";
 import type { Player, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 export function App() {
 	const [players, setPlayers] = useState<Player[]>([]);
@@ -200,4 +199,4 @@ export function App() {
 			</div>
 		</div>
 	);
-}
+}

examples/hono-bun/src/backend/server.ts

@@ -13,6 +13,7 @@ const { client, fetch } = registry.start({
 	getUpgradeWebSocket: () => upgradeWebSocket,
 	cors: {
 		origin: "http://localhost:5173",
+		credentials: true,
 	},
 });
 

examples/hono-bun/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080/rivet");
-const { useActor } = createRivetKit<typeof registry>(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080/rivet");
 
 function App() {
 	const [count, setCount] = useState(0);

examples/hono-react/src/backend/server.ts

@@ -5,6 +5,7 @@ import { registry } from "./registry";
 const { client } = registry.start({
 	cors: {
 		origin: "http://localhost:5173",
+		credentials: true,
 	},
 });
 

examples/hono-react/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit<typeof registry>(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 function App() {
 	const [count, setCount] = useState(0);

examples/next-js/src/components/Counter.tsx

@@ -1,8 +1,14 @@
 "use client";
+
+import { createRivetKit } from "@rivetkit/next-js/client";
+import type { registry } from "@/rivet/registry";
 import { useState } from "react";
-import { useActor } from "@/lib/rivet-client";
 import styles from "./Counter.module.css";
 
+export const { useActor } = createRivetKit<typeof registry>(
+	process.env.NEXT_RIVET_ENDPOINT ?? "http://localhost:3000/api/rivet",
+);
+
 export function Counter() {
 	const [count, setCount] = useState(0);
 	const [counterName, setCounterName] = useState("test-counter");

examples/rate/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/rate/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { RateLimitResult, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 function RateLimiterDemo({ userId }: { userId: string }) {
 	const [result, setResult] = useState<RateLimitResult | null>(null);
@@ -147,4 +146,4 @@ export function App() {
 			</div>
 		</div>
 	);
-}
+}

examples/raw-fetch-handler/src/backend/server.ts

@@ -4,14 +4,20 @@ import { cors } from "hono/cors";
 import { registry } from "./registry";
 
 // Start RivetKit
-const { client } = registry.start();
+const { client } = registry.start({
+	cors: {
+		origin: "http://localhost:5173",
+		credentials: true,
+	},
+});
 
 // Setup router
 const app = new Hono();
 
 app.use(
 	cors({
 		origin: "http://localhost:5173",
+		credentials: true,
 	}),
 );
 

examples/raw-websocket-handler-proxy/src/backend/server.ts

@@ -3,7 +3,12 @@ import { createNodeWebSocket } from "@hono/node-ws";
 import { Hono } from "hono";
 import { registry } from "./registry.js";
 
-const { client } = registry.start();
+const { client } = registry.start({
+	cors: {
+		origin: "http://localhost:5173",
+		credentials: true,
+	},
+});
 
 const app = new Hono();
 const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });

examples/raw-websocket-handler/src/frontend/App.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef } from "react";
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>();
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 export default function App() {
 	const [messages, setMessages] = useState<Array<{ id: string; text: string; timestamp: number }>>([]);

examples/react/src/backend/server.ts

@@ -3,5 +3,6 @@ import { registry } from "./registry";
 registry.start({
 	cors: {
 		origin: "http://localhost:5173",
+		credentials: true,
 	},
 });

examples/react/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>();
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 function App() {
 	const [count, setCount] = useState(0);

examples/stream/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/stream/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 export function App() {
 	const [topValues, setTopValues] = useState<number[]>([]);
@@ -179,4 +178,4 @@ export function App() {
 			</div>
 		</div>
 	);
-}
+}

examples/sync/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });

examples/sync/src/frontend/App.tsx

@@ -1,9 +1,8 @@
-import { createClient, createRivetKit } from "@rivetkit/react";
+import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useRef, useState } from "react";
 import type { Contact, registry } from "../backend/registry";
 
-const client = createClient<typeof registry>("http://localhost:8080");
-const { useActor } = createRivetKit(client);
+const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
 
 export function App() {
 	const [contacts, setContacts] = useState<Contact[]>([]);
@@ -342,4 +341,4 @@ export function App() {
 			</div>
 		</div>
 	);
-}
+}

examples/tenant/src/backend/server.ts

@@ -2,6 +2,7 @@ import { registry } from "./registry";
 
 registry.start({
 	cors: {
-		origin: "http://localhost:5173",
+		origin: "http://localhost:3000",
+		credentials: true,
 	},
 });