-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
232 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import {Pipe} from 'langbase'; | ||
| import {NextRequest} from 'next/server'; | ||
|
|
||
| export async function POST(req: NextRequest) { | ||
| const {prompt} = await req.json(); | ||
|
|
||
| // 1. Initiate the Pipe. | ||
| const myPipe = new Pipe({ | ||
| apiKey: process.env.LANGBASE_API_KEY!, | ||
| name: 'summary', | ||
| }); | ||
|
|
||
| // 2. Generate a stream by asking a question | ||
| const {stream, threadId} = await myPipe.run({ | ||
| messages: [{role: 'user', content: prompt}], | ||
| stream: true, | ||
| }); | ||
|
|
||
| // 3. Done, return the stream in a readable stream format. | ||
| return new Response(stream, { | ||
| status: 200, | ||
| headers: { | ||
| 'lb-thread-id': threadId ?? '', | ||
| }, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import {Pipe} from 'langbase'; | ||
| import {NextRequest} from 'next/server'; | ||
|
|
||
| export async function POST(req: NextRequest) { | ||
| const {prompt} = await req.json(); | ||
|
|
||
| // 1. Initiate the Pipe. | ||
| const myPipe = new Pipe({ | ||
| apiKey: process.env.LANGBASE_API_KEY!, | ||
| name: 'summary', | ||
| }); | ||
|
|
||
| // 2. Generate a stream by asking a question | ||
| const result = await myPipe.run({ | ||
| messages: [{role: 'user', content: prompt}], | ||
| stream: false, | ||
| }); | ||
|
|
||
| // 3. Done, return the stream in a readable stream format. | ||
| return new Response(JSON.stringify(result)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| 'use client'; | ||
|
|
||
| import {Button} from '@/components/ui/button'; | ||
| import {Input} from '@/components/ui/input'; | ||
| import {getRunner} from 'langbase'; | ||
| import {useState} from 'react'; | ||
|
|
||
| export default function RunStreamExample() { | ||
| const [prompt, setPrompt] = useState(''); | ||
| const [completion, setCompletion] = useState(''); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| if (!prompt.trim() || loading) return; | ||
|
|
||
| setLoading(true); | ||
| setCompletion(''); | ||
|
|
||
| try { | ||
| const response = await fetch('/langbase/pipe/run-stream', { | ||
| method: 'POST', | ||
| body: JSON.stringify({prompt}), | ||
| headers: {'Content-Type': 'text/plain'}, | ||
| }); | ||
|
|
||
| if (response.body) { | ||
| const stream = getRunner(response.body); | ||
|
|
||
| // Method #1 to get all of the chunk. | ||
| for await (const chunk of stream) { | ||
| const content = chunk?.choices[0]?.delta?.content; | ||
| content && setCompletion(prev => prev + content); | ||
| } | ||
|
|
||
| // // Method #2 to get only the chunk's content as delta of the chunks | ||
| // stream.on('content', content => { | ||
| // setCompletion(prev => prev + content); | ||
| // }); | ||
| } | ||
| } catch (error) { | ||
| setLoading(false); | ||
| console.error('Error:', error); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full"> | ||
| <div className="flex flex-col gap-2 w-full"> | ||
| <p className="text-lg font-semibold"> | ||
| 1. Stream Text{' '} | ||
| <a | ||
| className="text-indigo-500" | ||
| href="https://langbase.com/docs/langbase-sdk/stream-text" | ||
| > | ||
| `pipe.run()` | ||
| </a>{' '} | ||
| with Route Handler | ||
| </p> | ||
| <p className="text-muted-foreground"> | ||
| Ask a prompt to stream a text completion. | ||
| </p> | ||
| </div> | ||
| <form | ||
| onSubmit={handleSubmit} | ||
| className="flex flex-col w-full items-center gap-2" | ||
| > | ||
| <Input | ||
| type="text" | ||
| placeholder="Enter prompt message here" | ||
| onChange={e => setPrompt(e.target.value)} | ||
| value={prompt} | ||
| required | ||
| /> | ||
| <Button type="submit" className="w-full" disabled={loading}> | ||
| {loading ? 'AI is thinking...' : 'Ask AI'} | ||
| </Button> | ||
| </form> | ||
| {completion && ( | ||
| <p className="mt-4"> | ||
| <strong>Stream:</strong> {completion} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| 'use client'; | ||
|
|
||
| import { Button } from '@/components/ui/button'; | ||
| import { Input } from '@/components/ui/input'; | ||
| import { useState } from 'react'; | ||
|
|
||
| export default function RunNonStreamExample() { | ||
| const [prompt, setPrompt] = useState(''); | ||
| const [completion, setCompletion] = useState(''); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const handleSubmit = async (e: any) => { | ||
| e.preventDefault(); | ||
| if (!prompt.trim()) return; | ||
|
|
||
| setLoading(true); | ||
| try { | ||
| const response = await fetch('/langbase/pipe/run', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ prompt }), | ||
| }); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error('Network response was not ok'); | ||
| } | ||
|
|
||
| const data = await response.json(); | ||
| setCompletion(data.completion); | ||
| } catch (error) { | ||
| console.error('Error:', error); | ||
| setCompletion('An error occurred while generating the completion.'); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full"> | ||
| <div className="flex flex-col gap-2 w-full"> | ||
| <p className="text-lg font-semibold"> | ||
| 2. Generate Text{' '} | ||
| <a | ||
| className="text-indigo-500" | ||
| href="https://langbase.com/docs/langbase-sdk/generate-text" | ||
| > | ||
| `pipe.run()` | ||
| </a>{' '} | ||
| with Route Handler | ||
| </p> | ||
| <p className="text-muted-foreground"> | ||
| Ask a prompt to generate a text completion. | ||
| </p> | ||
| </div> | ||
| <form | ||
| onSubmit={handleSubmit} | ||
| className="flex flex-col w-full items-center gap-2" | ||
| > | ||
| <Input | ||
| type="text" | ||
| placeholder="Enter prompt message here" | ||
| value={prompt} | ||
| onChange={e => setPrompt(e.target.value)} | ||
| required | ||
| /> | ||
|
|
||
| <Button type="submit" className="w-full" disabled={loading}> | ||
| {loading ? 'AI is thinking...' : 'Ask AI'} | ||
| </Button> | ||
| </form> | ||
|
|
||
| {!loading && completion && ( | ||
| <p className="mt-4"> | ||
| <strong>Generated completion:</strong> {completion} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters