Feedback Form

The simplest ggui pattern: push a form, wait for submission, process the data.

One-Call Pattern

import { GguiClient } from "@ggui-ai/mcp-client";

const ggui = new GguiClient({
  apiKey: process.env.GGUI_API_KEY!,
  appId: process.env.GGUI_APP_ID!,
});

async function collectFeedback(userName: string, product: string) {
  // Push a feedback form and wait for completion in one call
  const { url, events } = await ggui.pushAndWait(
    {
      prompt: `Show a feedback form for ${product}. Include a 1-5 star rating,
               a text area for comments, and a submit button.
               Greet the user as "${userName}".`,
      context: { userName, product },
      schema: {
        type: "object",
        properties: {
          rating: { type: "number", minimum: 1, maximum: 5 },
          comments: { type: "string" },
        },
        required: ["rating"],
      },
    },
    { maxWait: 300_000 } // 5 minute timeout
  );

  console.log(`Please fill out the form: ${url}`);

  const submitEvent = events.find((e) => e.type === "data:submit");
  if (submitEvent) {
    const { rating, comments } = submitEvent.payload as {
      rating: number;
      comments: string;
    };
    console.log(`Rating: ${rating}/5`);
    console.log(`Comments: ${comments}`);
    return { rating, comments };
  }

  return null; // User didn't submit
}

Step-by-Step Variant

For more control over the flow (e.g., listening to field changes):

async function collectFeedbackDetailed() {
  // 1. Push the form
  const { sessionId, url } = await ggui.push({
    story: {
      intent: "Collect product feedback",
      prompt: "Show a product feedback form with rating and comments",
    },
  });

  console.log(`Form URL: ${url}`);

  // 2. Poll for events manually
  let submitted = false;
  while (!submitted) {
    const { events, status } = await ggui.consume(sessionId);

    for (const envelope of events) {
      if (envelope.type === "data:submit") {
        console.log("User submitted:", envelope.payload);
        submitted = true;
      }
      if (envelope.type === "data:change") {
        console.log("Field changed:", envelope.payload);
      }
    }

    if (status === "completed") break;
    await new Promise((r) => setTimeout(r, 2000));
  }

  // 3. Clean up
  await ggui.close(sessionId);
}

Expected Output

Form URL: https://render.guuey.com/abc123
Rating: 4/5
Comments: Great product, would love dark mode support!