langwatch 0.1.4 → 0.1.5

package/example/lib/chat/vercel-ai.tsx

@@ -1,122 +1,42 @@
 import 'server-only'
 
+import { openai } from '@ai-sdk/openai'
 import {
   createAI,
   createStreamableUI,
-  getMutableAIState,
   getAIState,
-  streamUI,
-  createStreamableValue
+  getMutableAIState
 } from 'ai/rsc'
-import { openai } from '@ai-sdk/openai'
 
 import {
-  spinner,
   BotCard,
   BotMessage,
-  SystemMessage,
+  Purchase,
+  spinner,
   Stock,
-  Purchase
+  SystemMessage
 } from '@/components/stocks'
 
-import { z } from 'zod'
-import { EventsSkeleton } from '@/components/stocks/events-skeleton'
+import { saveChat } from '@/app/actions'
+import { auth } from '@/auth'
 import { Events } from '@/components/stocks/events'
-import { StocksSkeleton } from '@/components/stocks/stocks-skeleton'
+import { UserMessage } from '@/components/stocks/message'
 import { Stocks } from '@/components/stocks/stocks'
-import { StockSkeleton } from '@/components/stocks/stock-skeleton'
+import { Chat, Message } from '@/lib/types'
 import {
   formatNumber,
+  nanoid,
   runAsyncFnWithoutBlocking,
-  sleep,
-  nanoid
+  sleep
 } from '@/lib/utils'
