diff --git a/examples/js-tutor/.env.example b/examples/js-tutor/.env.example index 85d27328..81f12161 100644 --- a/examples/js-tutor/.env.example +++ b/examples/js-tutor/.env.example @@ -1 +1,2 @@ -NEXT_LB_PIPE_API_KEY="" \ No newline at end of file +LB_PIPE_API_KEY="" + diff --git a/examples/js-tutor/README.md b/examples/js-tutor/README.md index a84fa99c..fa0dc160 100755 --- a/examples/js-tutor/README.md +++ b/examples/js-tutor/README.md @@ -5,7 +5,7 @@ ## Build JavaScript Tutor with Pipes — ⌘ Langbase -This chatbot is built by using an AI Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software). +This chatbot is built by using an agentic Pipe on Langbase, it works with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software). Check out the live demo [here][demo]. @@ -37,7 +37,7 @@ To get started with Langbase, you'll need to [create a free personal account on 6. Add the following environment variables (.env.local): ``` # Replace `PIPE_API_KEY` with the copied API key. - NEXT_LB_PIPE_API_KEY="PIPE_API_KEY" + LB_PIPE_API_KEY="PIPE_API_KEY" ``` 7. In your CLI issue the following: ``` @@ -63,7 +63,8 @@ This project is created by [Langbase][lb] team members, with contributions from: **_Built by ⌘ [Langbase.com][lb] — Ship hyper-personalized AI assistants with memory!_** -[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/js_tutor/js_tutor.png + +[cover]:https://raw.githubusercontent.com/LangbaseInc/docs-images/main/examples/js_tutor/js-tutor-chatbot.png [demo]: https://js-tutor.langbase.dev [lb]: https://langbase.com [pipe]: https://langbase.com/examples/js-tutor diff --git a/examples/js-tutor/app/api/chat/route.ts b/examples/js-tutor/app/api/chat/route.ts index 95af6ed7..7987954b 100755 --- a/examples/js-tutor/app/api/chat/route.ts +++ b/examples/js-tutor/app/api/chat/route.ts @@ -10,9 +10,9 @@ export const runtime = 'edge' */ export async function POST(req: Request) { try { - if (!process.env.NEXT_LB_PIPE_API_KEY) { + if (!process.env.LB_PIPE_API_KEY) { throw new Error( - 'Please set NEXT_LB_PIPE_API_KEY in your environment variables.' + 'Please set LB_PIPE_API_KEY in your environment variables.' ) } @@ -20,7 +20,7 @@ export async function POST(req: Request) { const headers = { 'Content-Type': 'application/json', - Authorization: `Bearer ${process.env.NEXT_LB_PIPE_API_KEY}` + Authorization: `Bearer ${process.env.LB_PIPE_API_KEY}` } // Get chat prompt messages and threadId from the client. diff --git a/examples/js-tutor/components/chatbot-page.tsx b/examples/js-tutor/components/chatbot-page.tsx index 80203378..f5424b9b 100755 --- a/examples/js-tutor/components/chatbot-page.tsx +++ b/examples/js-tutor/components/chatbot-page.tsx @@ -7,6 +7,7 @@ import { useState } from 'react' import { toast } from 'sonner' import { ChatInput } from './chat-input' import { Opening } from './opening' +import { Suggestions } from './suggestions' export interface ChatProps extends React.ComponentProps<'div'> { id?: string // Optional: Thread ID if you want to persist the chat in a DB @@ -31,6 +32,11 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) { setThreadId(lbThreadId) } }) + + const sendSuggestedPrompt = (prompt: string) => { + setInput(prompt) + } + return (
@@ -39,7 +45,10 @@ export function Chatbot({ id, initialMessages, className }: ChatProps) { ) : ( - + <> + + + )}
{ @@ -50,6 +51,19 @@ export function PromptForm({ aria-hidden="true" />

Chat

+ + + + + +
    +
  • Say Hello to start a guided conversation. JS Tutor will present a menu to begin your JavaScript learning journey, which consists of 10 levels.
    • +
  • Please note that the quality of the conversation and menu presentation may vary depending on the chosen LLM and its configuration in your Langbase JS Tutor pipe.
    • +
  • You can also interact with JS Tutor in a natural conversation style, such as saying "Let's begin," "Let's start," or "I want to skip to level 7.
    • +
+ + +
diff --git a/examples/js-tutor/components/suggestions.tsx b/examples/js-tutor/components/suggestions.tsx new file mode 100644 index 00000000..d36c702e --- /dev/null +++ b/examples/js-tutor/components/suggestions.tsx @@ -0,0 +1,48 @@ +import cn from 'mxcn' +import { IconSparkles } from './ui/icons' + +// Prompt suggestions – Change these to match your use-case/company +const suggestions = [ + { + title: `Say Hello to begin an interactive conversation with JS Tutor and get up to speed with JavaScript.`, + prompt: `Hello` + }, +] + +export const Suggestions = ({ + sendSuggestedPrompt +}: { + sendSuggestedPrompt: (prompt: string) => void +}) => { + const handleClick = (prompt: string) => { + sendSuggestedPrompt(prompt) + } + + return ( +
+ +
+ {suggestions.map((suggestion, index) => { + return ( +
handleClick(suggestion.prompt)} + > +
+ ) + })} +
+
+ ) +} \ No newline at end of file diff --git a/examples/js-tutor/components/ui/hovercard.tsx b/examples/js-tutor/components/ui/hovercard.tsx new file mode 100644 index 00000000..cc819857 --- /dev/null +++ b/examples/js-tutor/components/ui/hovercard.tsx @@ -0,0 +1,29 @@ +"use client" + +import * as React from "react" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" + +import cn from 'mxcn' + +const HoverCard = HoverCardPrimitive.Root + +const HoverCardTrigger = HoverCardPrimitive.Trigger + +const HoverCardContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + +)) +HoverCardContent.displayName = HoverCardPrimitive.Content.displayName + +export { HoverCard, HoverCardTrigger, HoverCardContent } \ No newline at end of file