👌 IMPROVE: Examples and Nextjs

ahmadawais · ahmadawais · commit d70f76f85b98 · 2024-07-27T10:12:26.000-07:00
diff --git a/examples/everything/.env.example b/examples/everything/.env.example
@@ -1,3 +1,2 @@
 # Pipes.
 PIPE_LESS_WORDY=""
-PIPE_LESS_WORDY_STREAM=""
diff --git a/examples/everything/stream-text.ts b/examples/everything/stream-text.ts
@@ -6,7 +6,7 @@ console.log('STREAM-ON: streamText()');
 
 // 1. Initiate the Pipe.
 const pipeStreaming = new Pipe({
-	apiKey: process.env.PIPE_LESS_WORDY_STREAM!,
+	apiKey: process.env.PIPE_LESS_WORDY!,
 });
 
 // 2. Generate a stream by asking a question
diff --git a/examples/nextjs/.env.local.example b/examples/nextjs/.env.local.example
@@ -0,0 +1,3 @@
+# !! SERVER SIDE ONLY !!
+# Pipes.
+LANGBASE_PIPE_LESS_WORDY=""
diff --git a/examples/nextjs/app/api/langbase/pipe/stream-text/route.ts b/examples/nextjs/app/api/langbase/pipe/stream-text/route.ts
@@ -1,35 +1,21 @@
-import {Pipe} from 'langbase';
-import {NextRequest} from 'next/server';
+// import {Pipe} from 'langbase';
+import {Pipe} from './../../../../../../../packages/langbase/src/';
 
-export const runtime = 'edge';
+import {NextRequest} from 'next/server';
 
 export async function POST(req: NextRequest) {
 	const {prompt} = await req.json();
 
 	// 1. Initiate the Pipe.
 	const pipe = new Pipe({
-		apiKey: process.env.LANGBASE_PIPE_LESS_WORDY_STREAM!,
+		apiKey: process.env.LANGBASE_PIPE_LESS_WORDY!,
 	});
 
 	// 2. Generate a stream by asking a question
 	const stream = await pipe.streamText({
 		messages: [{role: 'user', content: prompt}],
 	});
 
-	// 3. Create a ReadableStream from the Langbase stream
-	const readableStream = new ReadableStream({
-		async start(controller) {
-			for await (const chunk of stream) {
-				controller.enqueue(JSON.stringify(chunk) + '\n');
-			}
-			controller.close();
-		},
-	});
-
-	// 4. Return the stream
-	return new Response(readableStream, {
-		headers: {
-			'Content-Type': 'application/x-ndjson',
-		},
-	});
+	// 3. Done, return the stream in a readable stream format.
+	return new Response(stream.toReadableStream());
 }
diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
@@ -1,3 +1,4 @@
+import GenerateTextRouteHandler from '@/components/langbase/generate-text-route-handler';
 import StreamTextRouteHandler from '@/components/langbase/stream-text-route-handler';
 
 export default function Home() {
@@ -12,9 +13,8 @@ export default function Home() {
 						An AI agent that responds to your prompts.
 					</p>
 				</div>
-				{/* <GenerateTextRouteHandler /> */}
+				<GenerateTextRouteHandler />
 				<StreamTextRouteHandler />
-				{/* <GenerateTextServerAction /> */}
 			</div>
 		</div>
 	);
diff --git a/examples/nextjs/components/langbase/action.ts b/examples/nextjs/components/langbase/action.ts
diff --git a/examples/nextjs/components/langbase/generate-text-route-handler.tsx b/examples/nextjs/components/langbase/generate-text-route-handler.tsx
@@ -38,7 +38,7 @@ export default function GenerateTextRouteHandler() {
 	};
 
 	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. Generate Text{' '}
@@ -76,6 +76,6 @@ export default function GenerateTextRouteHandler() {
 					<strong>Completion:</strong> {completion}
 				</p>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/examples/nextjs/components/langbase/generate-text-server-action.tsx b/examples/nextjs/components/langbase/generate-text-server-action.tsx
diff --git a/examples/nextjs/components/langbase/stream-text-route-handler.tsx b/examples/nextjs/components/langbase/stream-text-route-handler.tsx
@@ -3,77 +3,55 @@
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {useState} from 'react';
+import {fromReadableStream} from './../../../../packages/langbase/src/lib/browser/stream';
 
-export default function ExampleGenerateTextRouteHandler() {
+export default function StreamTextRouteHandler() {
 	const [prompt, setPrompt] = useState('');
 	const [completion, setCompletion] = useState('');
 	const [loading, setLoading] = useState(false);
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
-		if (!prompt.trim()) return;
+		if (!prompt.trim() || loading) return;
 
 		setLoading(true);
 		setCompletion('');
 
 		try {
 			const response = await fetch('/api/langbase/pipe/stream-text', {
 				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({prompt: prompt}),
+				body: JSON.stringify({prompt}),
+				headers: {'Content-Type': 'text/plain'},
 			});
 
-			if (!response.ok) {
-				throw new Error('Network response was not ok');
-			}
-
-			const reader = response.body?.getReader();
-
-			if (!reader) {
-				throw new Error('Unable to read stream');
-			}
-
-			const decoder = new TextDecoder();
-			let buffer = '';
-
-			while (true) {
-				const {done, value} = await reader.read();
-				if (done) break;
+			if (response.body) {
+				const stream = fromReadableStream(response.body);
 
-				buffer += decoder.decode(value, {stream: true});
-				const lines = buffer.split('\n');
-				buffer = lines.pop() || '';
-
-				for (const line of lines) {
-					if (line.trim()) {
-						const chunk = JSON.parse(line);
-						const content = chunk.choices[0]?.delta?.content || '';
-						setCompletion(prev => prev + content);
-					}
+				// Method #1 to get all of the chunk.
+				for await (const chunk of stream) {
+					console.log('✨ ~ chunk:', chunk);
+					const content = chunk?.choices[0]?.delta?.content;
+					content && setCompletion(prev => prev + content);
 				}
-			}
 
-			// Process any remaining data in the buffer
-			if (buffer.trim()) {
-				const chunk = JSON.parse(buffer);
-				const content = chunk.choices[0]?.delta?.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);
-			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{' '}
+					2. Stream Text{' '}
 					<a
 						className="text-indigo-500"
 						href="https://langbase.com/docs"
@@ -97,17 +75,15 @@ export default function ExampleGenerateTextRouteHandler() {
 					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>Completion:</strong> {completion}
+					<strong>Stream:</strong> {completion}
 				</p>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -16,6 +16,7 @@
     "lucide-react": "^0.416.0",
     "mxcn": "^2.0.0",
     "next": "14.2.5",
+    "openai": "^4.53.0",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
diff --git a/packages/langbase/.env.example b/packages/langbase/.env.example
@@ -1 +1,2 @@
-OPENAI_API_KEY=
+# Pipes.
+PIPE_LESS_WORDY=
diff --git a/packages/langbase/package.json b/packages/langbase/package.json
@@ -29,6 +29,7 @@
 	},
 	"dependencies": {
 		"dotenv": "^16.4.5",
+		"openai": "^4.53.0",
 		"zod": "^3.23.8",
 		"zod-validation-error": "^3.3.0"
 	},
diff --git a/packages/langbase/src/common/stream.ts b/packages/langbase/src/common/stream.ts
@@ -17,7 +17,7 @@ export class Stream<Item> implements AsyncIterable<Item> {
 	}
 
 	/**
-	 * Creates a stream from a Server-Sent Events (SSE) response.
+	 * Creates a stream of AsyncIterator from a Server-Sent Events (SSE) response.
 	 *
 	 * @template Item - The type of items in the stream.
 	 * @param {Response} response - The SSE response object.
@@ -104,8 +104,6 @@ export class Stream<Item> implements AsyncIterable<Item> {
 	}
 
 	/**
-	 * Creates a stream from a readable stream and an abort controller.
-	 *
 	 * Generates a Stream from a newline-separated ReadableStream
 	 * where each item is a JSON value.
 	 *
@@ -198,8 +196,7 @@ export class Stream<Item> implements AsyncIterable<Item> {
 
 	/**
 	 * Converts this stream to a newline-separated ReadableStream of
-	 * JSON stringified values in the stream
-	 * which can be turned back into a Stream with `Stream.fromReadableStream()`.
+	 * JSON stringified values in the stream which can be turned back into a Stream with `Stream.fromReadableStream()`.
 	 */
 	toReadableStream(): ReadableStream {
 		const self = this;
diff --git a/packages/langbase/src/lib/browser/stream.ts b/packages/langbase/src/lib/browser/stream.ts
@@ -0,0 +1,5 @@
+import {ChatCompletionStream} from 'openai/lib/ChatCompletionStream';
+
+export const fromReadableStream = (readableStream: ReadableStream) => {
+	return ChatCompletionStream.fromReadableStream(readableStream);
+};
diff --git a/packages/langbase/src/lib/post.ts b/packages/langbase/src/lib/post.ts
diff --git a/packages/langbase/src/pipes/example.ts b/packages/langbase/src/pipes/example.ts
diff --git a/packages/langbase/src/pipes/pipes.ts b/packages/langbase/src/pipes/pipes.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`# Pipes.`
`2`	`2`	`PIPE_LESS_WORDY=""`
`3`		`-PIPE_LESS_WORDY_STREAM=""`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# !! SERVER SIDE ONLY !!`
	`2`	`+# Pipes.`
	`3`	`+LANGBASE_PIPE_LESS_WORDY=""`