@inkeep/agents-manage-ui 0.29.3 → 0.29.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.29.3",
+  "version": "0.29.5",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,13 +27,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "2.0.2",
+    "@ai-sdk/gateway": "^1.0.23",
+    "@ai-sdk/google": "^2.0.14",
+    "@ai-sdk/openai": "2.0.11",
     "@ai-sdk/react": "2.0.11",
     "@hookform/resolvers": "^5.2.1",
-    "@inkeep/agents-ui": "^0.14.17",
+    "@inkeep/agents-ui": "^0.14.25",
     "@lezer/highlight": "^1.2.1",
     "@nangohq/frontend": "^0.69.5",
     "@nangohq/node": "^0.69.5",
     "@nangohq/types": "^0.69.5",
+    "@openrouter/ai-sdk-provider": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -48,9 +53,11 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@shikijs/monaco": "^3.13.0",
     "@sinclair/typebox": "^0.34.40",
     "@types/dagre": "^0.7.53",
     "@xyflow/react": "^12.8.2",
+    "ai": "^5.0.11",
     "axios": "^1.11.0",
     "axios-retry": "^4.5.0",
     "class-variance-authority": "^0.7.1",
@@ -75,17 +82,16 @@
     "react-runner": "^1.0.5",
     "recharts": "2.15.4",
     "remark-supersub": "^1.0.0",
-    "sonner": "^2.0.6",
     "shiki": "^3.13.0",
-    "@shikijs/monaco": "^3.13.0",
+    "sonner": "^2.0.6",
     "streamdown": "^1.4.0",
     "tailwind-merge": "^3.3.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.29.3",
-    "@inkeep/agents-manage-api": "^0.29.3",
-    "@inkeep/agents-run-api": "^0.29.3"
+    "@inkeep/agents-manage-api": "^0.29.5",
+    "@inkeep/agents-core": "^0.29.5",
+    "@inkeep/agents-run-api": "^0.29.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/src/app/api/data-components/[dataComponentId]/generate-render/route.ts

@@ -1,9 +1,28 @@
+/**
+ * API Route: Generate Component Render
+ *
+ * Generates a React/Tailwind component using AI based on a data component's schema.
+ * This route:
+ * 1. Fetches the data component from manage-api
+ * 2. Fetches the project to get base model configuration
+ * 3. Uses AI SDK streamObject to generate component code and sample data
+ * 4. Streams NDJSON response back to client
+ */
+
+import { streamObject } from 'ai';
 import type { NextRequest } from 'next/server';
+import { z } from 'zod';
+import { ModelFactory } from '@/lib/ai/model-factory';
+import { fetchDataComponent } from '@/lib/api/data-components';
+import { fetchProject } from '@/lib/api/projects';
+
+interface RouteContext {
+  params: Promise<{
+    dataComponentId: string;
+  }>;
+}
 
