From 0028b41fe38612b30ca6cb73ea51e8ff0e6f2e2e Mon Sep 17 00:00:00 2001
From: Arya Dasgupta <aryadasgupta2004@gmail.com>
Date: Wed, 28 Jan 2026 16:31:28 +0530
Subject: [PATCH] docs: add example for streaming with function calling (#2365)

* docs: add example for streaming with function calling

* Minor fix and add example to playground

---------

Co-authored-by: Reynaldi Chernando <reynaldichernando@gmail.com>
---
 src/docs/src/AI/chat.md                       | 82 +++++++++++++++++++
 src/docs/src/examples.js                      |  6 ++
 .../ai-streaming-function-calling.html        | 77 +++++++++++++++++
 3 files changed, 165 insertions(+)
 create mode 100644 src/docs/src/playground/examples/ai-streaming-function-calling.html
diff --git a/src/docs/src/AI/chat.md b/src/docs/src/AI/chat.md
index 7a7faa0dc..8a1f86377 100755
--- a/src/docs/src/AI/chat.md
+++ b/src/docs/src/AI/chat.md
@@ -270,6 +270,88 @@ List of OpenAI models that support the web search can be found in their [API com
 </html>
 ```
 
+<strong class="example-title">Streaming Function Calling</strong>
+
+```html;ai-streaming-function-calling
+<html>
+<body>
+    <script src="https://js.puter.com/v2/"></script>
+    <script>
+        // Define the tool
+        const tools = [{
+            type: "function",
+            function: {
+                name: "get_weather",
+                description: "Get current weather for a location",
+                parameters: {
+                    type: "object",
+                    properties: {
+                        location: { type: "string", description: "City name" }
+                    },
+                    required: ["location"]
+                }
+            }
+        }];
+
+        // Mock weather function
+        function getWeather(location) {
+            return `The weather in ${location} is 22°C and Sunny.`;
+        }
+
+        (async () => {
+            const question = "What's the weather in Paris?";
+            puter.print(`Question: ${question}<br/>`);
+
+            // 1. Call AI with stream: true AND tools
+            const response = await puter.ai.chat(question, { 
+                tools,
+                stream: true 
+            });
+
+            // 2. Iterate through the stream
+            for await (const part of response) {
+                
+                // Standard Text Stream
+                if (part.type === 'text') {
+                    puter.print(part.text);
+                }
+                
+                // Tool Call Detected
+                else if (part.type === 'tool_use') {
+                    const toolCall = part;
+                    const funcName = toolCall.name;
+                    const args = toolCall.input; // Already parsed: { location: "Paris" }
+
+                    puter.print(`<br/>[System] Calling tool: ${funcName} with args: ${JSON.stringify(args)}<br/>`);
+
+                    // Execute the local function
+                    let result;
+                    if (funcName === 'get_weather') {
+                        result = getWeather(args.location);
+                    }
+
+                    // Send the tool result back to the AI to get the final answer
+                    const finalResponse = await puter.ai.chat([
+                        { role: "user", content: question },
+                        { role: "assistant", tool_calls: [{
+                            id: toolCall.id,
+                            type: "function",
+                            function: { name: funcName, arguments: JSON.stringify(args) }
+                        }]},
+                        { role: "tool", tool_call_id: toolCall.id, content: result }
+                    ], { stream: true });
+
+                    for await (const finalPart of finalResponse) {
+                        if (finalPart.text) puter.print(finalPart.text);
+                    }
+                }
+            }
+        })();
+    </script>
+</body>
+</html>
+```
+
 <strong class="example-title">Web Search</strong>
 
 ```html;ai-web-search
diff --git a/src/docs/src/examples.js b/src/docs/src/examples.js
index e6b6ad76d..f2fe775c8 100644
--- a/src/docs/src/examples.js
+++ b/src/docs/src/examples.js
@@ -67,6 +67,12 @@ const examples = [
                 slug: 'ai-function-calling',
                 source: '/playground/examples/ai-function-calling.html',
             },
+            {
+                title: 'Streaming Function Calls',
+                description: 'Run AI function calling with streaming using Puter.js. Try out AI examples directly in Puter.js playground.',
+                slug: 'ai-streaming-function-calling',
+                source: '/playground/examples/ai-streaming-function-calling.html',
+            },
             {
                 title: 'Web Search',
                 description: 'Perform web search using AI to generate accurate and up-to-date information. Try out this example in Puter.js playground.',
diff --git a/src/docs/src/playground/examples/ai-streaming-function-calling.html b/src/docs/src/playground/examples/ai-streaming-function-calling.html
new file mode 100644
index 000000000..c782c59ec
--- /dev/null
+++ b/src/docs/src/playground/examples/ai-streaming-function-calling.html
@@ -0,0 +1,77 @@
+<html>
+<body>
+    <script src="https://js.puter.com/v2/"></script>
+    <script>
+        // Define the tool
+        const tools = [{
+            type: "function",
+            function: {
+                name: "get_weather",
+                description: "Get current weather for a location",
+                parameters: {
+                    type: "object",
+                    properties: {
+                        location: { type: "string", description: "City name" }
+                    },
+                    required: ["location"]
+                }
+            }
+        }];
+
+        // Mock weather function
+        function getWeather(location) {
+            return `The weather in ${location} is 22°C and Sunny.`;
+        }
+
+        (async () => {
+            const question = "What's the weather in Paris?";
+            puter.print(`Question: ${question}<br/>`);
+
+            // 1. Call AI with stream: true AND tools
+            const response = await puter.ai.chat(question, { 
+                tools,
+                stream: true 
+            });
+
+            // 2. Iterate through the stream
+            for await (const part of response) {
+                
+                // Standard Text Stream
+                if (part.type === 'text') {
+                    puter.print(part.text);
+                }
+                
+                // Tool Call Detected
+                else if (part.type === 'tool_use') {
+                    const toolCall = part;
+                    const funcName = toolCall.name;
+                    const args = toolCall.input; // Already parsed: { location: "Paris" }
+
+                    puter.print(`<br/>[System] Calling tool: ${funcName} with args: ${JSON.stringify(args)}<br/>`);
+
+                    // Execute the local function
+                    let result;
+                    if (funcName === 'get_weather') {
+                        result = getWeather(args.location);
+                    }
+
+                    // Send the tool result back to the AI to get the final answer
+                    const finalResponse = await puter.ai.chat([
+                        { role: "user", content: question },
+                        { role: "assistant", tool_calls: [{
+                            id: toolCall.id,
+                            type: "function",
+                            function: { name: funcName, arguments: JSON.stringify(args) }
+                        }]},
+                        { role: "tool", tool_call_id: toolCall.id, content: result }
+                    ], { stream: true });
+
+                    for await (const finalPart of finalResponse) {
+                        if (finalPart.text) puter.print(finalPart.text);
+                    }
+                }
+            }
+        })();
+    </script>
+</body>
+</html>
\ No newline at end of file
