Skip to content

Commit 682d4bb

Browse files
msaaddevmsaaddev
committed
📦 NEW: Next.js pipe.run() example
1 parent ea34fed commit 682d4bb

File tree

7 files changed

+232
-12
lines changed

7 files changed

+232
-12
lines changed

‎examples/nextjs/app/langbase/pipe/run-stream/route.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Pipe} from 'langbase';
2+
import {NextRequest} from 'next/server';
3+
4+
export async function POST(req: NextRequest) {
5+
const {prompt} = await req.json();
6+
7+
// 1. Initiate the Pipe.
8+
const myPipe = new Pipe({
9+
apiKey: process.env.LANGBASE_API_KEY!,
10+
name: 'summary',
11+
});
12+
13+
// 2. Generate a stream by asking a question
14+
const {stream, threadId} = await myPipe.run({
15+
messages: [{role: 'user', content: prompt}],
16+
stream: true,
17+
});
18+
19+
// 3. Done, return the stream in a readable stream format.
20+
return new Response(stream, {
21+
status: 200,
22+
headers: {
23+
'lb-thread-id': threadId ?? '',
24+
},
25+
});
26+
}

‎examples/nextjs/app/langbase/pipe/run/route.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {Pipe} from 'langbase';
2+
import {NextRequest} from 'next/server';
3+
4+
export async function POST(req: NextRequest) {
5+
const {prompt} = await req.json();
6+
7+
// 1. Initiate the Pipe.
8+
const myPipe = new Pipe({
9+
apiKey: process.env.LANGBASE_API_KEY!,
10+
name: 'summary',
11+
});
12+
13+
// 2. Generate a stream by asking a question
14+
const result = await myPipe.run({
15+
messages: [{role: 'user', content: prompt}],
16+
stream: false,
17+
});
18+
19+
// 3. Done, return the stream in a readable stream format.
20+
return new Response(JSON.stringify(result));
21+
}

‎examples/nextjs/app/page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import GenerateTextExample from '@/components/langbase/generate-text';
2+
import RunNonStreamExample from '@/components/langbase/run';
3+
import RunStreamExample from '@/components/langbase/run-stream';
24
import StreamTextExample from '@/components/langbase/stream-text';
35

