next-ai-draw-io/app/api/chat/route.ts

import { google } from "@ai-sdk/google";
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
import { z } from "zod";
import { readFileSync } from 'fs';
import { resolve } from 'path';

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

// Read the XML guide from file

const guide = readFileSync(resolve('./app/api/chat/xml_guide.md'), 'utf8');

export async function POST(req: Request) {
  const { messages } = await req.json();


  // Read and escape the guide content
  const systemMessage = `
You are a helpful assistant that can create, edit, and display diagram using draw.io through xml strings.
You can use the following tools:
---Tool1---
tool name: display_flow_chart
description: write a xml and display it on draw.io
parameters: {
  xml: string
}
---Tool2---
tool name: fetch_flow_chart
description: Get the current diagram XML from draw.io
parameters: {}
---End of tools---

When you need to modify the diagram, you need fetch the current diagram XML from draw.io and then modify it and display it again.
here is a guide for the XML format: ${guide}
You can use the tools to create and manipulate diagram.
You can also answer questions and provide explanations.
If user want you to draw something rather than diagram, you can use the combination of the shape to draw it.
  `;

  // Add system message if only user message is provided
  const enhancedMessages = messages.length === 1
    ? [{ role: "system", content: systemMessage }, ...messages]
    : messages;

  const result = streamText({
    // model: google("gemini-2.0-flash"),
    model: openai("gpt-4o"),
    messages: enhancedMessages,
    tools: {
      // Client-side tool that will be executed on the client
      display_flow_chart: {
        description: "Display a flowchart on draw.io",
        parameters: z.object({
          xml: z.string().describe("XML string to be displayed on draw.io")
        })
      },
      // Client-side tool that will be executed on the client
      fetch_flow_chart: {
        description: "Get the current flowchart XML from draw.io",
        parameters: z.object({})
      }
    },
    temperature: 0,
  });

  return result.toDataStreamResponse();
}