-export async function POST(
-  request: NextRequest,
-  context: RouteContext<'/api/data-components/[dataComponentId]/generate-render'>
-) {
+export async function POST(request: NextRequest, context: RouteContext) {
   try {
     const { dataComponentId } = await context.params;
     const body = await request.json();
@@ -13,45 +32,242 @@ export async function POST(
       return new Response('Missing tenantId or projectId', { status: 400 });
     }
 
-    const runApiUrl = process.env.PUBLIC_INKEEP_AGENTS_RUN_API_URL || 'http://localhost:3003';
-    const url = `${runApiUrl}/v1/${tenantId}/projects/${projectId}/data-components/${dataComponentId}/generate-render`;
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(process.env.PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET && {
-          Authorization: `Bearer ${process.env.PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET}`,
-          'x-inkeep-tenant-id': tenantId,
-          'x-inkeep-project-id': projectId,
-        }),
-      },
-      body: JSON.stringify({
-        instructions: instructions || undefined,
-        existingCode: existingCode || undefined,
-      }),
+    console.log('Generating component render', {
+      tenantId,
+      projectId,
+      dataComponentId,
+      hasInstructions: !!instructions,
+      hasExistingCode: !!existingCode,
     });
 
-    if (!response.ok) {
-      const errorText = await response.text().catch(() => 'Unable to read error');
-      console.error('Run API returned error:', {
-        status: response.status,
-        statusText: response.statusText,
-        body: errorText,
-        url,
-      });
-      return new Response('Failed to generate preview', { status: response.status });
+    // Fetch data component from manage-api
+    const dataComponent = await fetchDataComponent(tenantId, projectId, dataComponentId);
+
+    if (!dataComponent) {
+      return new Response('Data component not found', { status: 404 });
+    }
+
+    // Fetch project to get model configuration
+    const projectResponse = await fetchProject(tenantId, projectId);
+
+    if (!projectResponse.data) {
+      return new Response('Project not found', { status: 404 });
+    }
+
+    const project = projectResponse.data;
+
+    if (!project.models?.base) {
+      return new Response('Project base model configuration is required', { status: 400 });
     }
 
-    // Stream the response directly to the client
-    return new Response(response.body, {
+    // Build prompt for AI generation
+    const prompt = buildGenerationPrompt(dataComponent, instructions, existingCode);
+
+    // Prepare model configuration
+    const modelConfig = ModelFactory.prepareGenerationConfig(project.models?.base as any);
+
+    // Define schema for generated output
+    const renderSchema = z.object({
+      component: z.string().describe('The React component code'),
+      mockData: z.any().describe('Sample data matching the props schema'),
+    });
+
+    // Generate using AI SDK streamObject
+    const result = streamObject({
+      ...modelConfig,
+      prompt,
+      schema: renderSchema,
+      temperature: 0.7,
+    });
+
+    // Get existing data if we're modifying (to preserve sample data)
+    const existingData =
+      existingCode &&
+      dataComponent.render &&
+      typeof dataComponent.render === 'object' &&
+      'mockData' in dataComponent.render
+        ? (dataComponent.render as any).mockData
+        : null;
+
+    // Create a ReadableStream for NDJSON streaming
+    const stream = new ReadableStream({
+      async start(controller) {
+        try {
+          for await (const partialObject of result.partialObjectStream) {
+            // If modifying with instructions, preserve existing data
+            const outputObject =
+              instructions && existingData
+                ? { ...(partialObject as any), mockData: existingData }
+                : partialObject;
+
+            // Write NDJSON (newline-delimited JSON)
+            const line = `${JSON.stringify(outputObject)}\n`;
+            controller.enqueue(new TextEncoder().encode(line));
+          }
+          controller.close();
+        } catch (error) {
+          console.error('Error streaming preview generation:', error);
+          // Send error as final line
+          const errorLine = `${JSON.stringify({ component: '// Error generating component', mockData: {} })}\n`;
+          controller.enqueue(new TextEncoder().encode(errorLine));
+          controller.close();
+        }
+      },
+    });
+
+    return new Response(stream, {
       headers: {
         'Content-Type': 'application/x-ndjson',
         'Transfer-Encoding': 'chunked',
+        'Cache-Control': 'no-cache',
       },
     });
   } catch (error) {
-    console.error('Error generating preview:', error);
-    return new Response('Internal server error', { status: 500 });
+    console.error('Error generating component render:', error);
+    return new Response(error instanceof Error ? error.message : 'Internal server error', {
+      status: 500,
+    });
   }
 }
+
+/**
+ * Build the prompt for AI generation
+ */
+function buildGenerationPrompt(
+  dataComponent: {
+    name: string;
+    description: string;
+    props: Record<string, unknown> | null;
+  },
+  instructions?: string,
+  existingCode?: string
+): string {
+  const propsSchema = dataComponent.props || {};
+  const propsJson = JSON.stringify(propsSchema, null, 2);
+  const componentName = sanitizeComponentName(dataComponent.name);
+
+  // If we have custom instructions and existing code, modify the prompt
+  if (instructions && existingCode) {
+    return `You are an expert React and Tailwind CSS developer. You need to modify an existing React component based on specific instructions.
+
+COMPONENT DETAILS:
+- Original Name: ${dataComponent.name}
+- Component Function Name: ${componentName}
+- Description: ${dataComponent.description}
+- Props Schema (JSON Schema): ${propsJson}
+
+EXISTING COMPONENT CODE:
+\`\`\`jsx
+${existingCode}
+\`\`\`
+
+MODIFICATION INSTRUCTIONS:
+${instructions}
+
+REQUIREMENTS:
+1. Modify the existing component code according to the instructions
+2. Keep using Tailwind CSS SEMANTIC COLOR CLASSES (bg-background, text-foreground, etc.)
+3. Maintain the balanced spacing and design principles from the original
+4. Keep using lucide-react icons where appropriate
+5. DO NOT include export statements - just the imports and function
+6. DO NOT include TypeScript type annotations
+7. Component name should remain: ${componentName}
+8. DO NOT regenerate sample data - keep the same data structure
+
+OUTPUT FORMAT:
+You need to generate only one thing:
+1. "component": The modified React component code as a string
+
+Return ONLY the component field, the mockData field will be reused from the existing render.
+
+EXAMPLE OUTPUT:
+{
+  "component": "import { Mail, User } from 'lucide-react';\\n\\nfunction ${componentName}(props) {\\n  // Modified component code here\\n}"
+}
+
+Focus on making the requested changes while maintaining the component's quality and design principles.`;
+  }
+
+  return `You are an expert React and Tailwind CSS developer. Generate a beautiful, modern React component for displaying data and sample data to preview it.
+
+COMPONENT DETAILS:
+- Original Name: ${dataComponent.name}
+- Component Function Name: ${componentName}
+- Description: ${dataComponent.description}
+- Props Schema (JSON Schema): ${propsJson}
+
+REQUIREMENTS:
+1. Create a React functional component (JSX, not TypeScript)
+2. Use Tailwind CSS SEMANTIC COLOR CLASSES (these automatically adapt to light/dark mode):
+   - Background: bg-background, bg-card, bg-muted, bg-muted/40, bg-accent, bg-primary
+   - Text: text-foreground, text-muted-foreground, text-card-foreground, text-primary-foreground
+   - Borders: border-border, border-input, border-muted
+   - DO NOT use direct colors like bg-white, bg-gray-800, text-gray-900, etc.
+   - DO NOT use dark: prefix - semantic classes handle dark mode automatically
+3. Make it balanced - comfortable but efficient:
+   - Use moderate padding: p-4, px-4 py-3 (balanced, not cramped or excessive)
+   - Use appropriate text sizes: text-sm for body, text-base for headings, text-xs for captions
+   - Use balanced spacing: gap-2.5, gap-3, space-y-2, mt-2, mb-3
+   - Aim for a clean, professional look with good readability
+4. Design for embedding - this component blends into existing content:
+   - DO NOT add redundant titles or headers unless they're part of the actual data schema
+   - Focus on displaying the data directly and elegantly
+   - Assume the component is part of a larger conversation or content flow
+   - If the schema has a "title" or "name" property, display it as data, not as a wrapper heading
+5. Use LUCIDE-REACT ICONS to enhance UI aesthetics:
+   - Import icons from lucide-react: import { User, Mail, Clock } from 'lucide-react'
+   - Use icons with size-4 or size-5 classes for balanced visibility
+   - Place icons inline with text or as visual indicators
+   - Example: <User className="size-4" /> or <Mail className="size-4 text-muted-foreground" />
+   - Common useful icons: User, Mail, Calendar, Clock, Check, X, Star, Heart, Settings, Search, etc.
+6. The component should accept props that match the JSON Schema properties
+7. Make it visually appealing and professional - clean with good whitespace
+8. Use semantic HTML elements
+9. Make it responsive and accessible
+10. You can import icons from 'lucide-react' at the top
+11. DO NOT include export statements - just the imports and function
+12. DO NOT include TypeScript type annotations
+13. Component name should be exactly: ${componentName}
+
+AVAILABLE SEMANTIC COLOR CLASSES:
+- Backgrounds: bg-background, bg-foreground, bg-card, bg-popover, bg-primary, bg-secondary, bg-muted, bg-accent, bg-destructive
+- Text: text-foreground, text-background, text-card-foreground, text-popover-foreground, text-primary-foreground, text-secondary-foreground, text-muted-foreground, text-accent-foreground, text-destructive
+- Borders: border-border, border-input, border-ring
+- You can use opacity modifiers: bg-muted/40, bg-accent/10, etc.
+
+OUTPUT FORMAT:
+You need to generate two things:
+1. "component": The complete React component code as a string
+2. "mockData": Realistic sample data that matches the props schema (as a JSON object)
+
+EXAMPLE OUTPUT (for a user profile schema with name, email, role):
+{
+  "component": "import { Mail, User } from 'lucide-react';\\n\\nfunction ${componentName}(props) {\\n  return (\\n    <div className=\\"p-4 rounded-lg border border-border bg-card\\">\\n      <div className=\\"flex items-center gap-2.5 mb-2\\">\\n        <User className=\\"size-4 text-muted-foreground\\" />\\n        <span className=\\"text-base font-medium text-foreground\\">{props.name}</span>\\n      </div>\\n      <div className=\\"flex items-center gap-2 text-sm text-muted-foreground\\">\\n        <Mail className=\\"size-4\\" />\\n        <span>{props.email}</span>\\n      </div>\\n      <div className=\\"text-xs text-muted-foreground mt-2\\">Role: {props.role}</div>\\n    </div>\\n  );\\n}",
+  "mockData": {
+    "name": "Sarah Chen",
+    "email": "sarah.chen@example.com",
+    "role": "Product Manager"
+  }
+}
+
+REMEMBER:
+- ONLY use semantic color classes (bg-card, text-foreground, etc.)
+- NO direct colors (bg-white, text-gray-900, etc.)
+- NO dark: prefix needed - semantic classes adapt automatically
+- Use balanced spacing (p-4, gap-2.5/gap-3, text-sm for body, text-base for headings)
+- Use lucide-react icons where appropriate for better UI
+- NO redundant titles - just display the actual data from props
+- Design for embedding - this blends into existing content, not a standalone card
+- Make the sample data realistic and useful for previewing the component`;
+}
+
+/**
+ * Sanitize component name to be a valid React component name
+ */
+function sanitizeComponentName(name: string): string {
+  return name
+    .split(/\s+/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('')
+    .replace(/[^a-zA-Z0-9]/g, '');
+}

package/src/components/agent/playground/chat-widget.tsx

@@ -179,7 +179,7 @@ export function ChatWidget({
       <div className="flex-1 min-w-0 h-full">
         <InkeepEmbeddedChat
           baseSettings={{
-            onEvent: (event: InkeepCallbackEvent) => {
+            onEvent: async (event: InkeepCallbackEvent) => {
               if (event.eventName === 'assistant_message_received') {
                 // Mark that we've received the assistant message
                 hasReceivedAssistantMessageRef.current = true;
@@ -256,7 +256,7 @@ export function ChatWidget({
             headers: {
               'x-inkeep-tenant-id': tenantId,
               'x-inkeep-project-id': projectId,
-              'x-inkeep-agent-id': agentId,
+              'x-inkeep-agent-id': agentId || '',
               'x-emit-operations': 'true',
               Authorization: `Bearer ${PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET}`,
               ...customHeaders,

package/src/components/ui/external-link.tsx

@@ -24,7 +24,7 @@ export function ExternalLink({
       {children}
       <ArrowUpRight
         className={cn(
-          'size-3.5 text-muted-foreground/60 group-hover/link:text-primary',
+          'size-3.5 text-muted-foreground opacity-60 group-hover/link:text-primary',
           iconClassName
         )}
       />

package/src/components/ui/item-card.tsx

@@ -91,7 +91,7 @@ export function ItemCardFooter({ footerText }: { footerText: string }) {
     <div className="relative flex items-center justify-between">
       <div className="flex items-center text-xs text-muted-foreground">{footerText}</div>
       <div className="opacity-0 group-hover:opacity-60 transform translate-x-1 group-hover:translate-x-0 transition-all duration-300">
-        <ArrowRight className="w-4 h-4 text-muted-foreground/60" />
+        <ArrowRight className="w-4 h-4 text-muted-foreground opacity-60" />
       </div>
     </div>
   );

package/src/lib/ai/model-factory.ts

@@ -0,0 +1,204 @@
+/**
+ * ModelFactory for creating AI SDK language models from configuration
+ * Copied from agents-run-api for use in manage-ui API routes
+ */
+
+import { anthropic, createAnthropic } from '@ai-sdk/anthropic';
+import { createGateway, gateway } from '@ai-sdk/gateway';
+import { createGoogleGenerativeAI, google } from '@ai-sdk/google';
+import { createOpenAI, openai } from '@ai-sdk/openai';
+import { createOpenRouter, openrouter } from '@openrouter/ai-sdk-provider';
+import type { LanguageModel } from 'ai';
+
+export interface ModelSettings {
+  model?: string;
+  providerOptions?: Record<string, unknown>;
+}
+
+/**
+ * Factory for creating AI SDK language models from configuration
+ * Supports multiple providers and AI Gateway integration
+ */
+export class ModelFactory {
+  /**
+   * Create a provider instance with custom configuration
+   */
+  private static createProvider(provider: string, config: Record<string, unknown>): any {
+    switch (provider) {
+      case 'anthropic':
+        return createAnthropic(config);
+      case 'openai':
+        return createOpenAI(config);
+      case 'google':
+        return createGoogleGenerativeAI(config);
+      case 'openrouter':
+        return createOpenRouter(config);
+      case 'gateway':
+        return createGateway(config);
+      default:
+        throw new Error(`Unsupported provider: ${provider}`);
+    }
+  }
+
+  /**
+   * Extract provider configuration from providerOptions
+   * Only includes settings that go to the provider constructor (baseURL, apiKey, etc.)
+   */
+  private static extractProviderConfig(
+    providerOptions?: Record<string, unknown>
+  ): Record<string, unknown> {
+    if (!providerOptions) {
+      return {};
+    }
+
+    const providerConfig: Record<string, unknown> = {};
+
+    if (providerOptions.baseUrl || providerOptions.baseURL) {
+      providerConfig.baseURL = providerOptions.baseUrl || providerOptions.baseURL;
+    }
+
+    if (providerOptions.gateway) {
+      Object.assign(providerConfig, providerOptions.gateway);
+    }
+
+    return providerConfig;
+  }
+
+  /**
+   * Create a language model instance from configuration
+   * Throws error if no config provided - models must be configured at project level
+   */
+  static createModel(config: ModelSettings): any {
+    if (!config?.model?.trim()) {
+      throw new Error(
+        'Model configuration is required. Please configure models at the project level.'
+      );
+    }
+
+    const modelSettings = config;
+    if (!modelSettings.model) {
+      throw new Error('Model configuration is required');
+    }
+    const modelString = modelSettings.model.trim();
+    const { provider, modelName } = ModelFactory.parseModelString(modelString);
+
+    console.log('Creating language model', {
+      provider,
+      model: modelName,
+      hasProviderOptions: !!modelSettings.providerOptions,
+    });
+
+    const providerConfig = ModelFactory.extractProviderConfig(modelSettings.providerOptions);
+
+    if (Object.keys(providerConfig).length > 0) {
+      console.log(`Applying custom ${provider} provider configuration`, providerConfig);
+      const customProvider = ModelFactory.createProvider(provider, providerConfig);
+      return customProvider.languageModel(modelName);
+    }
+
+    switch (provider) {
+      case 'anthropic':
+        return anthropic(modelName);
+      case 'openai':
+        return openai(modelName);
+      case 'google':
+        return google(modelName);
+      case 'openrouter':
+        return openrouter(modelName);
+      case 'gateway':
+        return gateway(modelName);
+      default:
+        throw new Error(
+          `Unsupported provider: ${provider}. ` +
+            `Supported providers are: ${ModelFactory.BUILT_IN_PROVIDERS.join(', ')}. ` +
+            `To access other models, use OpenRouter (openrouter/model-id) or Vercel AI Gateway (gateway/model-id).`
+        );
+    }
+  }
+
+  /**
+   * Built-in providers that have special handling
+   */
+  private static readonly BUILT_IN_PROVIDERS = [
+    'anthropic',
+    'openai',
+    'google',
+    'openrouter',
+    'gateway',
+  ] as const;
+
+  /**
+   * Parse model string to extract provider and model name
+   * Examples: "anthropic/claude-sonnet-4" -> { provider: "anthropic", modelName: "claude-sonnet-4" }
+   *          "openrouter/anthropic/claude-sonnet-4" -> { provider: "openrouter", modelName: "anthropic/claude-sonnet-4" }
+   */
+  static parseModelString(modelString: string): { provider: string; modelName: string } {
+    if (modelString.includes('/')) {
+      const [provider, ...modelParts] = modelString.split('/');
+      const normalizedProvider = provider.toLowerCase();
+
+      if (!ModelFactory.BUILT_IN_PROVIDERS.includes(normalizedProvider as any)) {
+        throw new Error(
+          `Unsupported provider: ${normalizedProvider}. ` +
+            `Supported providers are: ${ModelFactory.BUILT_IN_PROVIDERS.join(', ')}. ` +
+            `To access other models, use OpenRouter (openrouter/model-id) or Vercel AI Gateway (gateway/model-id).`
+        );
+      }
+
+      return {
+        provider: normalizedProvider,
+        modelName: modelParts.join('/'),
+      };
+    }
+
+    throw new Error(`No provider specified in model string: ${modelString}`);
+  }
+
+  /**
+   * Get generation parameters from provider options
+   * These are parameters that get passed to generateText/streamText calls
+   */
+  static getGenerationParams(providerOptions?: Record<string, unknown>): Record<string, unknown> {
+    if (!providerOptions) {
+      return {};
+    }
+
+    const excludedKeys = ['apiKey', 'baseURL', 'baseUrl', 'maxDuration'];
+
+    const params: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(providerOptions)) {
+      if (!excludedKeys.includes(key) && value !== undefined) {
+        params[key] = value;
+      }
+    }
+
+    return params;
+  }
+
+  /**
+   * Prepare complete generation configuration from model settings
+   * Returns model instance and generation parameters ready to spread into generateText/streamText
+   * Includes maxDuration if specified in provider options (in seconds, following Vercel standard)
+   */
+  static prepareGenerationConfig(modelSettings?: ModelSettings): {
+    model: LanguageModel;
+    maxDuration?: number;
+  } & Record<string, unknown> {
+    const modelString = modelSettings?.model?.trim();
+
+    const model = ModelFactory.createModel({
+      model: modelString,
+      providerOptions: modelSettings?.providerOptions,
+    });
+
+    const generationParams = ModelFactory.getGenerationParams(modelSettings?.providerOptions);
+
+    const maxDuration = modelSettings?.providerOptions?.maxDuration as number | undefined;
+
+    return {
+      model,
+      ...generationParams,
+      ...(maxDuration !== undefined && { maxDuration }),
+    };
+  }
+}