fix: llamacloud generate not working and re-add tests (#636)

Co-authored-by: Marcus Schiesser <mail@marcusschiesser.de>

.changeset/mighty-schools-punch.md

@@ -0,0 +1,6 @@
+---
+"create-llama": patch
+"@llamaindex/server": patch
+---
+
+fix: unsupported language in code gen workflow

packages/create-llama/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-llama
 
+## 0.5.15
+
+### Patch Changes
+
+- 527075c: Enable dev mode that allows updating code directly in the UI
+
 ## 0.5.14
 
 ### Patch Changes

packages/create-llama/e2e/shared/llamaindexserver_template.spec.ts

@@ -12,21 +12,30 @@ import { createTestDir, runCreateLlama, type AppType } from "../utils";
 const templateFramework: TemplateFramework = process.env.FRAMEWORK
   ? (process.env.FRAMEWORK as TemplateFramework)
   : "fastapi";
-const dataSource: string = "--example-file";
+const dataSource: string = process.env.DATASOURCE
+  ? (process.env.DATASOURCE as string)
+  : "--example-file";
+const llamaCloudProjectName = "create-llama";
+const llamaCloudIndexName = "e2e-test";
+
 const templateUI: TemplateUI = "shadcn";
 const templatePostInstallAction: TemplatePostInstallAction = "runApp";
 const appType: AppType = "--frontend";
 const userMessage = "Write a blog post about physical standards for letters";
-const templateUseCases = ["financial_report", "agentic_rag", "deep_research"];
+const templateUseCases = [
+  "agentic_rag",
+  "financial_report",
+  "deep_research",
+  "code_generator",
+];
 
 for (const useCase of templateUseCases) {
   test.describe(`Test use case ${useCase} ${templateFramework} ${dataSource} ${templateUI} ${appType} ${templatePostInstallAction}`, async () => {
     test.skip(
-      process.platform !== "linux" ||
-        process.env.DATASOURCE === "--no-files" ||
-        templateFramework === "express",
+      dataSource === "--no-files" || templateFramework === "express",
       "The llamaindexserver template currently only works with nextjs, fastapi. We also only run on Linux to speed up tests.",
     );
+    const useLlamaParse = dataSource === "--llamacloud";
     let port: number;
     let cwd: string;
     let name: string;
@@ -48,6 +57,9 @@ for (const useCase of templateUseCases) {
         templateUI,
         appType,
         useCase,
+        llamaCloudProjectName,
+        llamaCloudIndexName,
+        useLlamaParse,
       });
       name = result.projectName;
       appProcess = result.appProcess;

packages/create-llama/helpers/python.ts

@@ -267,7 +267,7 @@ const getAdditionalDependencies = (
     if (observability === "traceloop") {
       dependencies.push({
         name: "traceloop-sdk",
-        version: ">=0.15.11,<0.16.0",
+        version: ">=0.15.11",
       });
     }
     if (observability === "llamatrace") {
@@ -677,6 +677,7 @@ export const installPythonTemplate = async ({
     dataSources,
     tools,
     template,
+    observability,
   );
 
   await addDependencies(root, addOnDependencies);

packages/create-llama/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-llama",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "description": "Create LlamaIndex-powered apps with one command",
   "keywords": [
     "rag",

packages/create-llama/questions/ci.ts

@@ -6,7 +6,7 @@ const defaults: Omit<QuestionArgs, "modelConfig"> = {
   framework: "nextjs",
   ui: "shadcn",
   frontend: false,
-  llamaCloudKey: "",
+  llamaCloudKey: undefined,
   useLlamaParse: false,
   communityProjectConfig: undefined,
   llamapack: "",

packages/create-llama/templates/components/reflex/contract_review/pyproject.toml

@@ -12,7 +12,7 @@ dependencies = [
     "llama-index>=0.12.1",
     "llama-parse>=0.6.21,<0.7.0",
     "cachetools>=5.3.3",
-    "reflex>=0.6.2.post1",
+    "reflex==0.7.10",
 ]
 
 [project.scripts]

packages/create-llama/templates/components/reflex/extractor/pyproject.toml

@@ -13,7 +13,7 @@ dependencies = [
     "llama-index>=0.12.1",
     "llama-parse>=0.6.21,<0.7.0",
     "cachetools>=5.3.3",
-    "reflex>=0.6.2.post1",
+    "reflex==0.7.10",
 ]
 
 [project.scripts]

packages/create-llama/templates/components/use-cases/typescript/code_generator/src/app/workflow.ts

@@ -89,6 +89,9 @@ export function workflowFactory(reqBody: any) {
 
     return planEvent.with({
       userInput: userInput,
+      context: state.lastArtifact
+        ? JSON.stringify(state.lastArtifact)
+        : undefined,
     });
   });
 

packages/create-llama/templates/components/vectordbs/llamaindexserver/llamacloud/python/generate.py

@@ -12,11 +12,12 @@ from llama_index.server.services.llamacloud.generate import (
     load_to_llamacloud,
 )
 
+
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger()
 
 
-def generate_datasource():
+def generate_index():
     init_settings()
     logger.info("Generate index for the provided data")
 
@@ -27,5 +28,26 @@ def generate_datasource():
     load_to_llamacloud(index, logger=logger)
 
 
-if __name__ == "__main__":
-    generate_datasource()
+def generate_ui_for_workflow():
+    """
+    Generate UI for UIEventData event in app/workflow.py
+    """
+    import asyncio
+    from llama_index.llms.openai import OpenAI
+    from main import COMPONENT_DIR
+
+    # To generate UI components for additional event types,
+    # import the corresponding data model (e.g., MyCustomEventData)
+    # and run the generate_ui_for_workflow function with the imported model.
+    # Make sure the output filename of the generated UI component matches the event type (here `ui_event`)
+    try:
+        from app.workflow import UIEventData  # type: ignore
+    except ImportError:
+        raise ImportError("Couldn't generate UI component for the current workflow.")
+    from llama_index.server.gen_ui import generate_event_component
+
+    # works also well with Claude 3.7 Sonnet or Gemini Pro 2.5
+    llm = OpenAI(model="gpt-4.1")
+    code = asyncio.run(generate_event_component(event_cls=UIEventData, llm=llm))
+    with open(f"{COMPONENT_DIR}/ui_event.jsx", "w") as f:
+        f.write(code)

packages/create-llama/templates/components/vectordbs/llamaindexserver/llamacloud/typescript/generate.ts

@@ -1,7 +1,8 @@
+import { generateEventComponent } from "@llamaindex/server";
 import * as dotenv from "dotenv";
 import "dotenv/config";
 import * as fs from "fs/promises";
-import { LLamaCloudFileService } from "llamaindex";
+import { LLamaCloudFileService, OpenAI } from "llamaindex";
 import * as path from "path";
 import { getIndex } from "./app/data";
 import { initSettings } from "./app/settings";
@@ -88,7 +89,7 @@ async function loadAndIndex() {
   console.log(`Successfully uploaded documents to LlamaCloud!`);
 }
 
-(async () => {
+async function generateDatasource() {
   try {
     checkRequiredEnvVars();
     initSettings();
@@ -97,4 +98,39 @@ async function loadAndIndex() {
   } catch (error) {
     console.error("Error generating storage.", error);
   }
+}
+
+async function generateUi() {
+  // Also works well with Claude 3.5 Sonnet and Google Gemini 2.5 Pro
+  const llm = new OpenAI({ model: "gpt-4.1" });
+
+  const workflowModule = await import("./app/workflow");
+  const UIEventSchema = (workflowModule as any).UIEventSchema;
+  if (!UIEventSchema) {
+    throw new Error(
+      "To generate the UI, you must define a UIEventSchema in your workflow.",
+    );
+  }
+
+  const generatedCode = await generateEventComponent(UIEventSchema, llm);
+  // Write the generated code to components/ui_event.ts
+  await fs.writeFile("components/ui_event.jsx", generatedCode);
+}
+
+(async () => {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  initSettings();
+
+  if (command === "datasource") {
+    await generateDatasource();
+  } else if (command === "ui") {
+    await generateUi();
+  } else {
+    console.error(
+      'Invalid command. Please use "datasource" or "ui". Running "datasource" by default.',
+    );
+    await generateDatasource(); // Default behavior or could throw an error
+  }
 })();

packages/create-llama/templates/types/llamaindexserver/fastapi/app/settings.py

@@ -1,8 +1,12 @@
+import os
+
 from llama_index.core import Settings
 from llama_index.embeddings.openai import OpenAIEmbedding
 from llama_index.llms.openai import OpenAI
 
 
 def init_settings():
+    if os.getenv("OPENAI_API_KEY") is None:
+        raise RuntimeError("OPENAI_API_KEY is missing in environment variables")
     Settings.llm = OpenAI(model="gpt-4o-mini")
     Settings.embed_model = OpenAIEmbedding(model="text-embedding-3-small")

packages/create-llama/templates/types/llamaindexserver/fastapi/main.py

@@ -17,8 +17,10 @@ def create_app():
         ui_config=UIConfig(
             component_dir=COMPONENT_DIR,
             app_title="Chat App",
+            dev_mode=True,  # Please disable this in production
         ),
         logger=logger,
+        env="dev",
     )
     # You can also add custom FastAPI routes to app
     app.add_api_route("/api/health", lambda: {"message": "OK"}, status_code=200)

packages/create-llama/templates/types/llamaindexserver/fastapi/pyproject.toml

@@ -12,7 +12,7 @@ dependencies = [
     "pydantic<2.10",
     "aiostream>=0.5.2,<0.6.0",
     "llama-index-core>=0.12.28,<0.13.0",
-    "llama-index-server>=0.1.15,<0.2.0",
+    "llama-index-server>=0.1.16,<0.2.0",
 ]
 
 [project.optional-dependencies]

packages/create-llama/templates/types/llamaindexserver/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@llamaindex/openai": "^0.3.7",
-    "@llamaindex/server": "^0.2.0",
+    "@llamaindex/server": "^0.2.1",
     "@llamaindex/workflow": "^1.1.2",
     "@llamaindex/tools": "^0.0.10",
     "llamaindex": "^0.10.6",

packages/create-llama/templates/types/llamaindexserver/nextjs/src/generate.ts

@@ -8,7 +8,6 @@ import {
 import { initSettings } from "./app/settings";
 import fs from "fs";
 import { generateEventComponent } from "@llamaindex/server";
-import { UIEventSchema } from "./app/workflow";
 
 async function generateDatasource() {
   console.log(`Generating storage context...`);
@@ -30,6 +29,14 @@ async function generateUi() {
   // Also works well with Claude 3.5 Sonnet and Google Gemini 2.5 Pro
   const llm = new OpenAI({ model: "gpt-4.1" });
 
+  const workflowModule = await import("./app/workflow");
+  const UIEventSchema = (workflowModule as any).UIEventSchema;
+  if (!UIEventSchema) {
+    throw new Error(
+      "To generate the UI, you must define a UIEventSchema in your workflow.",
+    );
+  }
+
   // You can also generate for other workflow events
   const generatedCode = await generateEventComponent(UIEventSchema, llm);
   // Write the generated code to components/ui_event.ts

packages/create-llama/templates/types/llamaindexserver/nextjs/src/index.ts

@@ -10,5 +10,6 @@ new LlamaIndexServer({
   uiConfig: {
     appTitle: "LlamaIndex App",
     componentsDir: "components",
+    devMode: true,
   },
 }).start();

packages/server/next/app/components/ui/chat/dev-mode-panel.tsx

@@ -5,7 +5,7 @@ import {
   fileExtensionToEditorLang,
 } from "@llamaindex/chat-ui/widgets";
 import { AlertCircle, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "../button";
 import { getConfig } from "../lib/utils";
 
@@ -144,9 +144,12 @@ function DevModePanelComp() {
     }
   }, [devModeOpen]);
 
-  const codeEditorLanguage = fileExtensionToEditorLang(
-    workflowFile?.file_path.split(".").pop() ?? "",
-  );
+  const codeEditorLanguage = useMemo(() => {
+    if (!workflowFile?.file_path) return undefined;
+    return fileExtensionToEditorLang(
+      workflowFile.file_path.split(".").pop() ?? "",
+    );
+  }, [workflowFile]);
 
   return (
     <>

packages/server/src/events.ts

@@ -155,10 +155,12 @@ export function extractAllArtifacts(messages: Message[]): Artifact[] {
     const artifacts =
       message.annotations
         ?.filter(
-          (annotation) =>
+          (
+            annotation,
+          ): annotation is z.infer<typeof artifactAnnotationSchema> =>
             artifactAnnotationSchema.safeParse(annotation).success,
         )
-        .map((artifact) => artifact as Artifact) ?? [];
+        .map((annotation) => annotation.data as Artifact) ?? [];
 
     allArtifacts.push(...artifacts);
   }

python/llama-index-server/llama_index/server/chat_ui.py

@@ -5,7 +5,7 @@ from typing import Optional
 
 import requests
 
-CHAT_UI_VERSION = "0.1.6"
+CHAT_UI_VERSION = "0.2.1"
 
 
 def download_chat_ui(

python/llama-index-server/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "llama-index-server"
-version = "0.1.15"
+version = "0.1.16"
 description = "llama-index fastapi server"
 readme = "README.md"
 license = "MIT"