Use pydantic-ai's new to_web method (#8)

Co-authored-by: Petyo Ivanov <underlog@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 3 people

README.md

@@ -5,10 +5,7 @@ Example React frontend for Pydantic AI Chat using [Vercel AI Elements](https://v
 ## Dev
 
 ```sh
-npm install
-npm run dev
-
-# stop your logfire platform, to avoid port 8000 conflicts
-
-cd agent && uv run uvicorn chatbot.server:app
+pnpm install
+pnpm run dev:server # start the python example backend
+pnpm run dev
 ```

agent/chatbot/agent.py

@@ -2,18 +2,11 @@
 
 import pydantic_ai
 
-import logfire
-from chatbot.data import get_docs_dir, get_markdown, get_table_of_contents
+from chatbot.data import Repo, get_docs_dir, get_markdown, get_table_of_contents
 from chatbot.db import open_populated_table
 
-from chatbot.data import Repo
-
-logfire.configure(send_to_logfire='if-token-present', console=False)
-logfire.instrument_pydantic_ai()
-
 
 agent = pydantic_ai.Agent(
-    'anthropic:claude-sonnet-4-0',
     instructions="Help the user answer questions about two products ('repos'): Pydantic AI (pydantic-ai), an open source agent framework library, and Pydantic Logfire (logfire), an observability platform. Start by using the `search_docs` tool to search the relevant documentation and answer the question based on the search results. It uses a hybrid of semantic and keyword search, so writing either keywords or sentences may work. It's not searching google. Each search result starts with a path to a .md file. The file `foo/bar.md` corresponds to the URL `https://ai.pydantic.dev/foo/bar/` for Pydantic AI, `https://logfire.pydantic.dev/docs/foo/bar/` for Logfire. Include the URLs in your answer. The search results may not return complete files, or may not return the files you need. If they don't have what you need, you can use the `get_docs_file` tool. You probably only need to search once or twice, definitely not more than 3 times. The user doesn't see the search results, you need to actually return a summary of the info. To see the files that exist for the `get_docs_file` tool, along with a preview of the sections within, use the `get_table_of_contents` tool.",
 )
 

agent/chatbot/server.py

@@ -1,132 +1,28 @@
 from __future__ import annotations as _annotations
 
-from typing import Literal
-
-import fastapi
-import httpx
 import logfire
-from fastapi import Request, Response
-from fastapi.responses import HTMLResponse
-from pydantic import BaseModel
-from pydantic.alias_generators import to_camel
 from pydantic_ai.builtin_tools import (
-    AbstractBuiltinTool,
     CodeExecutionTool,
     ImageGenerationTool,
     WebSearchTool,
 )
-from pydantic_ai.ui.vercel_ai import VercelAIAdapter
 
 from .agent import agent
 
 # 'if-token-present' means nothing will be sent (and the example will work) if you don't have logfire configured
 logfire.configure(send_to_logfire='if-token-present')
 logfire.instrument_pydantic_ai()
 
-app = fastapi.FastAPI()
-logfire.instrument_fastapi(app)
-
-
-@app.options('/api/chat')
-def options_chat():
-    pass
-
-
-AIModelID = Literal[
-    'anthropic:claude-sonnet-4-5',
-    'openai-responses:gpt-5',
-    'google-gla:gemini-2.5-pro',
-]
-BuiltinToolID = Literal['web_search', 'image_generation', 'code_execution']
-
-
-class AIModel(BaseModel):
-    id: AIModelID
-    name: str
-    builtin_tools: list[BuiltinToolID]
-
-
-class BuiltinTool(BaseModel):
-    id: BuiltinToolID
-    name: str
-
-
-BUILTIN_TOOL_DEFS: list[BuiltinTool] = [
-    BuiltinTool(id='web_search', name='Web Search'),
-    BuiltinTool(id='code_execution', name='Code Execution'),
-    BuiltinTool(id='image_generation', name='Image Generation'),
-]
-
-BUILTIN_TOOLS: dict[BuiltinToolID, AbstractBuiltinTool] = {
-    'web_search': WebSearchTool(),
-    'code_execution': CodeExecutionTool(),
-    'image_generation': ImageGenerationTool(),
-}
-
-AI_MODELS: list[AIModel] = [
-    AIModel(
-        id='anthropic:claude-sonnet-4-5',
-        name='Claude Sonnet 4.5',
-        builtin_tools=[
-            'web_search',
-            'code_execution',
-        ],
-    ),
-    AIModel(
-        id='openai-responses:gpt-5',
-        name='GPT 5',
-        builtin_tools=[
-            'web_search',
-            'code_execution',
-            'image_generation',
-        ],
-    ),
-    AIModel(
-        id='google-gla:gemini-2.5-pro',
-        name='Gemini 2.5 Pro',
-        builtin_tools=[
-            'web_search',
-            'code_execution',
-        ],
-    ),
-]
-
-
-class ConfigureFrontend(BaseModel, alias_generator=to_camel, populate_by_name=True):
-    models: list[AIModel]
-    builtin_tools: list[BuiltinTool]
-
-
-@app.get('/api/configure')
-async def configure_frontend() -> ConfigureFrontend:
-    return ConfigureFrontend(
-        models=AI_MODELS,
-        builtin_tools=BUILTIN_TOOL_DEFS,
-    )
-
-
-class ChatRequestExtra(BaseModel, extra='ignore', alias_generator=to_camel):
-    model: AIModelID | None = None
-    builtin_tools: list[BuiltinToolID] = []
-
-
-@app.post('/api/chat')
-async def post_chat(request: Request) -> Response:
-    run_input = VercelAIAdapter.build_run_input(await request.body())
-    extra_data = ChatRequestExtra.model_validate(run_input.__pydantic_extra__)
-    return await VercelAIAdapter.dispatch_request(
-        request,
-        agent=agent,
-        model=extra_data.model,
-        builtin_tools=[BUILTIN_TOOLS[tool_id] for tool_id in extra_data.builtin_tools],
-    )
-
-
-@app.get('/')
-@app.get('/{id}')
-async def index(request: Request):
-    async with httpx.AsyncClient() as client:
-        response = await client.get(
-            'https://cdn.jsdelivr.net/npm/@pydantic/ai-chat-ui@0.0.2/dist/index.html'
-        )
-        return HTMLResponse(content=response.content, status_code=response.status_code)
+app = agent.to_web(
+    models={
+        'Claude Sonnet 4.5': 'anthropic:claude-sonnet-4-5',
+        'GPT 5': 'openai-responses:gpt-5',
+        'Gemini 2.5 Pro': 'google-gla:gemini-2.5-pro',
+    },
+    builtin_tools=[
+        WebSearchTool(),
+        CodeExecutionTool(),
+        ImageGenerationTool(),
+    ],
+)
+logfire.instrument_starlette(app)

agent/pyproject.toml

@@ -7,10 +7,10 @@ dependencies = [
     "fastapi>=0.117.1",
     "lancedb>=0.25.0",
     "langchain-text-splitters>=0.3.11",
-    "logfire[fastapi]>=4.9.0",
+    "logfire[fastapi,starlette]>=4.9.0",
     "markdown2>=2.5.4",
     "pip>=25.2",
-    "pydantic-ai-slim[anthropic,openai,google,cli]>=1.14.0",
+    "pydantic-ai-slim[anthropic,cli,google,openai]>=1.14.0",
     "pyright>=1.1.405",
     "python-frontmatter>=1.1.0",
     "sentence-transformers>=5.1.1",