AI

import { chat, toServerSentEventsResponse } from '@tanstack/ai'

import { openRouterText } from '@tanstack/ai-openrouter'

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/api/chat')({

server: {

handlers: {

POST: async ({ request }) => {

const { messages } = await request.json()

const stream = chat({

adapter: openRouterText('anthropic/claude-sonnet-4.5'),

messages,

tools: [lookupInvoice],

})

// your route, your auth, your deploy target

return toServerSentEventsResponse(stream)

},

},

},

})

import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'

export function Chat() {

const { messages, sendMessage, interrupts } = useChat({

connection: fetchServerSentEvents('/api/chat'),

})

// typed state and events. no components, no styles.

return (

<>

{messages.map((message) => (

<Bubble key={message.id} {...message} />

))}

{/* the loop paused. you decide when it continues. */}

{interrupts.map((interrupt) => (

<button key={interrupt.id}

onClick={() => interrupt.resolveInterrupt(true)}>

Approve {interrupt.toolName}

</button>

))}

</>

)

}