useChat React Hook

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

# 前端
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="输入消息..."
          disabled={status === "streaming"}
        />
        <button type="submit" disabled={status === "streaming"}>
          发送
        </button>
        {status === "streaming" && (
          <button type="button" onClick={stop}>
            停止
          </button>
        )}
      </form>
    </div>
  );
}

export default Chat;

import { useChat } from "dedalus-react";

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

    // 当模型请求 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)
    # ...

# Terminal 1: Start backend
python server.py

# Terminal 2: Start frontend
cd frontend && pnpm dev