-import { saveChat } from '@/app/actions'
-import { SpinnerMessage, UserMessage } from '@/components/stocks/message'
-import { Chat, Message } from '@/lib/types'
-import { auth } from '@/auth'
-import { LangWatch, convertFromVercelAIMessages } from 'langwatch'
-
-async function confirmPurchase(symbol: string, price: number, amount: number) {
-  'use server'
-
-  const aiState = getMutableAIState<typeof AI>()
-
-  const purchasing = createStreamableUI(
-    <div className="inline-flex items-start gap-1 md:items-center">
-      {spinner}
-      <p className="mb-2">
-        Purchasing {amount} ${symbol}...
-      </p>
-    </div>
-  )
-
-  const systemMessage = createStreamableUI(null)
-
-  runAsyncFnWithoutBlocking(async () => {
-    await sleep(1000)
-
-    purchasing.update(
-      <div className="inline-flex items-start gap-1 md:items-center">
-        {spinner}
-        <p className="mb-2">
-          Purchasing {amount} ${symbol}... working on it...
-        </p>
-      </div>
-    )
-
-    await sleep(1000)
-
-    purchasing.done(
-      <div>
-        <p className="mb-2">
-          You have successfully purchased {amount} ${symbol}. Total cost:{' '}
-          {formatNumber(amount * price)}
-        </p>
-      </div>
-    )
-
-    systemMessage.done(
-      <SystemMessage>
-        You have purchased {amount} shares of {symbol} at ${price}. Total cost ={' '}
-        {formatNumber(amount * price)}.
-      </SystemMessage>
-    )
-
-    aiState.done({
-      ...aiState.get(),
-      messages: [
-        ...aiState.get().messages,
-        {
-          id: nanoid(),
-          role: 'system',
-          content: `[User has purchased ${amount} shares of ${symbol} at ${price}. Total cost = ${
-            amount * price
-          }]`
-        }
-      ]
-    })
-  })
-
-  return {
-    purchasingUI: purchasing.value,
-    newMessage: {
-      id: nanoid(),
-      display: systemMessage.value
-    }
-  }
-}
+import { generateText, streamText, tool } from 'ai'
+import { z } from 'zod'
+import { StockSkeleton } from '../../components/stocks/stock-skeleton'
+import { EventsSkeleton } from '../../components/stocks/events-skeleton'
 
 async function submitUserMessage(content: string) {
   'use server'
 
-  const langwatch = new LangWatch()
-  langwatch.on('error', e => {
-    console.log('Error from LangWatch:', e)
-  })
-
-  const trace = langwatch.getTrace()
-
   const aiState = getMutableAIState<typeof AI>()
 
   aiState.update({
@@ -135,84 +55,42 @@ async function submitUserMessage(content: string) {
   You are a stock trading conversation bot and you can help users buy stocks, step by step.
   You and the user can discuss stock prices and the user can adjust the amount of stocks they want to buy, or place an order, in the UI.
 
-  Messages inside [] means that it's a UI element or a user event. For example:
-  - "[Price of AAPL = 100]" means that an interface of the stock price of AAPL is shown to the user.
-  - "[User has changed the amount of AAPL to 10]" means that the user has changed the amount of AAPL to 10 in the UI.
+  To use tools, use the following format:
+  - For stock price: show_stock_price(SYMBOL, PRICE, DELTA)
+  - For listing stocks: list_stocks([{"symbol": "AAPL", "price": 150.5, "delta": 2.3}, ...])
+  - For purchase UI: show_stock_purchase(SYMBOL, PRICE, NUMBER_OF_SHARES)
+  - For events: get_events([{"date": "2024-01-01", "headline": "...", "description": "..."}, ...])
 
-  If the user requests purchasing a stock, call \`show_stock_purchase_ui\` to show the purchase UI.
-  If the user just wants the price, call \`show_stock_price\` to show the price.
-  If you want to show trending stocks, call \`list_stocks\`.
-  If you want to show events, call \`get_events\`.
-  If the user wants to sell stock, or complete another impossible task, respond that you are a demo and cannot do that.
+  Messages inside [] means that it's a UI element or a user event.`
 
-  Besides that, you can also chat with users and do some calculations if needed.`
-
-  const span = trace.startLLMSpan({
-    model: 'gpt-4o-mini',
-    input: {
-      type: 'chat_messages',
-      value: [
-        {
-          role: 'system',
-          content: system
-        },
-        ...convertFromVercelAIMessages(aiState.get().messages)
-      ]
-    }
-  })
+  const ui = createStreamableUI(<BotMessage content="" />)
+  // let textNode = <BotMessage content={textStream.value} />
+  let fullContent = ''
 
   const onFinish = (output: Message[]) => {
     aiState.done({
       ...aiState.get(),
       messages: [...aiState.get().messages, ...output]
     })
-
-    span.end({
-      output: {
-        type: 'chat_messages',
-        value: convertFromVercelAIMessages(output)
-      }
-    })
   }
 
-  let textStream: undefined | ReturnType<typeof createStreamableValue<string>>
-  let textNode: undefined | React.ReactNode
-
-  const result = await streamUI({
-    model: openai('gpt-3.5-turbo'),
-    initial: <SpinnerMessage />,
-    system,
+  const stream = streamText({
+    model: openai('gpt-4o-mini'),
     messages: [
-      ...aiState.get().messages.map((message: any) => ({
-        role: message.role,
-        content: message.content,
-        name: message.name
-      }))
+      {
+        role: 'system',
+        content: system
+      },
+      ...aiState.get().messages
     ],
-    text: ({ content, done, delta }) => {
-      if (!textStream) {
-        textStream = createStreamableValue('')
-        textNode = <BotMessage content={textStream.value} />
-      }
-
-      if (done) {
-        textStream.done()
-
-        onFinish([
-          {
-            id: nanoid(),
-            role: 'assistant',
-            content
-          }
-        ])
-      } else {
-        textStream.update(delta)
+    experimental_telemetry: {
+      isEnabled: true,
+      metadata: {
+        threadId: aiState.get().chatId
       }
-
-      return textNode
     },
     tools: {
-      listStocks: {
+      listStocks: tool({
         description: 'List three imaginary stocks that are trending.',
         parameters: z.object({
           stocks: z.array(
@@ -223,10 +101,10 @@ async function submitUserMessage(content: string) {
             })
           )
         }),
-        generate: async function* ({ stocks }) {
-          yield (
+        execute: async ({ stocks }) => {
+          ui.update(
             <BotCard>
-              <StocksSkeleton />
+              <StockSkeleton />
             </BotCard>
           )
 
@@ -261,14 +139,14 @@ async function submitUserMessage(content: string) {
             }
           ])
 
-          return (
+          ui.update(
             <BotCard>
               <Stocks props={stocks} />
             </BotCard>
           )
         }
-      },
-      showStockPrice: {
+      }),
+      showStockPrice: tool({
         description:
           'Get the current stock price of a given stock or currency. Use this to show the price to the user.',
         parameters: z.object({
@@ -280,8 +158,8 @@ async function submitUserMessage(content: string) {
           price: z.number().describe('The price of the stock.'),
           delta: z.number().describe('The change in price of the stock')
         }),
-        generate: async function* ({ symbol, price, delta }) {
-          yield (
+        execute: async ({ symbol, price, delta }) => {
+          ui.update(
             <BotCard>
               <StockSkeleton />
             </BotCard>
@@ -318,14 +196,14 @@ async function submitUserMessage(content: string) {
             }
           ])
 
-          return (
+          ui.update(
             <BotCard>
               <Stock props={{ symbol, price, delta }} />
             </BotCard>
           )
         }
-      },
-      showStockPurchase: {
+      }),
+      showStockPurchase: tool({
         description:
           'Show price and the UI to purchase a stock or currency. Use this if the user wants to purchase a stock or currency.',
         parameters: z.object({
@@ -341,7 +219,7 @@ async function submitUserMessage(content: string) {
               'The **number of shares** for a stock or currency to purchase. Can be optional if the user did not specify it.'
             )
         }),
-        generate: async function* ({ symbol, price, numberOfShares = 100 }) {
+        execute: async ({ symbol, price, numberOfShares = 100 }) => {
           const toolCallId = nanoid()
 
           if (numberOfShares <= 0 || numberOfShares > 1000) {
@@ -382,7 +260,7 @@ async function submitUserMessage(content: string) {
               }
             ])
 
-            return <BotMessage content={'Invalid amount'} />
+            ui.update(<BotMessage content={'Invalid amount'} />)
           } else {
             onFinish([
               {
@@ -415,7 +293,7 @@ async function submitUserMessage(content: string) {
               }
             ])
 
-            return (
+            ui.update(
               <BotCard>
                 <Purchase
                   props={{
@@ -429,8 +307,8 @@ async function submitUserMessage(content: string) {
             )
           }
         }
-      },
-      getEvents: {
+      }),
+      getEvents: tool({
         description:
           'List funny imaginary events between user highlighted dates that describe stock activity.',
         parameters: z.object({
@@ -444,8 +322,8 @@ async function submitUserMessage(content: string) {
             })
           )
         }),
-        generate: async function* ({ events }) {
-          yield (
+        execute: async ({ events }) => {
+          ui.update(
             <BotCard>
               <EventsSkeleton />
             </BotCard>
@@ -482,19 +360,113 @@ async function submitUserMessage(content: string) {
             }
           ])
 
-          return (
+          ui.update(
             <BotCard>
               <Events props={events} />
             </BotCard>
           )
         }
-      }
+      })
     }
   })
 
+  setTimeout(async () => {
+    // First, stream all text chunks
+    for await (const chunk of stream.textStream) {
+      ui.update(<BotMessage content={fullContent} />)
+      fullContent += chunk
+    }
+
+    ui.done()
+    const toolCalls = await stream.toolCalls
+    if (!toolCalls || toolCalls.length == 0) {
+      aiState.done({
+        ...aiState.get(),
+        messages: [
+          ...aiState.get().messages,
+          {
+            id: nanoid(),
+            role: 'assistant',
+            content: fullContent
+          }
+        ]
+      })
+    }
+  }, 0)
+
   return {
     id: nanoid(),
-    display: result.value
+    display: ui.value
+  }
+}
+
+async function confirmPurchase(symbol: string, price: number, amount: number) {
+  'use server'
+
+  const aiState = getMutableAIState<typeof AI>()
+
+  const purchasing = createStreamableUI(
+    <div className="inline-flex items-start gap-1 md:items-center">
+      {spinner}
+      <p className="mb-2">
+        Purchasing {amount} ${symbol}...
+      </p>
+    </div>
+  )
+
+  const systemMessage = createStreamableUI(null)
+
+  runAsyncFnWithoutBlocking(async () => {
+    await sleep(1000)
+
+    purchasing.update(
+      <div className="inline-flex items-start gap-1 md:items-center">
+        {spinner}
+        <p className="mb-2">
+          Purchasing {amount} ${symbol}... working on it...
+        </p>
+      </div>
+    )
+
+    await sleep(1000)
+
+    purchasing.done(
+      <div>
+        <p className="mb-2">
+          You have successfully purchased {amount} ${symbol}. Total cost:{' '}
+          {formatNumber(amount * price)}
+        </p>
+      </div>
+    )
+
+    systemMessage.done(
+      <SystemMessage>
+        You have purchased {amount} shares of {symbol} at ${price}. Total cost ={' '}
+        {formatNumber(amount * price)}.
+      </SystemMessage>
+    )
+
+    aiState.done({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: nanoid(),
+          role: 'system',
+          content: `[User has purchased ${amount} shares of ${symbol} at ${price}. Total cost = ${
+            amount * price
+          }]`
+        }
+      ]
+    })
+  })
+
+  return {
+    purchasingUI: purchasing.value,
+    newMessage: {
+      id: nanoid(),
+      display: systemMessage.value
+    }
   }
 }
 

package/example/next.config.js

@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
+  experimental: {
+    instrumentationHook: true,
+  },
   images: {
     remotePatterns: [
       {