Implement API key generation and display for agents

- Add API key utility functions (generateApiKey, extractAgentIdFromApiKey)
- Auto-generate API keys on agent creation (format: pub_key_{agentId})
- Auto-generate missing API keys on agent update (backward compatibility)
- Update type definitions to include public_api_key field
- Add frontend component to display and copy API keys
- Integrate API key section into agent edit page

Author: StephaneWamba

frontend/app/dashboard/agents/[id]/page.tsx

@@ -20,6 +20,7 @@ import { AgentAIBehavior } from '@/components/agents/agent-ai-behavior'
 import { AgentModelSettings } from '@/components/agents/agent-model-settings'
 import { AgentVoiceSettings } from '@/components/agents/agent-voice-settings'
 import { AgentKnowledgeBaseSection } from '@/components/agents/agent-knowledge-base-section'
+import { AgentApiKeySection } from '@/components/agents/agent-api-key-section'
 
 
 export default function EditAgentPage({ params }: { params: Promise<{ id: string }> }) {
@@ -164,6 +165,7 @@ export default function EditAgentPage({ params }: { params: Promise<{ id: string
             <AgentAIBehavior form={form} />
             <AgentModelSettings form={form} />
             <AgentVoiceSettings form={form} />
+            <AgentApiKeySection agentId={id} apiKey={agent?.public_api_key} />
             <AgentKnowledgeBaseSection agentId={id} />
           </form>
         </Form>

frontend/components/agents/agent-api-key-section.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Eye, EyeOff, Copy, Check } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface AgentApiKeySectionProps {
+  agentId: string
+  apiKey: string | null | undefined
+}
+
+export function AgentApiKeySection({ agentId, apiKey }: AgentApiKeySectionProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    if (!apiKey) {
+      toast.error('API key not available')
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(apiKey)
+      setCopied(true)
+      toast.success('API key copied to clipboard')
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      toast.error('Failed to copy API key')
+    }
+  }
+
+  const displayKey = apiKey || 'Not generated yet'
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>API Key</CardTitle>
+        <CardDescription>
+          Use this API key to authenticate widget requests. Keep it secure and never share it publicly.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Input
+              type={isVisible ? 'text' : 'password'}
+              value={displayKey}
+              readOnly
+              className="font-mono text-sm pr-20"
+              placeholder="API key will appear here"
+            />
+            <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => setIsVisible(!isVisible)}
+                disabled={!apiKey}
+              >
+                {isVisible ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleCopy}
+                disabled={!apiKey}
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {!apiKey && (
+          <div className="rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 p-3">
+            <p className="text-sm text-yellow-800 dark:text-yellow-200">
+              API key will be generated automatically when you save changes to this agent.
+            </p>
+          </div>
+        )}
+
+        {apiKey && (
+          <div className="rounded-md bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-3">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Security Note:</strong> This API key provides access to your agent. Keep it private and only use it in your widget implementation.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+

services/agent/src/routes/agents.ts

@@ -3,12 +3,14 @@
  */
 
 import express from 'express'
+import { randomUUID } from 'crypto'
 import { supabase } from '../config/database.js'
 import { authenticate, requireCompany, AuthenticatedRequest } from '../middleware/auth.js'
 import { CreateAgentSchema, UpdateAgentSchema } from '../schemas/agent.js'
 import { handleError, notFound, forbidden, badRequest } from '../utils/errors.js'
 import { createLogger } from '@syntera/shared/logger/index.js'
 import { invalidateAgentConfig, getAgentConfig } from '../utils/agent-cache.js'
+import { generateApiKey } from '../utils/api-key.js'
 
 const logger = createLogger('agent-service')
 const router = express.Router()
@@ -95,10 +97,15 @@ router.post(
       const companyId = req.user!.company_id!
       const agentData = validationResult.data
 
-      // Insert agent
+      // Generate agent ID and API key before insert
+      const agentId = randomUUID()
+      const publicApiKey = generateApiKey(agentId)
+
+      // Insert agent with generated ID and API key
       const { data: agent, error } = await supabase
         .from('agent_configs')
         .insert({
+          id: agentId,
           company_id: companyId,
           name: agentData.name,
           description: agentData.description || null,
@@ -109,6 +116,7 @@ router.post(
           enabled: agentData.enabled,
           avatar_url: agentData.avatar_url || null,
           voice_settings: agentData.voice_settings || {},
+          public_api_key: publicApiKey,
         })
         .select()
         .single()
@@ -147,7 +155,7 @@ router.patch(
       // Check if agent exists and belongs to company
       const { data: existingAgent, error: fetchError } = await supabase
         .from('agent_configs')
-        .select('id, company_id')
+        .select('id, company_id, public_api_key')
         .eq('id', id)
         .single()
 
@@ -159,8 +167,25 @@ router.patch(
         return forbidden(res, 'Agent does not belong to your company')
       }
 
-      // Update agent
+      // Prepare update data
       const updateData = validationResult.data
+      
+      // Generate API key if missing (backward compatibility)
+      if (!existingAgent.public_api_key) {
+        try {
+          const publicApiKey = generateApiKey(id)
+          updateData.public_api_key = publicApiKey
+          logger.info('Generated missing API key for agent', { agentId: id })
+        } catch (keyError) {
+          logger.warn('Failed to generate API key for agent', { 
+            agentId: id, 
+            error: keyError instanceof Error ? keyError.message : String(keyError) 
+          })
+          // Continue without API key - can be generated later
+        }
+      }
+
+      // Update agent
       const { data: agent, error } = await supabase
         .from('agent_configs')
         .update({

services/agent/src/types/agent.ts

@@ -14,6 +14,7 @@ export interface AgentConfig {
   max_tokens: number
   enabled: boolean
   voice_settings?: Record<string, unknown>
+  public_api_key?: string | null
   created_at?: string
   updated_at?: string
 }

services/agent/src/utils/api-key.ts

@@ -0,0 +1,46 @@
+/**
+ * API Key Utility Functions
+ * 
+ * Handles generation and validation of public API keys for agent widget access.
+ * API keys follow the format: `pub_key_{agentId}` where agentId is a UUID.
+ */
+
+/**
+ * Generate public API key for an agent
+ * Format: pub_key_{agentId}
+ * 
+ * @param agentId - UUID of the agent
+ * @returns API key string in format `pub_key_{agentId}`
+ * @throws Error if agentId format is invalid
+ */
+export function generateApiKey(agentId: string): string {
+  // Validate UUID format
+  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+  if (!agentId || !uuidRegex.test(agentId)) {
+    throw new Error(`Invalid agent ID format for API key generation: ${agentId}`)
+  }
+  return `pub_key_${agentId}`
+}
+
+/**
+ * Extract agent ID from API key
+ * 
+ * @param apiKey - API key string (format: pub_key_{agentId})
+ * @returns Agent ID if format is valid, null otherwise
+ */
+export function extractAgentIdFromApiKey(apiKey: string): string | null {
+  if (!apiKey || !apiKey.startsWith('pub_key_')) {
+    return null
+  }
+  
+  const agentId = apiKey.substring(8) // Remove 'pub_key_' prefix
+  
+  // Validate UUID format
+  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+  if (uuidRegex.test(agentId)) {
+    return agentId
+  }
+  
+  return null
+}
+

shared/src/schemas/agent.ts

@@ -45,6 +45,7 @@ export const AgentResponseSchema = z.object({
   enabled: z.boolean(),
   voice_settings: z.record(z.string(), z.unknown()).nullable(),
   avatar_url: z.string().url().nullable().optional(),
+  public_api_key: z.string().nullable().optional(),
   created_at: z.string(),
   updated_at: z.string(),
 })

shared/src/types/index.ts

@@ -40,6 +40,7 @@ export interface AgentConfig {
   max_tokens: number
   enabled: boolean
   voice_settings?: VoiceSettings | null
+  public_api_key?: string | null
   created_at: string
   updated_at: string
 }