feat: PydanticAI support

Add support for the PydanticAI integration.

Add missing background change confirmation.

Increase agentic generation ui page size to allow it to display results
from the PydanticAI integration better.

Add a description for the human in the loop generate_task_steps tool, so
the PydanticAI example works as expected.

Merge write_document and confirm_changes tool into one, which allows it
work correctly with the PydanticAI example, without the need for the
agent to perform two separate tool calls.

Sort the features, so they are easier to find when reading the code and
implementing new integrations.

Fixes: #5

Author: stevenh

typescript-sdk/apps/dojo/package.json

@@ -16,6 +16,7 @@
     "@ag-ui/llamaindex": "workspace:*",
     "@ag-ui/mastra": "workspace:*",
     "@ag-ui/middleware-starter": "workspace:*",
+    "@ag-ui/pydantic-ai": "workspace:*",
     "@ag-ui/server-starter": "workspace:*",
     "@ag-ui/server-starter-all-features": "workspace:*",
     "@ag-ui/vercel-ai-sdk": "workspace:*",

typescript-sdk/apps/dojo/src/agents.ts

@@ -13,6 +13,7 @@ import { AgnoAgent } from "@ag-ui/agno";
 import { LlamaIndexAgent } from "@ag-ui/llamaindex";
 import { CrewAIAgent } from "@ag-ui/crewai";
 import { mastra } from "./mastra";
+import { PydanticAIAgent } from "@ag-ui/pydantic-ai";
 
 export const agentsIntegrations: AgentIntegrationConfig[] = [
   {
@@ -23,6 +24,31 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
       };
     },
   },
+  {
+    id: "pydantic-ai",
+    agents: async () => {
+      return {
+        agentic_chat: new PydanticAIAgent({
+          url: "http://localhost:9000/agentic_chat/",
+        }),
+        agentic_generative_ui: new PydanticAIAgent({
+          url: "http://localhost:9000/agentic_generative_ui/",
+        }),
+        human_in_the_loop: new PydanticAIAgent({
+          url: "http://localhost:9000/human_in_the_loop/",
+        }),
+        predictive_state_updates: new PydanticAIAgent({
+          url: "http://localhost:9000/predictive_state_updates/",
+        }),
+        shared_state: new PydanticAIAgent({
+          url: "http://localhost:9000/shared_state/",
+        }),
+        tool_based_generative_ui: new PydanticAIAgent({
+          url: "http://localhost:9000/tool_based_generative_ui/t",
+        }),
+      };
+    },
+  },
   {
     id: "server-starter",
     agents: async () => {

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx

@@ -42,6 +42,10 @@ const Chat = () => {
     ],
     handler: ({ background }) => {
       setBackground(background);
+      return {
+        status: "success",
+        message: `Background changed to ${background}`,
+      };
     },
   });
 

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx

