Add openui cloud docs

docs/components/docs-navbar.tsx

@@ -14,7 +14,12 @@ import { ThemeToggle } from "./theme-toggle";
 
 const tabs: { title: string; url: string; match?: string }[] = [
   { title: "OpenUI", url: "/docs/openui-lang" },
-  { title: "Agent Interface", url: "/docs/agent/getting-started/introduction", match: "/docs/agent" },
+  {
+    title: "Agent Interface",
+    url: "/docs/agent/getting-started/introduction",
+    match: "/docs/agent",
+  },
+  { title: "OpenUI Cloud", url: "/docs/openui-cloud" },
   { title: "API Reference", url: "/docs/api-reference" },
 ];
 

docs/components/fake-visual.tsx

@@ -0,0 +1,22 @@
+/**
+ * Placeholder for a screenshot, GIF, or gallery that will be added later.
+ * Usage in MDX: <FakeVisual label="Chat with an inline revenue chart" />
+ */
+export function FakeVisual({
+  label,
+  height = 320,
+}: {
+  label: string;
+  height?: number;
+}) {
+  return (
+    <div
+      style={{ height }}
+      className="not-prose my-6 flex w-full items-center justify-center rounded-xl border border-dashed border-fd-border bg-fd-muted/50"
+    >
+      <span className="max-w-md px-6 text-center text-sm text-fd-muted-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}

docs/components/mermaid.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useId, useState } from "react";
+
+/**
+ * Renders a Mermaid diagram client-side.
+ * Usage in MDX: <Mermaid chart={`sequenceDiagram\n  A->>B: hello`} />
+ */
+export function Mermaid({ chart }: { chart: string }) {
+  const id = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const { resolvedTheme } = useTheme();
+  const [svg, setSvg] = useState<string>("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const { default: mermaid } = await import("mermaid");
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: resolvedTheme === "dark" ? "dark" : "neutral",
+        fontFamily: "inherit",
+      });
+      try {
+        const { svg } = await mermaid.render(`mmd-${id}`, chart.trim());
+        if (!cancelled) setSvg(svg);
+      } catch {
+        // Leave the container empty rather than crash the page on a syntax error.
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, id, resolvedTheme]);
+
+  return (
+    <div
+      className="not-prose my-6 flex justify-center overflow-x-auto [&_svg]:max-w-full"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

docs/content/docs/meta.json

@@ -1,4 +1,10 @@
 {
   "title": "OpenUI",
-  "pages": ["openui-lang", "components", "agent", "api-reference"]
+  "pages": [
+    "openui-lang",
+    "components",
+    "agent",
+    "openui-cloud",
+    "api-reference"
+  ]
 }

docs/content/docs/openui-cloud/build/chat.mdx

@@ -0,0 +1,66 @@
+---
+title: Generative UI for agents
+description: "Agents respond with interactive interfaces that use forms, charts, and layout components suited to the conversation."
+---
+
+Agents can respond with interfaces that match the task instead of returning only text. OpenUI Cloud validates and streams each response so it renders live in the application. Use the built-in component library or bring your own.
+
+## Built-in component library
+
+OpenUI Cloud includes a pre-tested, responsive, and accessible set of components for forms, inputs, charts, content organization, and interactive actions.
+
+### Forms and inputs
+
+Form components include text fields, selects, options, and defaults. They compose into forms that collect structured input in one step instead of over several text messages.
+
+<video
+  src="/videos/agent/generative-ui-form-interaction.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Charts and visualizations
+
+Interactive chart components include pie, bar, line, area, and radial charts. Agents can select the format that matches the data, such as pie charts for shares, bar charts for comparisons, and line charts for trends.
+
+<video
+  src="/videos/openui-cloud/chat/charts-visualizations.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Content organization
+
+Layout components include tabs, accordions, tables, and cards. They organize long responses into scannable sections, such as alternatives in tabs, details in accordions, and comparisons in tables.
+
+<video
+  src="/videos/openui-cloud/chat/content-organization.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Buttons and actions
+
+Action components include buttons and controls for next steps such as confirming, booking, or refining. Interactions feed back into the conversation as structured events instead of typed commands.
+
+<video
+  src="/videos/openui-cloud/chat/buttons-and-actions.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+## Bring your own component library
+
+Connect your own design system and domain-specific components. Agents can use them to generate interfaces while OpenUI Cloud provides model reliability, output validation, and observability.

docs/content/docs/openui-cloud/build/reports.mdx

@@ -0,0 +1,84 @@
+---
+title: Reports
+description: "Generate long-form reports with rich components, manual editing, a dedicated viewer, and PDF export."
+---
+
+Using OpenUI Cloud, agents can generate long-form reports from a prompt or conversation with rich components for metrics, charts, tables, images, and structured content.
+
+Generated reports open in a dedicated viewer for reading, review, and manual editing. Reports can also be refined through conversation, every version is stored, and the finished document can be exported to PDF.
+
+<video
+  src="/videos/openui-cloud/reports/full-report.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+Reports are built with the following components.
+
+### Pages
+
+Page components include standard, minimal, and dramatic front pages, content pages, and a generated table of contents. They give a report its overall structure.
+
+<video
+  src="/videos/openui-cloud/reports/report-pages.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Text
+
+Text components include prose, inline headers, headlines, and statements that carry the narrative sections of a document.
+
+<video
+  src="/videos/openui-cloud/reports/report-section.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Metrics
+
+Metric components include key metrics, key statements, spotlight metrics, and numbered key points that present the figures a report is built around.
+
+<video
+  src="/videos/openui-cloud/reports/report-metrics.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Tables and collections
+
+Collection components include lists, tables, summary grids, mini cards, feature highlights, tags, and visual cards that organize comparisons and groupings.
+
+<video
+  src="/videos/openui-cloud/reports/report-tables.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>
+
+### Charts and media
+
+Chart and image components include interactive bar, line, area, and pie charts, along with image blocks that visualize data and illustrate the content.
+
+<video
+  src="/videos/openui-cloud/reports/report-chart-media.mp4"
+  autoPlay
+  loop
+  muted
+  playsInline
+  className="w-full rounded-lg border"
+/>