feat: use vercel api gateway

Author: Yukaii

examples/ai-conference-assistant/package-lock.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@hackmd/api": "file:../../nodejs",
-    "@ai-sdk/openai": "^3.0.48",
     "@ai-sdk/react": "^3.0.140",
     "ai": "^6.0.138",
     "next": "16.2.1",

examples/ai-conference-assistant/package.json

@@ -6,8 +6,7 @@
  * Note creation is handled separately via /api/create-notes.
  */
 
-import { streamText, stepCountIs, type ModelMessage } from 'ai'
-import { createOpenAI } from '@ai-sdk/openai'
+import { convertToModelMessages, createGateway, streamText, stepCountIs, type UIMessage } from 'ai'
 import { createTools } from '@/lib/tools'
 
 export const maxDuration = 60
@@ -24,12 +23,15 @@ You have tools to:
 
 ## Workflow
 1. First, if the user hasn't verified their setup, call hackmd_get_me to check credentials
-2. Ask about: conference name, team path, session data (user uploads JSON)
+2. Ask about conference name and preferences. **Only** if there is no \`<session_data>\` block in your instructions for this request, ask them to upload session JSON in the UI. If \`<session_data>\` is present, session data is already loaded — do not ask for upload or paste.
 3. Use jq_query to analyze the session data shape and summarize it for the user
 4. If user mentions a reference note, fetch it with hackmd_get_note
 5. Use generate_pages to create all pages, show preview
 6. User confirms → they click "Create Notes" button in the UI
 
+## When session data is already provided
+If this request includes an \`<session_data>\` section below, the user has already uploaded sessions in the app. **Do not** ask them to upload or paste JSON again. Start with jq_query or answer their question using that data.
+
 ## Important Notes
 - Always use jq_query first to understand data shape before generating pages — this saves tokens
 - When showing previews, show the homepage and 1-2 sample session pages
@@ -55,13 +57,15 @@ But you should use jq_query to discover the actual shape of uploaded data and ad
 
 export async function POST(req: Request) {
   const body = await req.json()
-  const { messages, config } = body as {
-    messages: ModelMessage[]
+  const { messages, config, sessionDataJson } = body as {
+    messages: UIMessage[]
     config: {
       apiKey: string
       apiEndpoint: string
       teamPath: string
     }
+    /** Raw session JSON; sent out-of-band so the chat UI does not embed huge payloads. */
+    sessionDataJson?: string
   }
 
   if (!config?.apiKey) {
@@ -85,16 +89,29 @@ export async function POST(req: Request) {
   }
 
   const tools = createTools(config.apiKey, config.apiEndpoint)
+  const uiMessages = Array.isArray(messages) ? messages : []
+  const modelMessages = await convertToModelMessages(uiMessages, { tools })
+
+  let system = SYSTEM_PROMPT
+  if (sessionDataJson?.trim()) {
+    try {
+      const parsed = JSON.parse(sessionDataJson) as unknown
+      const n = Array.isArray(parsed) ? parsed.length : 0
+      system += `\n\n## Uploaded session data (${n} sessions) — attached by the app on every request while a file is loaded\n**You must not ask the user to upload or paste session JSON** — it is already in \`<session_data>\`. Use jq_query on this JSON. Use generate_pages with sessionsJson from this data when generating pages.\n\n<session_data>\n${sessionDataJson}\n</session_data>`
+    } catch {
+      system += `\n\n## Uploaded session data — attached by the app; do not ask for upload/paste\n<session_data>\n${sessionDataJson}\n</session_data>`
+    }
+  }
 
