Function PipeRunMemory

examples/nextjs/components/pipe-run-with-memory.tsx:8–99

()

import {useState} from 'react';

export default function PipeRunMemory() {
	const [prompt, setPrompt] = useState(
		'Who founded Langbase, when, and why?',
	);
	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('/api/langbase/pipes/run-memory', {
				method: 'POST',
				headers: {'Content-Type': 'application/json'},
				// Send prompt as an LLM message.
				body: JSON.stringify({
					messages: [{role: 'user', content: prompt}],
					stream: true,
				}),
			});

			if (response.body) {
				// Convert the stream to a stream runner.
				const runner = getRunner(response.body);

				// Method 1: Using event listeners
				runner.on('connect', () => {
					console.log('Stream started.\n');
				});

				runner.on('content', content => {
					setCompletion(prev => prev + content);
				});

				runner.on('end', () => {
					console.log('\nStream ended.');
				});

				runner.on('error', error => {
					console.error('Error:', error);
				});

				console.dir(await runner.finalChatCompletion(), {depth: null});

				// Method #2 to get all of the chunk.
				// for await (const chunk of runner) {
				// 	const content = chunk?.choices[0]?.delta?.content;
				// 	content && setCompletion(prev => prev + content);
				// }
			}
		} catch (error) {
			setLoading(false);
			console.error('Error:', error);
		} finally {