useChat React Hook

# Backend
pip install fastapi uvicorn dedalus-labs python-dotenv

# Frontend
pnpm add dedalus-react dedalus-labs react

# server.py
import json
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware
from dotenv import load_dotenv

from dedalus_labs import AsyncDedalus
from dedalus_labs.lib.runner import DedalusRunner

load_dotenv()

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["POST"],
    allow_headers=["*"],
)

client = AsyncDedalus()
runner = DedalusRunner(client)


@app.post("/api/chat")
async def chat(request: Request):
    body = await request.json()
    messages = body.get("messages", [])
    model = body.get("model", "openai/gpt-5.2")

    stream = runner.run(
        messages=messages,
        model=model,
        stream=True,
    )

    async def generate():
        async for chunk in stream:
            yield f"data: {chunk.model_dump_json()}\n\n"
        yield "data: [DONE]\n\n"

    return StreamingResponse(
        generate(),
        media_type="text/event-stream",
        headers={
            "Cache-Control": "no-cache",
            "Connection": "keep-alive",
        },
    )


if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

// App.tsx
import { useChat } from "dedalus-react";
import { useState } from "react";

function Chat() {
	const [input, setInput] = useState("");

	const { messages, sendMessage, status, stop } = useChat({
		transport: { api: "http://localhost:8000/api/chat" },
	});

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		if (!input.trim()) return;
		sendMessage(input);
		setInput("");
	};

	return (
		<div>
			<div className="messages">
				{messages.map((msg, i) => (
					<div key={i} className={`message ${msg.role}`}>
						<strong>{msg.role}:</strong> {msg.content}
					</div>
				))}
			</div>

			<form onSubmit={handleSubmit}>
				<input
					value={input}
					onChange={(e) => setInput(e.target.value)}
					placeholder="Type a message..."
					disabled={status === "streaming"}
				/>
				<button type="submit" disabled={status === "streaming"}>
					Send
				</button>
				{status === "streaming" && (
					<button type="button" onClick={stop}>
						Stop
					</button>
				)}
			</form>
		</div>
	);
}

export default Chat;

import { useChat } from "dedalus-react";

function ChatWithTools() {
	const { messages, sendMessage, addToolResult } = useChat({
		transport: { api: "/api/chat" },

		// जब model किसी tool का अनुरोध करता है तो कॉल किया जाता है
		onToolCall: async ({ toolCall }) => {
			if (toolCall.function.name === "get_user_location") {
				// क्लाइंट-साइड पर निष्पादित करें (उदा., ब्राउज़र जियोलोकेशन)
				const position = await new Promise<GeolocationPosition>((resolve) =>
					navigator.geolocation.getCurrentPosition(resolve),
				);

				addToolResult({
					toolCallId: toolCall.id,
					result: {
						lat: position.coords.latitude,
						lng: position.coords.longitude,
					},
				});
			}
		},

		// tool परिणामों के बाद स्वतः जारी रखें
		sendAutomaticallyWhen: ({ messages }) => {
			const last = messages[messages.length - 1];
			return last?.role === "assistant" && last.tool_calls?.length > 0;
		},
	});

	// ... कंपोनेंट का शेष भाग
}

const [model, setModel] = useState("openai/gpt-5.2");

const { messages, sendMessage } = useChat({
	transport: {
		api: "/api/chat",
		body: { model }, // प्रत्येक अनुरोध में मर्ज किया जाता है
	},
});

@app.post("/api/chat")
async def chat(request: Request):
    body = await request.json()
    messages = body.get("messages", [])
    model = body.get("model", "openai/gpt-5.2")  # बॉडी से पढ़ा गया

    stream = runner.run(messages=messages, model=model, stream=True)
    # ...

# टर्मिनल 1: बैकएंड प्रारंभ करें
python server.py

# टर्मिनल 2: फ्रंटएंड प्रारंभ करें
cd frontend && pnpm dev