demo: use createTransportHooks for type-safe hook access

Both demos now call `createTransportHooks<TEvent, TMessage>()` in their
`providers.tsx` and destructure `TransportProvider` and all hooks from
the returned object, rather than importing them directly from
`@ably/ai-transport/react`. This threads the codec generics through the
hook layer so hook calls don't need explicit type annotations at the
call site.

Author: ttypic

demo/vercel/react/use-chat/src/app/chat.tsx

@@ -1,22 +1,23 @@
 'use client';
 
 import { useChat } from '@ai-sdk/react';
-import type * as AI from 'ai';
-import { useClientTransport, useActiveTurns, useView, useAblyMessages } from '@ably/ai-transport/react';
 import { useChatTransport, useMessageSync } from '@ably/ai-transport/vercel/react';
 import { useState, useEffect, useCallback } from 'react';
 import { MessageList } from './components/message-list';
 import { DebugPane } from './components/debug-pane';
 import type { CallbackLogEntry } from './components/debug-pane';
 import { useClientTools } from './hooks/use-client-tools';
+import { TransportHooks } from './providers';
+
+const { useClientTransport, useActiveTurns, useView, useAblyMessages } = TransportHooks;
 
 // ---------------------------------------------------------------------------
 // Chat component
 // ---------------------------------------------------------------------------
 
 export function Chat({ chatId, clientId, historyLimit }: { chatId: string; clientId?: string; historyLimit?: number }) {
   // Transport is created by TransportProvider in page.tsx
-  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>({ channelName: chatId });
+  const transport = useClientTransport();
   const chatTransport = useChatTransport(transport);
 
   // -- Callback & status logging for debug pane ----------------------------
@@ -67,15 +68,15 @@ export function Chat({ chatId, clientId, historyLimit }: { chatId: string; clien
     setStatusLog((prev) => [...prev, { time: Date.now(), status }]);
   }, [status]);
 
-  const activeTurns = useActiveTurns({ transport });
+  const activeTurns = useActiveTurns();
   const hasAnyTurns = activeTurns.size > 0;
 
   // Auto-loads first page on mount
-  const { nodes, hasOlder, loading, loadOlder } = useView({ transport, limit: historyLimit ?? 30 });
+  const { nodes, hasOlder, loading, loadOlder } = useView({ limit: historyLimit ?? 30 });
 
   useClientTools(chatMessages, addToolResult, nodes, clientId);
 
-  const ablyMessages = useAblyMessages({ transport });
+  const ablyMessages = useAblyMessages();
 
   return (
     <div className="flex h-dvh">

demo/vercel/react/use-chat/src/app/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Providers, useAblyReady } from './providers';
-import { TransportProvider } from '@ably/ai-transport/react';
+import { Providers, useAblyReady, TransportHooks } from './providers';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 import { Chat } from './chat';
 import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
 
+const { TransportProvider } = TransportHooks;
+
 const DEFAULT_CHANNEL = process.env.NEXT_PUBLIC_ABLY_CHANNEL ?? 'ai:demo';
 
 function ChatWhenReady({ channelName, clientId, limit }: { channelName: string; clientId?: string; limit?: number }) {

demo/vercel/react/use-chat/src/app/providers.tsx

@@ -3,6 +3,10 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider } from 'ably/react';
+import { createTransportHooks } from '@ably/ai-transport/react';
+import type * as AI from 'ai';
+
+export const TransportHooks = createTransportHooks<AI.UIMessageChunk, AI.UIMessage>();
 
 const AblyReadyContext = createContext(false);
 

demo/vercel/react/use-client-transport/src/app/components/chat.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import type * as AI from 'ai';
-import { useClientTransport, useCreateView, useActiveTurns, useView, useAblyMessages } from '@ably/ai-transport/react';
 
 import { userMessage } from '../helpers';
 import { useClientTools } from '../hooks/use-client-tools';
@@ -13,6 +11,9 @@ import { MessageQueue } from './message-queue';
 import { InputBar } from './input-bar';
 import { DebugPane } from './debug-pane';
 import { ChatPane } from './chat-pane';
+import { TransportHooks } from '../providers';
+
+const { useClientTransport, useCreateView, useActiveTurns, useView, useAblyMessages } = TransportHooks;
 
 export interface ToolApproval {
   toolCallId: string;
@@ -28,19 +29,19 @@ interface ChatProps {
   historyLimit?: number;
 }
 
-export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
+export function Chat({ clientId, historyLimit }: ChatProps) {
   // Transport is created by TransportProvider in page.tsx
-  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>({ channelName: chatId });
+  const transport = useClientTransport();
   const [split, setSplit] = useState(false);
 
   const limit = historyLimit ?? 30;
-  const view = useView({ transport, limit });
-  const splitView = useCreateView({ transport, limit, skip: !split });
+  const view = useView({ limit });
+  const splitView = useCreateView({ limit, skip: !split });
 
   useClientTools(view, clientId);
 
-  const activeTurns = useActiveTurns({ transport });
-  const ablyMessages = useAblyMessages({ transport });
+  const activeTurns = useActiveTurns();
+  const ablyMessages = useAblyMessages();
   const queue = useMessageQueue(transport, view.send);
 
   const handleToolApproved = useCallback(

demo/vercel/react/use-client-transport/src/app/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Providers, useAblyReady } from './providers';
-import { TransportProvider } from '@ably/ai-transport/react';
+import { Providers, useAblyReady, TransportHooks } from './providers';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 import { Chat } from './components/chat';
 import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
 
+const { TransportProvider } = TransportHooks;
+
 const DEFAULT_CHANNEL = process.env.NEXT_PUBLIC_ABLY_CHANNEL ?? 'ai:demo';
 
 function ChatWhenReady({ channelName, clientId, limit }: { channelName: string; clientId?: string; limit?: number }) {

demo/vercel/react/use-client-transport/src/app/providers.tsx

@@ -3,6 +3,10 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider } from 'ably/react';
+import { createTransportHooks } from '@ably/ai-transport/react';
+import type * as AI from 'ai';
+
+export const TransportHooks = createTransportHooks<AI.UIMessageChunk, AI.UIMessage>();
 
 const AblyReadyContext = createContext(false);