-  const openai = createOpenAI({
+  const gateway = createGateway({
     apiKey: aiGatewayApiKey,
     ...(process.env.AI_GATEWAY_BASE_URL && { baseURL: process.env.AI_GATEWAY_BASE_URL }),
   })
 
   const result = streamText({
-    model: openai('gpt-4o'),
-    system: SYSTEM_PROMPT,
-    messages,
+    model: gateway('openai/gpt-5.4-mini'),
+    system,
+    messages: modelMessages,
     tools,
     stopWhen: stepCountIs(10),
   })

examples/ai-conference-assistant/src/app/api/chat/route.ts

@@ -2,20 +2,17 @@
 
 import { useChat } from '@ai-sdk/react'
 import { TextStreamChatTransport } from 'ai'
-import { useState, useRef, useEffect, type MutableRefObject, type FormEvent } from 'react'
+import {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  type MutableRefObject,
+  type FormEvent,
+  type KeyboardEvent,
+} from 'react'
 import type { AppConfig, GeneratedData } from '@/app/page'
 
-function safeSessionArrayLength(json: string): number {
-  const t = json.trim()
-  if (!t) return 0
-  try {
-    const parsed = JSON.parse(t) as unknown
-    return Array.isArray(parsed) ? parsed.length : 0
-  } catch {
-    return 0
-  }
-}
-
 interface ChatPanelProps {
   config: AppConfig
   sessionData: MutableRefObject<string>
@@ -38,22 +35,47 @@ export function ChatPanel({
   const [fileUploaded, setFileUploaded] = useState(false)
   /** Set when a file parses successfully; avoids JSON.parse on ref before parent syncs sessionDataRef. */
   const [uploadedSessionCount, setUploadedSessionCount] = useState<number | null>(null)
-  const [sessionDataSent, setSessionDataSent] = useState(false)
   const [inputValue, setInputValue] = useState('')
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  /** Same JSON as parent ref, set synchronously on file read so the first send cannot race useEffect. */
+  const localSessionJsonRef = useRef('')
+  const fileUploadedRef = useRef(false)
+  useEffect(() => {
+    fileUploadedRef.current = fileUploaded
+  }, [fileUploaded])
 
-  const { messages, sendMessage, status, error } = useChat({
-    transport: new TextStreamChatTransport({
-      api: '/api/chat',
-      body: {
-        config: {
-          apiKey: config.apiKey,
-          apiEndpoint: config.apiEndpoint,
-          teamPath: config.teamPath,
+  const transport = useMemo(
+    () =>
+      new TextStreamChatTransport({
+        api: '/api/chat',
+        body: {
+          config: {
+            apiKey: config.apiKey,
+            apiEndpoint: config.apiEndpoint,
+            teamPath: config.teamPath,
+          },
         },
-      },
-    }),
+        prepareSendMessagesRequest: ({ body, messages }) => {
+          // `body` is only the static `config` from transport init; `messages` is passed separately and must be merged in.
+          const merged: Record<string, unknown> = {
+            ...(body as Record<string, unknown>),
+            messages,
+          }
+          const json =
+            localSessionJsonRef.current.trim() || sessionData.current.trim()
+          // Include on every send while a file is loaded so the model keeps <session_data> in context.
+          if (fileUploadedRef.current && json) {
+            merged.sessionDataJson = json
+          }
+          return { body: merged }
+        },
+      }),
+    [config.apiKey, config.apiEndpoint, config.teamPath],
+  )
+
+  const { messages, sendMessage, status, error } = useChat({
+    transport,
   })
 
   const isLoading = status === 'submitted' || status === 'streaming'
@@ -73,6 +95,7 @@ export function ChatPanel({
       try {
         const parsed = JSON.parse(text) as unknown
         const count = Array.isArray(parsed) ? parsed.length : 0
+        localSessionJsonRef.current = text
         onSessionDataChange(text)
         setUploadedSessionCount(count)
         setFileUploaded(true)
@@ -83,26 +106,22 @@ export function ChatPanel({
     reader.readAsText(file)
   }
 
+  function sendCurrentMessage() {
+    if (!inputValue.trim() || isLoading) return
+    void sendMessage({ text: inputValue })
+    setInputValue('')
+  }
+
   function onSubmit(e: FormEvent) {
     e.preventDefault()
-    if (!inputValue.trim() || isLoading) return
+    sendCurrentMessage()
+  }
 
-    // If session data is available and hasn't been sent yet, include it
-    let text = inputValue
-    if (
-      fileUploaded &&
-      sessionData.current.trim() &&
-      !sessionDataSent
-    ) {
-      const count =
-        uploadedSessionCount ??
-        safeSessionArrayLength(sessionData.current)
-      text = `${inputValue}\n\n[Session data uploaded - ${count} sessions]\n<session_data>\n${sessionData.current}\n</session_data>`
-      setSessionDataSent(true)
+  function onComposerKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault()
+      sendCurrentMessage()
     }
-
-    sendMessage({ text })
-    setInputValue('')
   }
 
   return (
@@ -270,7 +289,7 @@ export function ChatPanel({
 
       {/* Input area */}
       <div className="px-6 py-4 bg-white border-t border-gray-200">
-        <form onSubmit={onSubmit} className="flex gap-3">
+        <form onSubmit={onSubmit} className="flex gap-3 items-end">
           <input
             ref={fileInputRef}
             type="file"
@@ -281,26 +300,27 @@ export function ChatPanel({
           <button
             type="button"
             onClick={() => fileInputRef.current?.click()}
-            className="px-3 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition text-gray-600"
+            className="px-3 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 transition text-gray-600 shrink-0 self-end"
             title="Upload sessions JSON"
           >
             📁
           </button>
-          <input
-            type="text"
+          <textarea
             value={inputValue}
             onChange={e => setInputValue(e.target.value)}
+            onKeyDown={onComposerKeyDown}
+            rows={3}
             placeholder={
               fileUploaded
-                ? 'Tell me about your conference...'
-                : 'Upload session data first, or ask me anything...'
+                ? 'Message… (Shift+Enter for new line, Enter to send)'
+                : 'Upload session data or ask anything… (Shift+Enter for new line)'
             }
-            className="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition text-gray-900"
+            className="flex-1 min-h-[2.75rem] max-h-40 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition text-gray-900 resize-y"
           />
           <button
             type="submit"
             disabled={isLoading || !inputValue.trim()}
-            className="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
+            className="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition shrink-0"
           >
             Send
           </button>