improve streaming example in getting started guide (#691)

Author: agola11

docs/docs/getting-started/guide-chat.mdx

@@ -2,6 +2,9 @@
 sidebar_position: 3
 ---
 
+import CodeBlock from "@theme/CodeBlock";
+import Example from "@examples/models/chat/chat_streaming_stdout.ts";
+
 # Quickstart, using Chat Models
 
 Chat models are a variation on language models.
@@ -316,62 +319,4 @@ const chain = new ConversationChain({
 
 You can also use the streaming API to get words streamed back to you as they are generated. This is useful for eg. chatbots, where you want to show the user what is being generated as it is being generated. Note: OpenAI as of this writing does not support `tokenUsage` reporting while streaming is enabled.
 
-```typescript
-let s = "";
-const chatStreaming = new ChatOpenAI({
-  streaming: true,
-  callbackManager: CallbackManager.fromHandlers({
-    async handleLLMNewToken(token: string) {
-      console.clear();
-      s += token;
-      console.log(s);
-    },
-  }),
-});
-
-const responseD = await chatStreaming.call([
-  new HumanChatMessage("Write me a song about sparkling water."),
-]);
-```
-
-```
-Verse 1:
-Bubbles in the bottle,
-Light and refreshing,
-It's the drink that I love,
-My thirst quenching blessing.
-
-Chorus:
-Sparkling water, my fountain of youth,
-I can't get enough, it's the perfect truth,
-It's fizzy and fun, and oh so clear,
-Sparkling water, it's crystal clear.
-
-Verse 2:
-No calories or sugars,
-Just a burst of delight,
-It's the perfect cooler,
-On a hot summer night.
-
-Chorus:
-Sparkling water, my fountain of youth,
-I can't get enough, it's the perfect truth,
-It's fizzy and fun, and oh so clear,
-Sparkling water, it's crystal clear.
-
-Bridge:
-It's my happy place,
-In every situation,
-My daily dose of hydration,
-Always bringing satisfaction.
-
-Chorus:
-Sparkling water, my fountain of youth,
-I can't get enough, it's the perfect truth,
-It's fizzy and fun, and oh so clear,
-Sparkling water, it's crystal clear.
-
-Outro:
-Sparkling water, it's crystal clear,
-My love for you will never disappear.
-```
+<CodeBlock language="typescript">{Example}</CodeBlock>

docs/docs/getting-started/guide-llm.mdx

@@ -2,6 +2,9 @@
 sidebar_position: 2
 ---
 
+import CodeBlock from "@theme/CodeBlock";
+import Example from "@examples/models/llm/llm_streaming_stdout.ts";
+
 # Quickstart, using LLMs
 
 This tutorial gives you a quick walkthrough about building an end-to-end language model application with LangChain.
@@ -228,53 +231,4 @@ console.log(res2);
 
 You can also use the streaming API to get words streamed back to you as they are generated. This is useful for eg. chatbots, where you want to show the user what is being generated as it is being generated. Note: OpenAI as of this writing does not support `tokenUsage` reporting while streaming is enabled.
 
-```typescript
-const chat = new OpenAI({
-  streaming: true,
-  callbackManager: CallbackManager.fromHandlers({
-    async handleLLMNewToken(token: string) {
-      console.log(token);
-    },
-  }),
-});
-
-const response = await chat.call("Write me a song about sparkling water.");
-console.log(response);
-```
-
-```
-Verse 1
-
-On a hot summer day, I'm looking for a treat
-I'm thirsty for something cool and sweet
-When I open up the fridge, what do I see?
-A bottle of sparkling water, it's calling out to me
-
-Chorus
-
-Sparkling water, it's so refreshing
-It quenches my thirst, it's the perfect thing
-It's so light and bubbly, it's like a dream
-And I'm loving every sip of sparkling water
-
-Verse 2
-
-I take it out of the fridge and pour some in a glass
-It's so light and bubbly, I can feel the fizz
-I take a sip and suddenly I'm revived
-This sparkling water's just what I need to survive
-
-Chorus
-
-Sparkling water, it's so refreshing
-It quenches my thirst, it's the perfect thing
-It's so light and bubbly, it's like a dream
-And I'm loving every sip of sparkling water
-
-Bridge
-
-It's like drinking sunshine between my hands
-It's so light and bubbly, I'm in a trance
-The summer heat's no match for sparkling water
-It's my favorite
-```
+<CodeBlock language="typescript">{Example}</CodeBlock>

examples/src/models/chat/chat_streaming_stdout.ts

@@ -0,0 +1,38 @@
+import { CallbackManager } from "langchain/callbacks";
+import { ChatOpenAI } from "langchain/chat_models";
+import { HumanChatMessage } from "langchain/schema";
+
+export const run = async () => {
+  const chat = new ChatOpenAI({
+    streaming: true,
+    callbackManager: CallbackManager.fromHandlers({
+      async handleLLMNewToken(token: string) {
+        process.stdout.write(token);
+      },
+    }),
+  });
+
+  await chat.call([
+    new HumanChatMessage("Write me a song about sparkling water."),
+  ]);
+  /*
+    Verse 1:
+    Bubbles rise, crisp and clear
+    Refreshing taste that brings us cheer
+    Sparkling water, so light and pure
+    Quenches our thirst, it's always secure
+
+    Chorus:
+    Sparkling water, oh how we love
+    Its fizzy bubbles and grace above
+    It's the perfect drink, anytime, anyplace
+    Refreshing as it gives us a taste
+
+    Verse 2:
+    From morning brunch to evening feast
+    It's the perfect drink for a treat
+    A sip of it brings a smile so bright
+    Our thirst is quenched in just one sip so light
+    ...
+    */
+};

examples/src/models/llm/llm_streaming_stdout.ts

@@ -0,0 +1,37 @@
+import { CallbackManager } from "langchain/callbacks";
+import { OpenAI } from "langchain/llms";
+
+export const run = async () => {
+  // To enable streaming, we pass in `streaming: true` to the LLM constructor.
+  // Additionally, we pass in a `CallbackManager` with a handler set up for the `handleLLMNewToken` event.
+  const chat = new OpenAI({
+    streaming: true,
+    callbackManager: CallbackManager.fromHandlers({
+      async handleLLMNewToken(token: string) {
+        process.stdout.write(token);
+      },
+    }),
+  });
+
+  await chat.call("Write me a song about sparkling water.");
+  /*
+    Verse 1
+    Crystal clear and made with care
+    Sparkling water on my lips, so refreshing in the air
+    Fizzy bubbles, light and sweet
+    My favorite beverage I can’t help but repeat
+
+    Chorus
+    A toast to sparkling water, I’m feeling so alive
+    Let’s take a sip, and let’s take a drive
+    A toast to sparkling water, it’s the best I’ve had in my life
+    It’s the best way to start off the night
+
+    Verse 2
+    It’s the perfect drink to quench my thirst
+    It’s the best way to stay hydrated, it’s the first
+    A few ice cubes, a splash of lime
+    It will make any day feel sublime
+    ...
+   */
+};