@@ -42,7 +42,7 @@ const Chat = () => {
 
       return (
         <div className="flex">
-          <div className="bg-gray-100 rounded-lg w-[500px] p-4 text-black space-y-2">
+          <div className="bg-gray-100 rounded-lg w-[800px] p-4 text-black space-y-2">
             {state.steps.map((step, index) => {
               if (step.status === "completed") {
                 return (
@@ -55,7 +55,7 @@ const Chat = () => {
                 index === state.steps.findIndex((s) => s.status === "pending")
               ) {
                 return (
-                  <div key={index} className="text-3xl font-bold text-slate-700">
+                  <div key={index} className="text-2xl font-bold text-slate-700">
                     <Spinner />
                     {step.description}
                   </div>

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx

@@ -99,6 +99,7 @@ const Chat = () => {
   });
   useCopilotAction({
     name: "generate_task_steps",
+    description: "Generates a list of steps for the user to perform",
     parameters: [
       {
         name: "steps",

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx

@@ -128,23 +128,36 @@ const DocumentEditor = () => {
   }, [text]);
 
   useCopilotAction({
-    name: "confirm_changes",
-    renderAndWaitForResponse: ({ args, respond, status }) => (
-      <ConfirmChanges
-        args={args}
-        respond={respond}
-        status={status}
-        onReject={() => {
-          editor?.commands.setContent(fromMarkdown(currentDocument));
-          setAgentState({ document: currentDocument });
-        }}
-        onConfirm={() => {
-          editor?.commands.setContent(fromMarkdown(agentState?.document || ""));
-          setCurrentDocument(agentState?.document || "");
-          setAgentState({ document: agentState?.document || "" });
-        }}
-      />
-    ),
+    name: "write_document",
+    description: `Present the proposed changes to the user for review`,
+    parameters: [
+      {
+        name: "document",
+        type: "string",
+        description: "The full updated document in markdown format",
+      },
+    ],
+    renderAndWaitForResponse({ args, status, respond }) {
+      if (status === "executing") {
+        return (
+          <ConfirmChanges
+            args={args}
+            respond={respond}
+            status={status}
+            onReject={() => {
+              editor?.commands.setContent(fromMarkdown(currentDocument));
+              setAgentState({ document: currentDocument });
+            }}
+            onConfirm={() => {
+              editor?.commands.setContent(fromMarkdown(agentState?.document || ""));
+              setCurrentDocument(agentState?.document || "");
+              setAgentState({ document: agentState?.document || "" });
+            }}
+          />
+        );
+      }
+      return <></>;
+    },
   });
 
   return (

typescript-sdk/apps/dojo/src/config.ts

@@ -23,23 +23,23 @@ export const featureConfig: FeatureConfig[] = [
     description: "Chat with your Copilot and call frontend tools",
     tags: ["Chat", "Tools", "Streaming"],
   }),
-  createFeatureConfig({
-    id: "human_in_the_loop",
-    name: "Human in the loop",
-    description: "Plan a task together and direct the Copilot to take the right steps",
-    tags: ["HITL", "Interactivity"],
-  }),
   createFeatureConfig({
     id: "agentic_generative_ui",
     name: "Agentic Generative UI",
     description: "Assign a long running task to your Copilot and see how it performs!",
     tags: ["Generative ui (agent)", "Long running task"],
   }),
   createFeatureConfig({
-    id: "tool_based_generative_ui",
-    name: "Tool Based Generative UI",
-    description: "Haiku generator that uses tool based generative UI.",
-    tags: ["Generative ui (action)", "Tools"],
+    id: "human_in_the_loop",
+    name: "Human in the loop",
+    description: "Plan a task together and direct the Copilot to take the right steps",
+    tags: ["HITL", "Interactivity"],
+  }),
+  createFeatureConfig({
+    id: "predictive_state_updates",
+    name: "Predictive State Updates",
+    description: "Use collaboration to edit a document in real time with your Copilot",
+    tags: ["State", "Streaming", "Tools"],
   }),
   createFeatureConfig({
     id: "shared_state",
@@ -48,10 +48,10 @@ export const featureConfig: FeatureConfig[] = [
     tags: ["Agent State", "Collaborating"],
   }),
   createFeatureConfig({
-    id: "predictive_state_updates",
-    name: "Predictive State Updates",
-    description: "Use collaboration to edit a document in real time with your Copilot",
-    tags: ["State", "Streaming", "Tools"],
+    id: "tool_based_generative_ui",
+    name: "Tool Based Generative UI",
+    description: "Haiku generator that uses tool based generative UI.",
+    tags: ["Generative ui (action)", "Tools"],
   }),
 ];
 

typescript-sdk/apps/dojo/src/menu.ts

@@ -6,6 +6,18 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
     name: "Middleware Starter",
     features: ["agentic_chat"],
   },
+  {
+    id: "pydantic-ai",
+    name: "Pydantic AI",
+    features: [
+      "agentic_chat",
+      "human_in_the_loop",
+      "agentic_generative_ui",
+      "tool_based_generative_ui",
+      "shared_state",
+      "predictive_state_updates",
+    ],
+  },
   {
     id: "server-starter",
     name: "Server Starter",

typescript-sdk/integrations/langgraph/examples/agents/predictive_state_updates/agent.py

@@ -127,22 +127,9 @@ async def chat_node(state: AgentState, config: RunnableConfig):
                 "content": "Document written.",
                 "tool_call_id": tool_call_id
             }
-            
-            # Add confirmation tool call
-            confirm_tool_call = {
-                "role": "assistant",
-                "content": "",
-                "tool_calls": [{
-                    "id": str(uuid.uuid4()),
-                    "function": {
-                        "name": "confirm_changes",
-                        "arguments": "{}"
-                    }
-                }]
-            }
-            
-            messages = messages + [tool_response, confirm_tool_call]
-            
+
+            messages = messages + [tool_response]
+
             # Return Command to route to end
             return Command(
                 goto=END,

typescript-sdk/integrations/pydantic-ai/.env-sample

@@ -0,0 +1,4 @@
+## OpenAI API Settings
+# Get your Open AI API Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+OPENAI_API_KEY="sk-proj-...."