langwatch 0.0.3 → 0.1.1

package/example/app/(chat)/page.tsx

@@ -1,12 +1,12 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
-import { AI } from '@/lib/chat/actions'
+import { AI } from '@/lib/chat/vercel-ai'
 import { auth } from '@/auth'
 import { Session } from '@/lib/types'
 import { getMissingKeys } from '@/app/actions'
 
 export const metadata = {
-  title: 'Next.js AI Chatbot'
+  title: 'Vercel AI SDK Example'
 }
 
 export default async function IndexPage() {
@@ -15,8 +15,13 @@ export default async function IndexPage() {
   const missingKeys = await getMissingKeys()
 
   return (
-    <AI initialAIState={{ chatId: id, messages: [] }}>
-      <Chat id={id} session={session} missingKeys={missingKeys} />
-    </AI>
+    <>
+      <div className="text-center w-full absolute pt-1">
+        Vercel AI SDK example
+      </div>
+      <AI initialAIState={{ chatId: id, messages: [] }}>
+        <Chat id={id} session={session} missingKeys={missingKeys} />
+      </AI>
+    </>
   )
 }

package/example/app/langchain/page.tsx

@@ -0,0 +1,27 @@
+import { nanoid } from '@/lib/utils'
+import { Chat } from '@/components/chat'
+import { auth } from '@/auth'
+import { Session } from '@/lib/types'
+import { getMissingKeys } from '@/app/actions'
+import { LangChainAI } from '../../lib/chat/langchain'
+
+export const metadata = {
+  title: 'LangChain.js Example'
+}
+
+export default async function IndexPage() {
+  const id = nanoid()
+  const session = (await auth()) as Session
+  const missingKeys = await getMissingKeys()
+
+  return (
+    <>
+      <div className="text-center w-full absolute pt-1">
+        LangChain.js Example
+      </div>
+      <LangChainAI initialAIState={{ chatId: id, messages: [] }}>
+        <Chat id={id} session={session} missingKeys={missingKeys} />
+      </LangChainAI>
+    </>
+  )
+}

package/example/app/langchain-rag/page.tsx

@@ -0,0 +1,28 @@
+import { nanoid } from '@/lib/utils'
+import { Chat } from '@/components/chat'
+import { AI } from '@/lib/chat/vercel-ai'
+import { auth } from '@/auth'
+import { Session } from '@/lib/types'
+import { getMissingKeys } from '@/app/actions'
+import { LangChainRAGAI } from '../../lib/chat/langchain-rag'
+
+export const metadata = {
+  title: 'LangChain.js Example'
+}
+
+export default async function IndexPage() {
+  const id = nanoid()
+  const session = (await auth()) as Session
+  const missingKeys = await getMissingKeys()
+
+  return (
+    <>
+      <div className="text-center w-full absolute pt-1">
+        LangChain.js RAG Example
+      </div>
+      <LangChainRAGAI initialAIState={{ chatId: id, messages: [] }}>
+        <Chat id={id} session={session} missingKeys={missingKeys} />
+      </LangChainRAGAI>
+    </>
+  )
+}

package/example/app/share/[id]/page.tsx

@@ -5,7 +5,7 @@ import { formatDate } from '@/lib/utils'
 import { getSharedChat } from '@/app/actions'
 import { ChatList } from '@/components/chat-list'
 import { FooterText } from '@/components/footer'
-import { AI, UIState, getUIStateFromAIState } from '@/lib/chat/actions'
+import { AI, UIState, getUIStateFromAIState } from '@/lib/chat/vercel-ai'
 
 export const runtime = 'edge'
 export const preferredRegion = 'home'

package/example/components/chat-list.tsx

@@ -1,5 +1,5 @@
 import { Separator } from '@/components/ui/separator'
-import { UIState } from '@/lib/chat/actions'
+import { UIState } from '@/lib/chat/vercel-ai'
 import { Session } from '@/lib/types'
 import Link from 'next/link'
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons'

package/example/components/chat-panel.tsx

@@ -8,7 +8,7 @@ import { IconShare } from '@/components/ui/icons'
 import { FooterText } from '@/components/footer'
 import { ChatShareDialog } from '@/components/chat-share-dialog'
 import { useAIState, useActions, useUIState } from 'ai/rsc'
-import type { AI } from '@/lib/chat/actions'
+import type { AI } from '@/lib/chat/vercel-ai'
 import { nanoid } from 'nanoid'
 import { UserMessage } from './stocks/message'
 

package/example/components/header.tsx

@@ -47,33 +47,55 @@ async function UserOrLogin() {
   )
 }
 