46
export default function Home() {
@@ -13,6 +15,8 @@ export default function Home() {
1315
An AI agent that responds to your prompts.
1416
</p>
1517
</div>
18+
<RunStreamExample />
19+
<RunNonStreamExample />
1620
<GenerateTextExample />
1721
<StreamTextExample />
1822
</div>

‎examples/nextjs/components/langbase/generate-text.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22

3-
import {Button} from '@/components/ui/button';
4-
import {Input} from '@/components/ui/input';
5-
import {useState} from 'react';
3+
import { Button } from '@/components/ui/button';
4+
import { Input } from '@/components/ui/input';
5+
import { useState } from 'react';
66

77
export default function GenerateTextExample() {
88
const [prompt, setPrompt] = useState('');
@@ -20,7 +20,7 @@ export default function GenerateTextExample() {
2020
headers: {
2121
'Content-Type': 'application/json',
2222
},
23-
body: JSON.stringify({prompt}),
23+
body: JSON.stringify({ prompt }),
2424
});
2525

2626
if (!response.ok) {
@@ -41,7 +41,7 @@ export default function GenerateTextExample() {
4141
<div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full">
4242
<div className="flex flex-col gap-2 w-full">
4343
<p className="text-lg font-semibold">
44-
1. Generate Text{' '}
44+
3. Generate Text{' '}
4545
<a
4646
className="text-indigo-500"
4747
href="https://langbase.com/docs/langbase-sdk/generate-text"

‎examples/nextjs/components/langbase/run-stream.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
'use client';
2+
3+
import {Button} from '@/components/ui/button';
4+
import {Input} from '@/components/ui/input';
5+
import {getRunner} from 'langbase';
6+
import {useState} from 'react';
7+
8+
export default function RunStreamExample() {
9+
const [prompt, setPrompt] = useState('');
10+
const [completion, setCompletion] = useState('');
11+
const [loading, setLoading] = useState(false);
12+
13+
const handleSubmit = async (e: React.FormEvent) => {
14+
e.preventDefault();
15+
if (!prompt.trim() || loading) return;
16+
17+
setLoading(true);
18+
setCompletion('');
19+
20+
try {
21+
const response = await fetch('/langbase/pipe/run-stream', {
22+
method: 'POST',
23+
body: JSON.stringify({prompt}),
24+
headers: {'Content-Type': 'text/plain'},
25+
});
26+
27+
if (response.body) {
28+
const stream = getRunner(response.body);
29+
30+
// Method #1 to get all of the chunk.
31+
for await (const chunk of stream) {
32+
const content = chunk?.choices[0]?.delta?.content;
33+
content && setCompletion(prev => prev + content);
34+
}
35+
36+
// // Method #2 to get only the chunk's content as delta of the chunks
37+
// stream.on('content', content => {
38+
// setCompletion(prev => prev + content);
39+
// });
40+
}
41+
} catch (error) {
42+
setLoading(false);
43+
console.error('Error:', error);
44+
} finally {
45+
setLoading(false);
46+
}
47+
};
48+
49+
return (
50+
<div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full">
51+
<div className="flex flex-col gap-2 w-full">
52+
<p className="text-lg font-semibold">
53+
1. Stream Text{' '}
54+
<a
55+
className="text-indigo-500"
56+
href="https://langbase.com/docs/langbase-sdk/stream-text"
57+
>
58+
`pipe.run()`
59+
</a>{' '}
60+
with Route Handler
61+
</p>
62+
<p className="text-muted-foreground">
63+
Ask a prompt to stream a text completion.
64+
</p>
65+
</div>
66+
<form
67+
onSubmit={handleSubmit}
68+
className="flex flex-col w-full items-center gap-2"
69+
>
70+
<Input
71+
type="text"
72+
placeholder="Enter prompt message here"
73+
onChange={e => setPrompt(e.target.value)}
74+
value={prompt}
75+
required
76+
/>
77+
<Button type="submit" className="w-full" disabled={loading}>
78+
{loading ? 'AI is thinking...' : 'Ask AI'}
79+
</Button>
80+
</form>
81+
{completion && (
82+
<p className="mt-4">
83+
<strong>Stream:</strong> {completion}
84+
</p>
85+
)}
86+
</div>
87+
);
88+
}

‎examples/nextjs/components/langbase/run.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
'use client';
2+
3+
import { Button } from '@/components/ui/button';
4+
import { Input } from '@/components/ui/input';
5+
import { useState } from 'react';
6+
7+
export default function RunNonStreamExample() {
8+
const [prompt, setPrompt] = useState('');
9+
const [completion, setCompletion] = useState('');
10+
const [loading, setLoading] = useState(false);
11+
12+
const handleSubmit = async (e: any) => {
13+
e.preventDefault();
14+
if (!prompt.trim()) return;
15+
16+
setLoading(true);
17+
try {
18+
const response = await fetch('/langbase/pipe/run', {
19+
method: 'POST',
20+
headers: {
21+
'Content-Type': 'application/json',
22+
},
23+
body: JSON.stringify({ prompt }),
24+
});
25+
26+
if (!response.ok) {
27+
throw new Error('Network response was not ok');
28+
}
29+
30+
const data = await response.json();
31+
setCompletion(data.completion);
32+
} catch (error) {
33+
console.error('Error:', error);
34+
setCompletion('An error occurred while generating the completion.');
35+
} finally {
36+
setLoading(false);
37+
}
38+
};
39+
40+
return (
41+
<div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full">
42+
<div className="flex flex-col gap-2 w-full">
43+
<p className="text-lg font-semibold">
44+
2. Generate Text{' '}
45+
<a
46+
className="text-indigo-500"
47+
href="https://langbase.com/docs/langbase-sdk/generate-text"
48+
>
49+
`pipe.run()`
50+
</a>{' '}
51+
with Route Handler
52+
</p>
53+
<p className="text-muted-foreground">
54+
Ask a prompt to generate a text completion.
55+
</p>
56+
</div>
57+
<form
58+
onSubmit={handleSubmit}
59+
className="flex flex-col w-full items-center gap-2"
60+
>
61+
<Input
62+
type="text"
63+
placeholder="Enter prompt message here"
64+
value={prompt}
65+
onChange={e => setPrompt(e.target.value)}
66+
required
67+
/>
68+
69+
<Button type="submit" className="w-full" disabled={loading}>
70+
{loading ? 'AI is thinking...' : 'Ask AI'}
71+
</Button>
72+
</form>
73+
74+
{!loading && completion && (
75+
<p className="mt-4">
76+
<strong>Generated completion:</strong> {completion}
77+
</p>
78+
)}
79+
</div>
80+
);
81+
}

‎examples/nextjs/components/langbase/stream-text.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
'use client';
22

3-
import {Button} from '@/components/ui/button';
4-
import {Input} from '@/components/ui/input';
5-
import {fromReadableStream} from 'langbase';
6-
import {useState} from 'react';
3+
import { Button } from '@/components/ui/button';
4+
import { Input } from '@/components/ui/input';
5+
import { fromReadableStream } from 'langbase';
6+
import { useState } from 'react';
77

88
export default function StreamTextExample() {
99
const [prompt, setPrompt] = useState('');
@@ -20,8 +20,8 @@ export default function StreamTextExample() {
2020
try {
2121
const response = await fetch('/langbase/pipe/stream-text', {
2222
method: 'POST',
23-
body: JSON.stringify({prompt}),
24-
headers: {'Content-Type': 'text/plain'},
23+
body: JSON.stringify({ prompt }),
24+
headers: { 'Content-Type': 'text/plain' },
2525
});
2626

2727
if (response.body) {
@@ -50,7 +50,7 @@ export default function StreamTextExample() {
5050
<div className="bg-neutral-200 rounded-md p-2 flex flex-col gap-2 w-full">
5151
<div className="flex flex-col gap-2 w-full">
5252
<p className="text-lg font-semibold">
53-
2. Stream Text{' '}
53+
4. Stream Text{' '}
5454
<a
5555
className="text-indigo-500"
5656
href="https://langbase.com/docs/langbase-sdk/stream-text"

0 commit comments

Comments
 (0)