👌 IMPROVE: Examples

examples/everything/generate-text.ts

@@ -5,12 +5,12 @@ import {Pipe} from 'langbase';
 console.log('STREAM-OFF: generateText()');
 
 // 1. Initiate the Pipe.
-const pipeStreamOff = new Pipe({
+const pipe = new Pipe({
 	apiKey: process.env.PIPE_LESS_WORDY!,
 });
 
 // 3. Generate the text by asking a question.
-const result = await pipeStreamOff.generateText({
+const result = await pipe.generateText({
 	messages: [{role: 'user', content: 'Who is an AI Engineer?'}],
 });
 

examples/everything/index.ts

@@ -5,28 +5,25 @@ import {Pipe} from 'langbase';
 console.log('STREAM-OFF: generateText()');
 
 // 1. Initiate the Pipe.
-const pipeStreamOff = new Pipe({
+const pipe = new Pipe({
 	apiKey: process.env.PIPE_LESS_WORDY!,
 });
 
 // 3. Generate the text by asking a question.
-const result = await pipeStreamOff.generateText({
+const result = await pipe.generateText({
 	messages: [{role: 'user', content: 'Who is an AI Engineer?'}],
 });
 
 // 4. Done: You got the generated completion.
 console.log(result.completion);
 
+// ======= OR ======== //
+
 // STREAM: ON
 console.log('STREAM-ON: streamText()');
 
-// 1. Initiate the Pipe.
-const pipeStreaming = new Pipe({
-	apiKey: process.env.PIPE_LESS_WORDY_STREAM!,
-});
-
 // 2. Generate a stream by asking a question
-const stream = await pipeStreaming.streamText({
+const stream = await pipe.streamText({
 	messages: [{role: 'user', content: 'Who is an AI Engineer?'}],
 });
 

examples/everything/stream-text.ts

@@ -5,12 +5,12 @@ import {Pipe} from 'langbase';
 console.log('STREAM-ON: streamText()');
 
 // 1. Initiate the Pipe.
-const pipeStreaming = new Pipe({
+const pipe = new Pipe({
 	apiKey: process.env.PIPE_LESS_WORDY!,
 });
 
 // 2. Generate a stream by asking a question
-const stream = await pipeStreaming.streamText({
+const stream = await pipe.streamText({
 	messages: [{role: 'user', content: 'Who is an AI Engineer?'}],
 });
 

examples/nextjs/app/page.tsx

@@ -1,5 +1,5 @@
-import GenerateTextRouteHandler from '@/components/langbase/generate-text-route-handler';
-import StreamTextRouteHandler from '@/components/langbase/stream-text-route-handler';
+import GenerateTextExample from '@/components/langbase/generate-text';
+import StreamTextExample from '@/components/langbase/stream-text';
 
 export default function Home() {
 	return (
@@ -13,8 +13,8 @@ export default function Home() {
 						An AI agent that responds to your prompts.
 					</p>
 				</div>
-				<GenerateTextRouteHandler />
-				<StreamTextRouteHandler />
+				<GenerateTextExample />
+				<StreamTextExample />
 			</div>
 		</div>
 	);

examples/nextjs/components/langbase/generate-text-route-handler.tsx → examples/nextjs/components/langbase/generate-text.tsx

@@ -4,7 +4,7 @@ import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {useState} from 'react';
 
-export default function GenerateTextRouteHandler() {
+export default function GenerateTextExample() {
 	const [prompt, setPrompt] = useState('');
 	const [completion, setCompletion] = useState('');
 	const [loading, setLoading] = useState(false);

examples/nextjs/components/langbase/stream-text-route-handler.tsx → examples/nextjs/components/langbase/stream-text.tsx

@@ -3,9 +3,9 @@
 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';
+import {fromReadableStream} from '../../../../packages/langbase/src/lib/browser/stream';
 
-export default function StreamTextRouteHandler() {
+export default function StreamTextExample() {
 	const [prompt, setPrompt] = useState('');
 	const [completion, setCompletion] = useState('');
 	const [loading, setLoading] = useState(false);
@@ -26,6 +26,7 @@ export default function StreamTextRouteHandler() {
 
 			if (response.body) {
 				const stream = fromReadableStream(response.body);
+				console.log('✨ ~ stream:', stream);
 
 				// Method #1 to get all of the chunk.
 				for await (const chunk of stream) {
@@ -34,7 +35,7 @@ export default function StreamTextRouteHandler() {
 					content && setCompletion(prev => prev + content);
 				}
 
-				// Method #2 to get only the chunk's content as delta of the chunks
+				// // Method #2 to get only the chunk's content as delta of the chunks
 				// stream.on('content', content => {
 				// setCompletion(prev => prev + content);
 				// });

packages/langbase/src/pipes/pipes.ts

@@ -78,7 +78,7 @@ export class Pipe {
 		return this.request.post<GenerateStreamResponse>({
 			endpoint: '/beta/generate',
 			body: {...options, stream: true},
-			stream: true,
+			stream: true, // TODO: @ahmadbilaldev - why we need to add here as well?
 		});
 	}
 }