+function LogoIcon({ width, height }: { width: number; height: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 38 52"
+    >
+      <path
+        fill="#fff"
+        d="M0 12.383v28.652c0 .357.19.688.5.866l16.595 9.58a.993.993 0 001 0l19.184-11.072a1 1 0 00.5-.866V10.887a.998.998 0 00-.5-.866l-6.111-3.526a.999.999 0 00-.999 0l-2.874 1.659V4.837a.998.998 0 00-.5-.866L20.684.442a1.003 1.003 0 00-1 0l-5.903 3.409a1 1 0 00-.5.866v7.44l-.36.208v-.493a1 1 0 00-.5-.866L7.405 8.107a1.005 1.005 0 00-1 0l-5.904 3.41a.998.998 0 00-.501.866z"
+      ></path>
+      <path
+        fill="#213B41"
+        d="M0 12.383v28.652c0 .357.19.688.5.866l16.595 9.58a.993.993 0 001 0l19.184-11.072a1 1 0 00.5-.866V10.887a.998.998 0 00-.5-.866l-6.111-3.526a.999.999 0 00-.999 0l-2.874 1.659V4.837a.998.998 0 00-.5-.866L20.684.442a1.003 1.003 0 00-1 0l-5.903 3.409a1 1 0 00-.5.866v7.44l-.36.208v-.493a1 1 0 00-.5-.866L7.405 8.107a1.005 1.005 0 00-1 0l-5.904 3.41a.998.998 0 00-.501.866zm1.5.865l4.019 2.318v7.728c0 .01.005.019.006.029a.363.363 0 00.009.065.46.46 0 00.043.128c.005.009.004.019.01.028.004.007.013.01.017.017a.464.464 0 00.12.125c.017.012.027.03.046.041l5.466 3.159c.007.004.016.002.024.006.068.035.142.06.224.06a.49.49 0 00.225-.059c.019-.01.034-.023.052-.035a.503.503 0 00.129-.127c.008-.012.021-.016.029-.029.005-.009.005-.02.01-.028.015-.03.022-.061.031-.094.009-.033.018-.065.02-.099 0-.01.006-.019.006-.029v-7.15l5.11 2.949v27.498L1.5 40.747V13.248zm34.278-2.361l-4.899 2.831-5.111-2.952.776-.449 4.124-2.38 5.11 2.95zM25.293 4.836l-4.902 2.829-5.11-2.949 4.902-2.832 5.11 2.952zM10.92 11.872l-4.901 2.829-4.018-2.318 4.903-2.832 4.016 2.321zm10.036 4.638l3.312-1.909v4.187c0 .021.01.039.012.06a.384.384 0 00.062.186c.016.027.031.054.053.078.022.026.049.047.076.068.018.013.028.03.047.041l5.36 3.093-5.88 3.394v-7.151c0-.01-.005-.019-.006-.029a.48.48 0 00-.051-.192c-.005-.009-.004-.02-.01-.028-.006-.009-.014-.014-.02-.022a.512.512 0 00-.142-.142c-.009-.006-.013-.015-.022-.02l-2.791-1.614zm4.312-4.877l5.111 2.952v6.863l-5.111-2.949v-6.866zm-12.782 6.804l4.903-2.833 5.109 2.952-4.903 2.829-5.109-2.948zm-1.501 7.15l-3.966-2.292 3.966-2.29v4.582zm1.435-11.202l1.86-1.074 2.542 1.466-4.402 2.543v-2.935zm2.36-8.803l5.111 2.949v6.863l-5.111-2.949V5.582z"
+      ></path>
+    </svg>
+  )
+}
+
 export function Header() {
   return (
     <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       <div className="flex items-center">
-        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-          <UserOrLogin />
-        </React.Suspense>
+        <LogoIcon width={19} height={26} />
+        <IconSeparator className="size-6 text-muted-foreground/50 ml-3" />
+        <Button variant="link" asChild className="-ml-2">
+          <Link href="/">Vercel AI SDK</Link>
+        </Button>
+        <IconSeparator className="size-6 text-muted-foreground/50" />
+        <Button variant="link" asChild className="-ml-2">
+          <Link href="/langchain">LangChain.js</Link>
+        </Button>
+        <IconSeparator className="size-6 text-muted-foreground/50" />
+        <Button variant="link" asChild className="-ml-2">
+          <Link href="/langchain-rag">LangChain.js RAG</Link>
+        </Button>
       </div>
       <div className="flex items-center justify-end space-x-2">
         <a
           target="_blank"
-          href="https://github.com/vercel/nextjs-ai-chatbot/"
+          href="https://github.com/langwatch/langwatch"
           rel="noopener noreferrer"
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
           <IconGitHub />
           <span className="hidden ml-2 md:flex">GitHub</span>
         </a>
-        <a
-          href="https://vercel.com/templates/Next.js/nextjs-ai-chatbot"
-          target="_blank"
-          className={cn(buttonVariants())}
-        >
-          <IconVercel className="mr-2" />
-          <span className="hidden sm:block">Deploy to Vercel</span>
-          <span className="sm:hidden">Deploy</span>
-        </a>
       </div>
     </header>
   )

package/example/components/prompt-form.tsx

@@ -6,7 +6,7 @@ import Textarea from 'react-textarea-autosize'
 import { useActions, useUIState } from 'ai/rsc'
 
 import { UserMessage } from './stocks/message'
-import { type AI } from '@/lib/chat/actions'
+import { type AI } from '@/lib/chat/vercel-ai'
 import { Button } from '@/components/ui/button'
 import { IconArrowElbow, IconPlus } from '@/components/ui/icons'
 import {

package/example/components/stocks/stock-purchase.tsx

@@ -4,7 +4,7 @@ import { useId, useState } from 'react'
 import { useActions, useAIState, useUIState } from 'ai/rsc'
 import { formatNumber } from '@/lib/utils'
 
-import type { AI } from '@/lib/chat/actions'
+import type { AI } from '@/lib/chat/vercel-ai'
 
 interface Purchase {
   numberOfShares?: number

package/example/components/stocks/stocks.tsx

@@ -2,7 +2,7 @@
 
 import { useActions, useUIState } from 'ai/rsc'
 
-import type { AI } from '@/lib/chat/actions'
+import type { AI } from '@/lib/chat/vercel-ai'
 
 interface Stock {
   symbol: string

package/example/lib/chat/langchain-rag.tsx

@@ -0,0 +1,191 @@
+import 'server-only'
+
+import { openai } from '@ai-sdk/openai'
+import {
+  createAI,
+  createStreamableUI,
+  createStreamableValue,
+  getMutableAIState,
+  streamUI
+} from 'ai/rsc'
+
+import { BotCard, BotMessage, Purchase, Stock } from '@/components/stocks'
+
+import { Events } from '@/components/stocks/events'
+import { SpinnerMessage, UserMessage } from '@/components/stocks/message'
+import { Stocks } from '@/components/stocks/stocks'
+import { Chat, Message } from '@/lib/types'
+import { nanoid } from '@/lib/utils'
+import { LangWatch, convertFromVercelAIMessages } from 'langwatch'
+import { ChatOpenAI } from '@langchain/openai'
+import {
+  ChatPromptTemplate,
+  PromptTemplateInput
+} from '@langchain/core/prompts'
+import {
+  HumanMessage,
+  SystemMessage,
+  AIMessage,
+  ToolMessage,
+  BaseMessageLike
+} from '@langchain/core/messages'
+import { StringOutputParser } from '@langchain/core/output_parsers'
+import { CallbackManagerForRetrieverRun } from '@langchain/core/callbacks/manager'
+import {
+  BaseRetriever,
+  type BaseRetrieverInput
+} from '@langchain/core/retrievers'
+import { Document } from '@langchain/core/documents'
+import {
+  RunnableLambda,
+  RunnableMap,
+  RunnablePassthrough
+} from '@langchain/core/runnables'
+
+async function submitUserMessage(message: 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 LangChainRAGAI>()
+
+  const messages: BaseMessageLike[] = [
+    ['system', 'Answer based on the retrieved context'],
+    ...(aiState.get().messages.map(message => {
+      if (message.role === 'system') {
+        return ['system', message.content.toString()]
+      }
+      if (message.role === 'user') {
+        return ['human', message.content.toString()]
+      }
+      if (message.role === 'tool') {
+        return ['tool', message.content.toString()]
+      }
+      return ['ai', message.content.toString()]
+    }) as BaseMessageLike[]),
+    ['ai', 'Retrieved the following context: {context}'],
+    ['human', '{question}']
+  ]
+
+  aiState.update({
+    ...aiState.get(),
+    messages: [
+      ...aiState.get().messages,
+      {
+        id: nanoid(),
+        role: 'user',
+        content: message
+      }
+    ]
+  })
+
+  const prompt = ChatPromptTemplate.fromMessages(messages)
+  const model = new ChatOpenAI({ model: 'gpt-3.5-turbo' })
+  const retriever = new CustomRetriever()
+  const outputParser = new StringOutputParser()
+
+  const setupAndRetrieval = RunnableMap.from({
+    context: new RunnableLambda({
+      func: (input: string) =>
+        retriever
+          .invoke(input, {
+            callbacks: [trace.getLangChainCallback()]
+          })
+          .then(response => response[0].pageContent)
+    }).withConfig({ runName: 'contextRetriever' }),
+    question: new RunnablePassthrough()
+  })
+
+  const chain = setupAndRetrieval.pipe(prompt).pipe(model).pipe(outputParser)
+
+  const stream = await chain.stream(message, {
+    callbacks: [trace.getLangChainCallback()]
+  })
+
+  let textStream = createStreamableValue('')
+  let textNode = <BotMessage content={textStream.value} />
+  let content = ''
+
+  setTimeout(async () => {
+    for await (const chunk of stream) {
+      textStream.update(chunk)
+      content += chunk
+    }
+
+    textStream?.done()
+    aiState.done({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: nanoid(),
+          role: 'assistant',
+          content
+        }
+      ]
+    })
+  }, 0)
+
+  return {
+    id: nanoid(),
+    display: textNode
+  }
+}
+
+export type AIState = {
+  chatId: string
+  messages: Message[]
+}
+
+export type UIState = {
+  id: string
+  display: React.ReactNode
+}[]
+
+export const LangChainRAGAI = createAI<AIState, UIState>({
+  actions: {
+    submitUserMessage
+  },
+  initialUIState: [],
+  initialAIState: { chatId: nanoid(), messages: [] },
+  onGetUIState: async () => {
+    'use server'
+
+    return undefined
+  },
+  onSetAIState: async ({ state }) => {
+    'use server'
+
+    return
+  }
+})
+
+export class CustomRetriever extends BaseRetriever {
+  lc_namespace = ['langchain', 'retrievers']
+
+  constructor(fields?: BaseRetrieverInput) {
+    super(fields)
+  }
+
+  async _getRelevantDocuments(
+    query: string,
+    _runManager?: CallbackManagerForRetrieverRun
+  ): Promise<Document[]> {
+    console.log('query', query)
+    return [
+      new Document({
+        pageContent: `Some document pertaining to ${query}`,
+        metadata: {}
+      }),
+      new Document({
+        pageContent: `Some other document pertaining to ${query}`,
+        metadata: {}
+      })
+    ]
+  }
+}

package/example/lib/chat/langchain.tsx

@@ -0,0 +1,112 @@
+import 'server-only'
+
+import { createAI, createStreamableValue, getMutableAIState } from 'ai/rsc'
+
+import { BotMessage } from '@/components/stocks'
+
+import { Message } from '@/lib/types'
+import { nanoid } from '@/lib/utils'
+import { StringOutputParser } from '@langchain/core/output_parsers'
+import { ChatPromptTemplate } from '@langchain/core/prompts'
+import { ChatOpenAI } from '@langchain/openai'
+import { LangWatch } from 'langwatch'
+
+async function submitUserMessage(message: 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 LangChainAI>()
+
+  aiState.update({
+    ...aiState.get(),
+    messages: [
+      {
+        id: nanoid(),
+        role: 'system',
+        content: 'Translate the following from English into Italian'
+      },
+      {
+        id: nanoid(),
+        role: 'user',
+        content: message
+      }
+    ]
+  })
+
+  const prompt = ChatPromptTemplate.fromMessages([
+    ['system', 'Translate the following from English into Italian'],
+    ['human', '{input}']
+  ])
+  const model = new ChatOpenAI({ model: 'gpt-3.5-turbo' })
+  const outputParser = new StringOutputParser()
+
+  const chain = prompt.pipe(model).pipe(outputParser)
+
+  const stream = await chain.stream(
+    { input: message },
+    { callbacks: [trace.getLangChainCallback()] }
+  )
+
+  let textStream = createStreamableValue('')
+  let textNode = <BotMessage content={textStream.value} />
+  let content = ''
+
+  setTimeout(async () => {
+    for await (const chunk of stream) {
+      textStream.update(chunk)
+      content += chunk
+    }
+
+    textStream?.done()
+    aiState.done({
+      ...aiState.get(),
+      messages: [
+        ...aiState.get().messages,
+        {
+          id: nanoid(),
+          role: 'assistant',
+          content
+        }
+      ]
+    })
+  }, 0)
+
+  return {
+    id: nanoid(),
+    display: textNode
+  }
+}
+
+export type AIState = {
+  chatId: string
+  messages: Message[]
+}
+
+export type UIState = {
+  id: string
+  display: React.ReactNode
+}[]
+
+export const LangChainAI = createAI<AIState, UIState>({
+  actions: {
+    submitUserMessage
+  },
+  initialUIState: [],
+  initialAIState: { chatId: nanoid(), messages: [] },
+  onGetUIState: async () => {
+    'use server'
+
+    return undefined
+  },
+  onSetAIState: async ({ state }) => {
+    'use server'
+
+    return
+  }
+})

package/example/lib/chat/{actions.tsx → vercel-ai.tsx}

@@ -168,12 +168,10 @@ async function submitUserMessage(content: string) {
     })
 
     span.end({
-      outputs: [
-        {
-          type: 'chat_messages',
-          value: convertFromVercelAIMessages(output)
-        }
-      ]
+      output: {
+        type: 'chat_messages',
+        value: convertFromVercelAIMessages(output)
+      }
     })
   }