initial agent

ai-elements-tools.md

@@ -0,0 +1,384 @@
+# Generative User Interfaces
+
+Generative user interfaces (generative UI) is the process of allowing a large language model (LLM) to go beyond text and "generate UI". This creates a more engaging and AI-native experience for users.
+
+<WeatherSearch />
+
+At the core of generative UI are [ tools ](/docs/ai-sdk-core/tools-and-tool-calling), which are functions you provide to the model to perform specialized tasks like getting the weather in a location. The model can decide when and how to use these tools based on the context of the conversation.
+
+Generative UI is the process of connecting the results of a tool call to a React component. Here's how it works:
+
+1. You provide the model with a prompt or conversation history, along with a set of tools.
+2. Based on the context, the model may decide to call a tool.
+3. If a tool is called, it will execute and return data.
+4. This data can then be passed to a React component for rendering.
+
+By passing the tool results to React components, you can create a generative UI experience that's more engaging and adaptive to your needs.
+
+## Build a Generative UI Chat Interface
+
+Let's create a chat interface that handles text-based conversations and incorporates dynamic UI elements based on model responses.
+
+### Basic Chat Implementation
+
+Start with a basic chat implementation using the `useChat` hook:
+
+```tsx filename="app/page.tsx"
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { useState } from 'react';
+
+export default function Page() {
+  const [input, setInput] = useState('');
+  const { messages, sendMessage } = useChat();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: input });
+    setInput('');
+  };
+
+  return (
+    <div>
+      {messages.map(message => (
+        <div key={message.id}>
+          <div>{message.role === 'user' ? 'User: ' : 'AI: '}</div>
+          <div>
+            {message.parts.map((part, index) => {
+              if (part.type === 'text') {
+                return <span key={index}>{part.text}</span>;
+              }
+              return null;
+            })}
+          </div>
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Type a message..."
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}
+```
+
+To handle the chat requests and model responses, set up an API route:
+
+```ts filename="app/api/chat/route.ts"
+import { openai } from '@ai-sdk/openai';
+import { streamText, convertToModelMessages, UIMessage, stepCountIs } from 'ai';
+
+export async function POST(request: Request) {
+  const { messages }: { messages: UIMessage[] } = await request.json();
+
+  const result = streamText({
+    model: openai('gpt-4o'),
+    system: 'You are a friendly assistant!',
+    messages: convertToModelMessages(messages),
+    stopWhen: stepCountIs(5),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+This API route uses the `streamText` function to process chat messages and stream the model's responses back to the client.
+
+### Create a Tool
+
+Before enhancing your chat interface with dynamic UI elements, you need to create a tool and corresponding React component. A tool will allow the model to perform a specific action, such as fetching weather information.
+
+Create a new file called `ai/tools.ts` with the following content:
+
+```ts filename="ai/tools.ts"
+import { tool as createTool } from 'ai';
+import { z } from 'zod';
+
+export const weatherTool = createTool({
+  description: 'Display the weather for a location',
+  inputSchema: z.object({
+    location: z.string().describe('The location to get the weather for'),
+  }),
+  execute: async function ({ location }) {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    return { weather: 'Sunny', temperature: 75, location };
+  },
+});
+
+export const tools = {
+  displayWeather: weatherTool,
+};
+```
+
+In this file, you've created a tool called `weatherTool`. This tool simulates fetching weather information for a given location. This tool will return simulated data after a 2-second delay. In a real-world application, you would replace this simulation with an actual API call to a weather service.
+
+### Update the API Route
+
+Update the API route to include the tool you've defined:
+
+```ts filename="app/api/chat/route.ts" highlight="3,8,14"
+import { openai } from '@ai-sdk/openai';
+import { streamText, convertToModelMessages, UIMessage, stepCountIs } from 'ai';
+import { tools } from '@/ai/tools';
+
+export async function POST(request: Request) {
+  const { messages }: { messages: UIMessage[] } = await request.json();
+
+  const result = streamText({
+    model: openai('gpt-4o'),
+    system: 'You are a friendly assistant!',
+    messages: convertToModelMessages(messages),
+    stopWhen: stepCountIs(5),
+    tools,
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+Now that you've defined the tool and added it to your `streamText` call, let's build a React component to display the weather information it returns.
+
+### Create UI Components
+
+Create a new file called `components/weather.tsx`:
+
+```tsx filename="components/weather.tsx"
+type WeatherProps = {
+  temperature: number;
+  weather: string;
+  location: string;
+};
+
+export const Weather = ({ temperature, weather, location }: WeatherProps) => {
+  return (
+    <div>
+      <h2>Current Weather for {location}</h2>
+      <p>Condition: {weather}</p>
+      <p>Temperature: {temperature}°C</p>
+    </div>
+  );
+};
+```
+
+This component will display the weather information for a given location. It takes three props: `temperature`, `weather`, and `location` (exactly what the `weatherTool` returns).
+
+### Render the Weather Component
+
+Now that you have your tool and corresponding React component, let's integrate them into your chat interface. You'll render the Weather component when the model calls the weather tool.
+
+To check if the model has called a tool, you can check the `parts` array of the UIMessage object for tool-specific parts. In AI SDK 5.0, tool parts use typed naming: `tool-${toolName}` instead of generic types.
+
+Update your `page.tsx` file:
+
+```tsx filename="app/page.tsx" highlight="4,9,14-15,19-46"
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { useState } from 'react';
+import { Weather } from '@/components/weather';
+
+export default function Page() {
+  const [input, setInput] = useState('');
+  const { messages, sendMessage } = useChat();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: input });
+    setInput('');
+  };
+
+  return (
+    <div>
+      {messages.map(message => (
+        <div key={message.id}>
+          <div>{message.role === 'user' ? 'User: ' : 'AI: '}</div>
+          <div>
+            {message.parts.map((part, index) => {
+              if (part.type === 'text') {
+                return <span key={index}>{part.text}</span>;
+              }
+
+              if (part.type === 'tool-displayWeather') {
+                switch (part.state) {
+                  case 'input-available':
+                    return <div key={index}>Loading weather...</div>;
+                  case 'output-available':
+                    return (
+                      <div key={index}>
+                        <Weather {...part.output} />
+                      </div>
+                    );
+                  case 'output-error':
+                    return <div key={index}>Error: {part.errorText}</div>;
+                  default:
+                    return null;
+                }
+              }
+
+              return null;
+            })}
+          </div>
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          placeholder="Type a message..."
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}
+```
+
+In this updated code snippet, you:
+
+1. Use manual input state management with `useState` instead of the built-in `input` and `handleInputChange`.
+2. Use `sendMessage` instead of `handleSubmit` to send messages.
+3. Check the `parts` array of each message for different content types.
+4. Handle tool parts with type `tool-displayWeather` and their different states (`input-available`, `output-available`, `output-error`).
+
+This approach allows you to dynamically render UI components based on the model's responses, creating a more interactive and context-aware chat experience.
+
+## Expanding Your Generative UI Application
+
+You can enhance your chat application by adding more tools and components, creating a richer and more versatile user experience. Here's how you can expand your application:
+
+### Adding More Tools
+
+To add more tools, simply define them in your `ai/tools.ts` file:
+
+```ts
+// Add a new stock tool
+export const stockTool = createTool({
+  description: 'Get price for a stock',
+  inputSchema: z.object({
+    symbol: z.string().describe('The stock symbol to get the price for'),
+  }),
+  execute: async function ({ symbol }) {
+    // Simulated API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    return { symbol, price: 100 };
+  },
+});
+
+// Update the tools object
+export const tools = {
+  displayWeather: weatherTool,
+  getStockPrice: stockTool,
+};
+```
+
+Now, create a new file called `components/stock.tsx`:
+
+```tsx
+type StockProps = {
+  price: number;
+  symbol: string;
+};
+
+export const Stock = ({ price, symbol }: StockProps) => {
+  return (
+    <div>
+      <h2>Stock Information</h2>
+      <p>Symbol: {symbol}</p>
+      <p>Price: ${price}</p>
+    </div>
+  );
+};
+```
+
+Finally, update your `page.tsx` file to include the new Stock component:
+
+```tsx
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { useState } from 'react';
+import { Weather } from '@/components/weather';
+import { Stock } from '@/components/stock';
+
+export default function Page() {
+  const [input, setInput] = useState('');
+  const { messages, sendMessage } = useChat();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: input });
+    setInput('');
+  };
+
+  return (
+    <div>
+      {messages.map(message => (
+        <div key={message.id}>
+          <div>{message.role}</div>
+          <div>
+            {message.parts.map((part, index) => {
+              if (part.type === 'text') {
+                return <span key={index}>{part.text}</span>;
+              }
+
+              if (part.type === 'tool-displayWeather') {
+                switch (part.state) {
+                  case 'input-available':
+                    return <div key={index}>Loading weather...</div>;
+                  case 'output-available':
+                    return (
+                      <div key={index}>
+                        <Weather {...part.output} />
+                      </div>
+                    );
+                  case 'output-error':
+                    return <div key={index}>Error: {part.errorText}</div>;
+                  default:
+                    return null;
+                }
+              }
+
+              if (part.type === 'tool-getStockPrice') {
+                switch (part.state) {
+                  case 'input-available':
+                    return <div key={index}>Loading stock price...</div>;
+                  case 'output-available':
+                    return (
+                      <div key={index}>
+                        <Stock {...part.output} />
+                      </div>
+                    );
+                  case 'output-error':
+                    return <div key={index}>Error: {part.errorText}</div>;
+                  default:
+                    return null;
+                }
+              }
+
+              return null;
+            })}
+          </div>
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+        />
+        <button type="submit">Send</button>
+      </form>
+    </div>
+  );
+}
+```
+
+By following this pattern, you can continue to add more tools and components, expanding the capabilities of your Generative UI application.

backend/app/routers/agent.py

@@ -19,10 +19,6 @@ agent = Agent(model=model)
 
 router = APIRouter(prefix="/api/v1/agent", tags=["Agent"])
 
-
-@agent.tool_plain()
-async def build_audit_report():
-    """Calls the audit subagent to get a full audit report of the organization"""
 data = {
     "extraction": {
         "core_organization_metadata": {
@@ -356,9 +352,13 @@ async def build_audit_report():
     },
 }
 
+
+@agent.tool_plain
+async def build_audit_report():
+    """Calls the audit subagent to get a full audit report of the organization"""
     result = await form_auditor.build_audit_report(data)
 
-    return result.model_dump_json()
+    return result.model_dump()
 
 
 @router.post("/chat")

docker-compose.yml

@@ -27,11 +27,12 @@ services:
 
   db:
     image: redis/redis-stack:latest
+    command: redis-server --appendonly yes
     ports:
       - 6379:6379
       - 8001:8001
     volumes:
-      - redis_data:/data        # Persistent Redis data
+      - ./redis_data:/data
     restart: unless-stopped
     networks:
       - app-network

frontend/src/components/AuditReport.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import {
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  FileText,
+  Building,
+  Calendar,
+  AlertCircle,
+  TrendingUp,
+  Shield,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type Severity = "Pass" | "Warning" | "Error";
+
+interface AuditFinding {
+  check_id: string;
+  category: string;
+  severity: Severity;
+  message: string;
+  mitigation?: string;
+  confidence: number;
+}
+
+interface AuditSectionSummary {
+  section: string;
+  severity: Severity;
+  summary: string;
+  confidence: number;
+}
+
+interface AuditReportData {
+  organisation_ein: string;
+  organisation_name: string;
+  year?: number;
+  overall_severity: Severity;
+  findings: AuditFinding[];
+  sections: AuditSectionSummary[];
+  overall_summary?: string;
+  notes?: string;
+}
+
+interface AuditReportProps {
+  data: AuditReportData;
+}
+
+const getSeverityIcon = (severity: Severity) => {
+  switch (severity) {
+    case "Pass":
+      return <CheckCircle className="w-5 h-5 text-green-600" />;
+    case "Warning":
+      return <AlertTriangle className="w-5 h-5 text-yellow-600" />;
+    case "Error":
+      return <XCircle className="w-5 h-5 text-red-600" />;
+    default:
+      return <AlertCircle className="w-5 h-5 text-gray-600" />;
+  }
+};
+
+const getSeverityColor = (severity: Severity) => {
+  switch (severity) {
+    case "Pass":
+      return "text-green-700 bg-green-50 border-green-200";
+    case "Warning":
+      return "text-yellow-700 bg-yellow-50 border-yellow-200";
+    case "Error":
+      return "text-red-700 bg-red-50 border-red-200";
+    default:
+      return "text-gray-700 bg-gray-50 border-gray-200";
+  }
+};
+
+const getConfidenceColor = (confidence: number) => {
+  if (confidence >= 0.8) return "text-green-600";
+  if (confidence >= 0.6) return "text-yellow-600";
+  return "text-red-600";
+};
+
+export const AuditReport: React.FC<AuditReportProps> = ({ data }) => {
+  const {
+    organisation_ein,
+    organisation_name,
+    year,
+    overall_severity,
+    findings,
+    sections,
+    overall_summary,
+    notes,
+  } = data;
+
+  const severityStats = {
+    Pass: findings.filter((f) => f.severity === "Pass").length,
+    Warning: findings.filter((f) => f.severity === "Warning").length,
+    Error: findings.filter((f) => f.severity === "Error").length,
+  };
+
+  return (
+    <div className="w-full bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
+      <div>
+        {/* Header */}
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 p-3">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Shield className="w-6 h-6 text-blue-600" />
+              </div>
+              <div>
+                <h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
+                  <Building className="w-5 h-5" />
+                  {organisation_name}
+                </h2>
+                <div className="flex items-center gap-4 mt-1 text-sm text-gray-600">
+                  <span className="flex items-center gap-1">
+                    <FileText className="w-4 h-4" />
+                    EIN: {organisation_ein}
+                  </span>
+                  {year && (
+                    <span className="flex items-center gap-1">
+                      <Calendar className="w-4 h-4" />
+                      {year}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Overall Status */}
+            <div
+              className={cn(
+                "flex items-center gap-2 px-4 py-2 rounded-full border",
+                getSeverityColor(overall_severity),
+              )}
+            >
+              {getSeverityIcon(overall_severity)}
+              <span className="font-medium">{overall_severity}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Statistics Bar */}
+        <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium text-gray-700">Audit Summary</h3>
+            <div className="flex items-center gap-6 text-sm">
+              <div className="flex items-center gap-1">
+                <CheckCircle className="w-4 h-4 text-green-600" />
+                <span className="text-green-700 font-medium">
+                  {severityStats.Pass}
+                </span>
+                <span className="text-gray-600">Passed</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <AlertTriangle className="w-4 h-4 text-yellow-600" />
+                <span className="text-yellow-700 font-medium">
+                  {severityStats.Warning}
+                </span>
+                <span className="text-gray-600">Warnings</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <XCircle className="w-4 h-4 text-red-600" />
+                <span className="text-red-700 font-medium">
+                  {severityStats.Error}
+                </span>
+                <span className="text-gray-600">Errors</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Overall Summary */}
+        {overall_summary && (
+          <div className="p-4 border-b border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900 mb-3">
+              Overall Assessment
+            </h3>
+            <p className="text-gray-700 leading-relaxed">{overall_summary}</p>
+          </div>
+        )}
+
+        {/* Section Summaries */}
+        {sections.length > 0 && (
+          <div className="p-4 border-b border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">
+              Section Analysis
+            </h3>
+            <div className="grid gap-2 sm:grid-cols-2">
+              {sections.map((section, index) => (
+                <div
+                  key={index}
+                  className={cn(
+                    "border rounded-lg p-3",
+                    getSeverityColor(section.severity),
+                  )}
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <h4 className="font-medium">{section.section}</h4>
+                    <div className="flex items-center gap-2">
+                      {getSeverityIcon(section.severity)}
+                      <span
+                        className={cn(
+                          "text-xs font-medium",
+                          getConfidenceColor(section.confidence),
+                        )}
+                      >
+                        {Math.round(section.confidence * 100)}%
+                      </span>
+                    </div>
+                  </div>
+                  <p className="text-sm opacity-90">{section.summary}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Detailed Findings */}
+        <div className="p-4">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">
+            Detailed Findings ({findings.length})
+          </h3>
+          <div className="space-y-3">
+            {findings.map((finding, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "border rounded-lg p-3",
+                  getSeverityColor(finding.severity),
+                )}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    {getSeverityIcon(finding.severity)}
+                    <div>
+                      <span className="font-medium">{finding.category}</span>
+                      <span className="text-sm text-gray-500 ml-2">
+                        #{finding.check_id}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <TrendingUp className="w-4 h-4 text-gray-400" />
+                    <span
+                      className={cn(
+                        "text-sm font-medium",
+                        getConfidenceColor(finding.confidence),
+                      )}
+                    >
+                      {Math.round(finding.confidence * 100)}% confidence
+                    </span>
+                  </div>
+                </div>
+
+                <p className="text-sm mb-2 leading-relaxed">
+                  {finding.message}
+                </p>
+
+                {finding.mitigation && (
+                  <div className="bg-white bg-opacity-50 rounded p-2 border border-current border-opacity-20">
+                    <h5 className="font-medium text-sm mb-1">
+                      Recommended Action:
+                    </h5>
+                    <p className="text-sm">{finding.mitigation}</p>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Notes */}
+        {notes && (
+          <div className="bg-gray-50 p-3 border-t border-gray-200">
+            <h3 className="text-sm font-medium text-gray-700 mb-2">
+              Additional Notes
+            </h3>
+            <p className="text-sm text-gray-600 italic">{notes}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/components/ChatTab.tsx

@@ -32,6 +32,7 @@ import {
   AlertCircle,
   PaperclipIcon,
 } from "lucide-react";
+import { AuditReport } from "./AuditReport";
 import { Loader } from "@/components/ai-elements/loader";
 import { DefaultChatTransport } from "ai";
 
@@ -101,9 +102,9 @@ export function ChatTab({ selectedTema }: ChatTabProps) {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-[638px] max-h-[638px]">
       {/* Chat Header */}
-      <div className="border-b border-gray-200 px-6 py-4">
+      <div className="border-b border-gray-200 px-6 py-4 flex-shrink-0">
         <div className="flex items-center gap-3">
           <div className="p-2 bg-blue-100 rounded-lg">
             <MessageCircle className="w-5 h-5 text-blue-600" />
@@ -120,10 +121,8 @@ export function ChatTab({ selectedTema }: ChatTabProps) {
       </div>
 
       {/* Chat Content */}
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 min-h-0 overflow-y-auto">
-        <Conversation className="flex-1">
+        <div className="max-w-4xl mx-auto w-full space-y-6 p-6">
-          <ConversationContent className="p-6">
-            <div className="max-w-4xl mx-auto w-full">
           {/* Welcome Message */}
           {messages.length === 0 && (
             <div className="flex items-start gap-3 mb-6">
@@ -187,6 +186,51 @@ export function ChatTab({ selectedTema }: ChatTabProps) {
                           )}
                       </Fragment>
                     );
+                  case "tool-build_audit_report":
+                    switch (part.state) {
+                      case "input-available":
+                        return (
+                          <div
+                            key={`${message.id}-${i}`}
+                            className="flex items-center gap-2 p-4 bg-blue-50 rounded-lg border border-blue-200"
+                          >
+                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
+                            <span className="text-sm text-blue-700">
+                              Generando reporte de auditoría...
+                            </span>
+                          </div>
+                        );
+                      case "output-available":
+                        return (
+                          <div
+                            key={`${message.id}-${i}`}
+                            className="mt-4 w-full"
+                          >
+                            <div className="max-w-full overflow-hidden">
+                              <AuditReport data={part.output} />
+                            </div>
+                          </div>
+                        );
+                      case "output-error":
+                        return (
+                          <div
+                            key={`${message.id}-${i}`}
+                            className="p-4 bg-red-50 border border-red-200 rounded-lg"
+                          >
+                            <div className="flex items-center gap-2">
+                              <AlertCircle className="w-4 h-4 text-red-600" />
+                              <span className="text-sm font-medium text-red-800">
+                                Error generando reporte de auditoría
+                              </span>
+                            </div>
+                            <p className="text-sm text-red-600 mt-1">
+                              {part.errorText}
+                            </p>
+                          </div>
+                        );
+                      default:
+                        return null;
+                    }
                   default:
                     return null;
                 }
@@ -196,12 +240,10 @@ export function ChatTab({ selectedTema }: ChatTabProps) {
           {status === "streaming" && <Loader />}
           {status === "loading" && <Loader />}
         </div>
-          </ConversationContent>
+      </div>
-          <ConversationScrollButton />
-        </Conversation>
 
       {/* Chat Input */}
-        <div className="border-t border-gray-200 p-6 bg-gray-50/50">
+      <div className="border-t border-gray-200 p-3 bg-gray-50/50 flex-shrink-0">
         <PromptInput
           onSubmit={handleSubmit}
           className="max-w-4xl mx-auto border-2 border-gray-200 rounded-xl focus-within:border-slate-500 transition-colors duration-200 bg-white"
@@ -252,6 +294,5 @@ export function ChatTab({ selectedTema }: ChatTabProps) {
         </PromptInput>
       </div>
     </div>
-    </div>
   );
 }