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

import { google } from "@ai-sdk/google";
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 flowcharts 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 flowchart XML from draw.io
parameters: {}
---End of tools---

When you need to modify the flowchart, you need fetch the current flowchart 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 flowcharts.
You can also answer questions and provide explanations.
If user want you to draw something rather than flowchart, 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"),
    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();
}