docs: add register function example in react

[jamsea]

No description provided.

[Copilot]

Pull Request Overview

This PR adds an example of function calling in a React chatbot application, demonstrating both server-side function registration with OpenAI LLM and client-side function call handling.

Key changes:

• Added weather function registration and schema definition on the server side
• Implemented client-side function call handler for weather API calls
• Updated code formatting and import organization

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
simple-chatbot/server/bot-openai.py	Adds weather function registration, schema definition, and tools configuration for OpenAI LLM
simple-chatbot/client/react/src/components/DebugDisplay.tsx	Implements client-side function call handler and updates code formatting

[Copilot]

The hardcoded weather data ('nice' and '75') should be replaced with actual API calls or at minimum made configurable. This magic data makes the function misleading as it appears to fetch real weather but always returns the same values.

[Copilot]

Function registration should be moved inside a useEffect hook to prevent re-registration on every render. The current implementation will register the handler multiple times unnecessarily.

Suggested change

	if (client) {
	client.registerFunctionCallHandler("get_current_weather", async (fn) => {
	// Log the function call and its arguments
	if (fn && fn.arguments) {
	const location = fn.arguments.location || "unknown location";
	const format = fn.arguments.format || "fahrenheit";
	const result = {
	conditions: "sunny",
	temperature: format === "celsius" ? "24" : "75",
	};
	log(
	`FunctionCall: get_current_weather for ${location} (${format}) → ${JSON.stringify(
	result
	)}`
	);
	return result;
	}
	log("FunctionCall: get_current_weather called with no arguments");
	return { conditions: "unknown", temperature: "unknown" };
	});
	}
	useEffect(() => {
	if (client) {
	client.registerFunctionCallHandler("get_current_weather", async (fn) => {
	// Log the function call and its arguments
	if (fn && fn.arguments) {
	const location = fn.arguments.location || "unknown location";
	const format = fn.arguments.format || "fahrenheit";
	const result = {
	conditions: "sunny",
	temperature: format === "celsius" ? "24" : "75",
	};
	log(
	`FunctionCall: get_current_weather for ${location} (${format}) → ${JSON.stringify(
	result
	)}`
	);
	return result;
	}
	log("FunctionCall: get_current_weather called with no arguments");
	return { conditions: "unknown", temperature: "unknown" };
	});
	}
	}, [client, log]);

[Copilot]

The hardcoded weather response ('sunny', '24', '75') should be replaced with actual weather API calls or clearly documented as mock data for demonstration purposes.

[markbackman]

I want to keep this example simple. It's linked as the first "intermediate" level example. We can create separate examples showing how to do different things.

As for the change, I'm not sure we want to endorse function calling using this pattern. The best practice is that the server-side does the heavy lifting. A good example would be:

• User asks for the weather
• Tool is called
• Client provides location from device, sends back to server
• API call to weather is made on the server side using the user's location
• bot responds with this info

I think @mattieruth built something like this in working on the new client SDK.