Two-Step Visualize Pattern

import { NextRequest } from "next/server";
import OpenAI from "openai";
import { transformStream } from "@crayonai/stream";
import { tools } from "./tools";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

const thesysClient = new OpenAI({
  baseURL: "https://api.thesys.dev/v1/visualize",
  apiKey: process.env.THESYS_API_KEY,
});

const SYSTEM_PROMPT = `You are a helpful assistant.

Your outputs will be processed by a downstream visualizer agent to generate a user interface.
The visualizer agent is responsible for generating a user interface based on your output but it does not have access to the tool calls or the database.
In your response, you should provide enough information with possible actions like buttons, forms, links, etc. that the user can take to interact with the UI.

If user asks for output in a specific component (e.g., graph, table, chart), generate the output in the requested format so the visualizer can render it properly. Give hints in your output so that the downstream agent can use those hints to generate UI properly.`;

export async function POST(req: NextRequest) {
  const { prompt, threadId, responseId } = await req.json();

  // Step 1: Call Standard OpenAI API
  const previousAiMessages = await getAIThreadMessages(threadId);

  // Use runTools helper to handle tool execution automatically
  const runner = openai.beta.chat.completions.runTools({
    model: "gpt-4",
    messages: [
      { role: "system", content: SYSTEM_PROMPT },
      ...previousAiMessages,
      { role: "user", content: prompt.content },
    ],
    temperature: 0.1,
    stream: false,
    tools: tools,
  });

  // Wait for OpenAI to complete (including tool calls)
  await runner.done();
  const finalMessages = runner.messages;

  // Step 2: Store AI Interaction History
  const newAiMessagesToStore = [];

  // Add the user prompt
  newAiMessagesToStore.push(prompt);

  // Track messages and extract final assistant message
  let finalAssistantMessageForUI;
  runner.on("message", (message) => {
    newAiMessagesToStore.push({ ...message, id: crypto.randomUUID() });
    if (typeof message.content === "string") {
      finalAssistantMessageForUI = message;
    }
  });

  // Step 3: Validate Final Assistant Content

  if (!finalAssistantMessageForUI ||
      typeof finalAssistantMessageForUI.content !== "string") {
    console.error("No final assistant message found");
    return new Response("", { status: 200 });
  }

  // Step 4: Call C1 Visualize API
  const thesysStreamRunner = thesysClient.beta.chat.completions.runTools({
    model: "c1/anthropic/claude-sonnet-4/v-20251230",
    messages: [
      ...previousAiMessages,
      { role: "user", content: prompt.content },
      { role: "assistant", content: finalAssistantMessageForUI.content },
    ],
    stream: true,
    tools: [], // No tools needed for Visualize API
  });

  // Visualize API returns only one assistant message
  thesysStreamRunner.on("message", async (message) => {
    // Step 5: Store messages after streaming completes
    await addMessages(
      threadId,
      newAiMessagesToStore,
      [prompt, { ...message, id: responseId }]
    );
  });

  const llmStream = await thesysStreamRunner;

  // Step 6: Stream Response to Client
  const responseStream = transformStream(llmStream, (chunk) => {
    return chunk.choices[0]?.delta?.content || "";
  });

  return new Response(responseStream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache, no-transform",
      Connection: "keep-alive",
    },
  });
}

"use client";

import "@crayonai/react-ui/styles/index.css";
import {
  C1Chat,
  useThreadListManager,
  useThreadManager,
} from "@thesysai/genui-sdk";
import * as apiClient from "@/src/apiClient";

export default function Home() {
  const threadListManager = useThreadListManager({
    fetchThreadList: () => apiClient.getThreadList(),
    deleteThread: (threadId) => apiClient.deleteThread(threadId),
    updateThread: (t) => apiClient.updateThread(t),
    createThread: (message) => apiClient.createThread(message.message),
  });

  const threadManager = useThreadManager({
    threadListManager,
    loadThread: (threadId) => apiClient.getMessages(threadId),
    onUpdateMessage: ({ message }) => {
      apiClient.updateMessage(
        threadListManager.selectedThreadId,
        message
      );
    },
    apiUrl: "/api/chat",
  });

  return (
    <C1Chat
      threadManager={threadManager}
      threadListManager={threadListManager}
    />
  );
}

model Thread {
  id          String      @id @default(uuid())
  title       String?
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt
  aiMessages  AIMessage[]
  uiMessages  UIMessage[]
}

model AIMessage {
  id        String   @id @default(uuid())
  threadId  String
  thread    Thread   @relation(fields: [threadId], references: [id], onDelete: Cascade)
  role      String
  content   String?
  toolCalls Json?
  toolCallId String?
  name      String?
  createdAt DateTime @default(now())
}

model UIMessage {
  id        String   @id @default(uuid())
  threadId  String
  thread    Thread   @relation(fields: [threadId], references: [id], onDelete: Cascade)
  role      String
  content   String?
  createdAt DateTime @default(now())
}