@inkeep/agents-run-api 0.23.3 → 0.23.4

package/dist/index.cjs

@@ -12069,7 +12069,17 @@ var generatePreviewRoute = zodOpenapi.createRoute({
       tenantId: z6.z.string(),
       projectId: z6.z.string(),
       id: z6.z.string()
-    })
+    }),
+    body: {
+      content: {
+        "application/json": {
+          schema: z6.z.object({
+            instructions: z6.z.string().optional().describe("Custom instructions for modifying the component"),
+            existingCode: z6.z.string().optional().describe("Existing component code to modify")
+          })
+        }
+      }
+    }
   },
   responses: {
     200: {
@@ -12090,7 +12100,18 @@ var generatePreviewRoute = zodOpenapi.createRoute({
 });
 app4.openapi(generatePreviewRoute, async (c) => {
   const { tenantId, projectId, id } = c.req.valid("param");
-  logger26.info({ tenantId, projectId, dataComponentId: id }, "Generating component preview");
+  const body = c.req.valid("json");
+  const { instructions, existingCode } = body;
+  logger26.info(
+    {
+      tenantId,
+      projectId,
+      dataComponentId: id,
+      hasInstructions: !!instructions,
+      hasExistingCode: !!existingCode
+    },
+    "Generating component preview"
+  );
   const dataComponent = await agentsCore.getDataComponent(dbClient_default)({
     scopes: { tenantId, projectId },
     dataComponentId: id
@@ -12110,7 +12131,7 @@ app4.openapi(generatePreviewRoute, async (c) => {
       message: "Project base model configuration is required"
     });
   }
-  const prompt = buildGenerationPrompt(dataComponent);
+  const prompt = buildGenerationPrompt(dataComponent, instructions, existingCode);
   try {
     const modelConfig = ModelFactory.prepareGenerationConfig(project.models.base);
     const previewSchema = z6.z.object({
@@ -12126,10 +12147,12 @@ app4.openapi(generatePreviewRoute, async (c) => {
     c.header("Content-Type", "text/plain; charset=utf-8");
     c.header("Cache-Control", "no-cache");
     c.header("Connection", "keep-alive");
+    const existingData = existingCode && dataComponent.preview?.data ? dataComponent.preview.data : null;
     return streaming.stream(c, async (stream3) => {
       try {
         for await (const partialObject of result.partialObjectStream) {
-          await stream3.write(JSON.stringify(partialObject) + "\n");
+          const outputObject = instructions && existingData ? { ...partialObject, data: existingData } : partialObject;
+          await stream3.write(JSON.stringify(outputObject) + "\n");
         }
       } catch (error) {
         logger26.error(
@@ -12152,10 +12175,50 @@ app4.openapi(generatePreviewRoute, async (c) => {
     });
   }
 });
-function buildGenerationPrompt(dataComponent) {
+function buildGenerationPrompt(dataComponent, instructions, existingCode) {
   const propsSchema = dataComponent.props || {};
   const propsJson = JSON.stringify(propsSchema, null, 2);
   const componentName = sanitizeComponentName(dataComponent.name);
+  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. "code": The modified React component code as a string
+
+Return ONLY the code field, the data field will be reused from the existing preview.
+
+EXAMPLE OUTPUT:
+{
+  "code": "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:

package/dist/index.js

@@ -10576,7 +10576,17 @@ var generatePreviewRoute = createRoute({
       tenantId: z.string(),
       projectId: z.string(),
       id: z.string()
-    })
+    }),
+    body: {
+      content: {
+        "application/json": {
+          schema: z.object({
+            instructions: z.string().optional().describe("Custom instructions for modifying the component"),
+            existingCode: z.string().optional().describe("Existing component code to modify")
+          })
+        }
+      }
+    }
   },
   responses: {
     200: {
@@ -10597,7 +10607,18 @@ var generatePreviewRoute = createRoute({
 });
 app4.openapi(generatePreviewRoute, async (c) => {
   const { tenantId, projectId, id } = c.req.valid("param");
-  logger22.info({ tenantId, projectId, dataComponentId: id }, "Generating component preview");
+  const body = c.req.valid("json");
+  const { instructions, existingCode } = body;
+  logger22.info(
+    {
+      tenantId,
+      projectId,
+      dataComponentId: id,
+      hasInstructions: !!instructions,
+      hasExistingCode: !!existingCode
+    },
+    "Generating component preview"
+  );
   const dataComponent = await getDataComponent(dbClient_default)({
     scopes: { tenantId, projectId },
     dataComponentId: id
@@ -10617,7 +10638,7 @@ app4.openapi(generatePreviewRoute, async (c) => {
       message: "Project base model configuration is required"
     });
   }
-  const prompt = buildGenerationPrompt(dataComponent);
+  const prompt = buildGenerationPrompt(dataComponent, instructions, existingCode);
   try {
     const modelConfig = ModelFactory.prepareGenerationConfig(project.models.base);
     const previewSchema = z.object({
@@ -10633,10 +10654,12 @@ app4.openapi(generatePreviewRoute, async (c) => {
     c.header("Content-Type", "text/plain; charset=utf-8");
     c.header("Cache-Control", "no-cache");
     c.header("Connection", "keep-alive");
+    const existingData = existingCode && dataComponent.preview?.data ? dataComponent.preview.data : null;
     return stream(c, async (stream3) => {
       try {
         for await (const partialObject of result.partialObjectStream) {
-          await stream3.write(JSON.stringify(partialObject) + "\n");
+          const outputObject = instructions && existingData ? { ...partialObject, data: existingData } : partialObject;
+          await stream3.write(JSON.stringify(outputObject) + "\n");
         }
       } catch (error) {
         logger22.error(
@@ -10659,10 +10682,50 @@ app4.openapi(generatePreviewRoute, async (c) => {
     });
   }
 });
-function buildGenerationPrompt(dataComponent) {
+function buildGenerationPrompt(dataComponent, instructions, existingCode) {
   const propsSchema = dataComponent.props || {};
   const propsJson = JSON.stringify(propsSchema, null, 2);
   const componentName = sanitizeComponentName(dataComponent.name);
+  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. "code": The modified React component code as a string
+
+Return ONLY the code field, the data field will be reused from the existing preview.
+
+EXAMPLE OUTPUT:
+{
+  "code": "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:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-run-api",
-  "version": "0.23.3",
+  "version": "0.23.4",
   "description": "Agents Run API for Inkeep Agent Framework - handles chat, agent execution, and streaming",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
     "traverse": "^0.6.11",
     "ts-pattern": "^5.7.1",
     "zod": "^4.1.11",
-    "@inkeep/agents-core": "^0.23.3"
+    "@inkeep/agents-core": "^0.23.4"
   },
   "optionalDependencies": {
     "keytar": "^7.9.0"