基于AI的软件界面:用CopilotKit打造智能交互应用

import osfrom typing import Anyfrom fastapi import FastAPIfrom ag_ui_adk import ADKAgent, add_adk_fastapi_endpointfrom google.adk.agents import LlmAgentfrom google.adk.models import lite_llm as adk_lite_llmfrom google.adk.models.lite_llm import LiteLlmfrom dotenv import load_dotenvfrom tools import get_city_card, get_weatherload_dotenv()MODEL_NAME = os.getenv("MODEL_NAME", "openai/mistral-7b-instruct")if MODEL_NAME.startswith("openai/") and not os.getenv("OPENAI_API_KEY"):    raise RuntimeError(        "Missing OPENAI_API_KEY. Set it before running, for example:\n"        "export OPENAI_API_KEY='your_key'\n"        "uv run main.py"    )def patch_litellm_tool_call_messages() -> None:    """Drops assistant text when a LiteLLM message also contains tool calls.    Some LiteLLM streaming responses surface an assistant message with both    `content` and `tool_calls`. OpenAI-compatible chat endpoints reject that    shape on the next turn, requiring exactly one of the two fields.    ADK converts that message back into chat history, so we normalize it here by    preserving the tool calls and discarding the assistant text for that turn.    """    if getattr(adk_lite_llm, "_my_agent2_tool_call_patch", False):        return    original_split = adk_lite_llm._split_message_content_and_tool_calls    def _patched_split_message_content_and_tool_calls(        message: Any,    ) -> tuple[Any, list[Any]]:        content, tool_calls = original_split(message)        if tool_calls:            return None, tool_calls        return content, tool_calls    adk_lite_llm._split_message_content_and_tool_calls = (        _patched_split_message_content_and_tool_calls    )    adk_lite_llm._my_agent2_tool_call_patch = Truepatch_litellm_tool_call_messages()agent = LlmAgent(    name="assistant",    # model="gemini-2.5-flash",    model=LiteLlm(model=MODEL_NAME),    instruction=(        "Be helpful and fun. "        "When user asks for a city card/city profile, do not invent city data inside tools. "        "Generate city facts with the model, then call get_city_card with fields: "        "city_name, country, population, description, accent_color. "        "For weather-only requests, call get_weather."    ),    tools=[get_weather, get_city_card], # 这两个工具函数自己写，要求返回固定格式就行)adk_agent = ADKAgent(    adk_agent=agent,    app_name="demo_app",    user_id="demo_user",    session_timeout_seconds=3600,    use_in_memory_services=True)app = FastAPI()add_adk_fastapi_endpoint(app, adk_agent, path="/")if __name__ == "__main__":    import uvicorn    port = int(os.getenv("PORT", "8000"))    uvicorn.run(app, host="localhost", port=port)

1. 安装前端依赖：@copilotkit/react-ui、@copilotkit/react-core、@copilotkit/runtime、@ag-ui/client，先保证聊天 UI、运行时和 Agent 连接能力齐全。2. 建立 CopilotKit API 路由：在 Next.js 里创建 /api/copilotkit，用 CopilotRuntime + HttpAgent({ url: "http://localhost:8000/" }) 把前端请求转发到你的后端 Agent。3. 页面接入聊天入口：在页面放 CopilotSidebar（或你选择的 CopilotKit UI 组件），让用户先能完成“提问→响应”闭环。4. 捕获工具结果而不是只看文本：用 useDefaultRenderTool 拿到 name / parameters / status / result，这是做可视化 UI 的关键数据源。5. 做一层结果归一化：把工具返回统一成前端数据模型（例如 toolName + status + resultText + 业务字段），避免不同工具返回格式不一致导致渲染混乱。6. 模板驱动渲染：根据 toolName 切换模板（如天气模板/城市模板），由统一渲染器按 path 绑定字段渲染卡片。7. 补上交互动作：在模板里定义按钮 action（如 showWeather），页面收到 action 后更新状态并触发二次渲染，实现“聊天 + 可操作 UI”。