@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/landing/src/app/examples/page.tsx

@@ -0,0 +1,174 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, Zap } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Examples — Real Agent Swarm Sessions — Agent Swarm",
+  description:
+    "See what AI agent swarms can do. Real session transcripts showing autonomous task execution, crypto payments, and more.",
+  openGraph: {
+    title: "Examples — Real Agent Swarm Sessions",
+    description:
+      "Real session transcripts showing autonomous AI agent coordination in action.",
+    url: "https://agent-swarm.dev/examples",
+    siteName: "Agent Swarm",
+    type: "website",
+    images: [
+      {
+        url: "https://agent-swarm.dev/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Examples — Real Agent Swarm Sessions",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Examples — Real Agent Swarm Sessions",
+    description:
+      "Real session transcripts showing autonomous AI agent coordination in action.",
+    images: ["https://agent-swarm.dev/og-image.png"],
+  },
+  alternates: {
+    canonical: "/examples",
+  },
+};
+
+type Example = {
+  slug: string;
+  title: string;
+  description: string;
+  tags: string[];
+  icon: React.ReactNode;
+  image?: string;
+};
+
+const examples: Example[] = [
+  {
+    slug: "x402",
+    title: "AI Agents Pay for Services with Crypto",
+    description:
+      "The agent swarm used x402 protocol to autonomously pay $0.05 USDC on Base mainnet and generate an anime-style image — no human wallet interaction.",
+    tags: ["x402", "Crypto Payments", "Base", "Image Gen"],
+    icon: <Zap className="w-5 h-5" />,
+    image:
+      "https://blob.imference.com/large/37f7ee3b-616b-402f-8cb3-d69896165e3f.webp",
+  },
+];
+
+function ExampleCard({ example }: { example: Example }) {
+  return (
+    <Link
+      href={`/examples/${example.slug}`}
+      className="group block rounded-2xl border border-zinc-200 bg-white hover:border-zinc-300 hover:shadow-lg hover:shadow-zinc-200/50 transition-all overflow-hidden"
+    >
+      {example.image && (
+        <div className="aspect-video overflow-hidden bg-zinc-100 relative">
+          <Image
+            src={example.image}
+            alt={example.title}
+            fill
+            className="object-cover group-hover:scale-[1.02] transition-transform duration-500"
+            sizes="(max-width: 768px) 100vw, 672px"
+          />
+        </div>
+      )}
+      <div className="p-5 md:p-6">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0">
+            {example.icon}
+          </div>
+          <div className="flex-1 min-w-0">
+            <h2 className="text-[15px] md:text-base font-semibold text-zinc-900 group-hover:text-amber-800 transition-colors leading-snug">
+              {example.title}
+            </h2>
+            <p className="text-[13px] text-zinc-500 mt-1.5 leading-relaxed">
+              {example.description}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center justify-between mt-4 pt-3 border-t border-zinc-100">
+          <div className="flex gap-1.5 flex-wrap">
+            {example.tags.map((tag) => (
+              <span
+                key={tag}
+                className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-zinc-100 text-zinc-500"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+          <ArrowRight className="w-4 h-4 text-zinc-400 group-hover:text-amber-600 group-hover:translate-x-0.5 transition-all shrink-0" />
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+export default function ExamplesPage() {
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: "Examples — Real Agent Swarm Sessions",
+    description:
+      "See what AI agent swarms can do. Real session transcripts showing autonomous task execution, crypto payments, and more.",
+    url: "https://agent-swarm.dev/examples",
+    isPartOf: {
+      "@type": "WebSite",
+      name: "Agent Swarm",
+      url: "https://agent-swarm.dev",
+    },
+    mainEntity: {
+      "@type": "ItemList",
+      itemListElement: examples.map((example, index) => ({
+        "@type": "ListItem",
+        position: index + 1,
+        url: `https://agent-swarm.dev/examples/${example.slug}`,
+        name: example.title,
+      })),
+    },
+  };
+
+  return (
+    <main className="min-h-screen bg-zinc-50/50">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* Top bar */}
+      <nav className="border-b border-zinc-200/60 bg-white/90 backdrop-blur-xl sticky top-0 z-50">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6 h-12 flex items-center gap-3">
+          <Link
+            href="/"
+            className="flex items-center gap-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 transition-colors"
+          >
+            <ArrowLeft className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">Home</span>
+          </Link>
+          <div className="w-px h-4 bg-zinc-200" />
+          <span className="text-[13px] font-medium text-zinc-700">
+            Examples
+          </span>
+        </div>
+      </nav>
+
+      <div className="mx-auto max-w-3xl px-4 sm:px-6">
+        <header className="pt-8 pb-6 md:pt-12 md:pb-8">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-zinc-900">
+            Examples
+          </h1>
+          <p className="mt-2 text-[15px] text-zinc-500 leading-relaxed">
+            Real sessions from the Agent Swarm — see what autonomous AI agents can do.
+          </p>
+        </header>
+
+        <div className="grid gap-4 pb-12">
+          {examples.map((example) => (
+            <ExampleCard key={example.slug} example={example} />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}

package/landing/src/app/examples/x402/page.tsx

@@ -0,0 +1,456 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ExternalLink, CheckCircle, Wallet, Zap } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "x402 Payment Session — AI Agents Pay for Services with Crypto — Agent Swarm",
+  description:
+    "Watch a real session where the Agent Swarm used x402 protocol to autonomously pay $0.05 USDC on Base mainnet and generate an AI image — no human wallet interaction.",
+  openGraph: {
+    title: "x402 Payment Session — AI Agents Pay with Crypto",
+    description:
+      "A real session: AI agents used x402 protocol to pay for image generation with USDC on Base mainnet.",
+    url: "https://agent-swarm.dev/examples/x402",
+    siteName: "Agent Swarm",
+    type: "article",
+    publishedTime: "2026-02-28T00:00:00Z",
+    images: [
+      {
+        url: "https://blob.imference.com/large/37f7ee3b-616b-402f-8cb3-d69896165e3f.webp",
+        width: 1024,
+        height: 1024,
+        alt: "A cat on a skateboard, anime style — generated via x402 payment",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "x402 Payment Session — AI Agents Pay with Crypto",
+    description:
+      "Real session: AI agents used x402 protocol to pay $0.05 USDC for image generation on Base mainnet.",
+    images: [
+      "https://blob.imference.com/large/37f7ee3b-616b-402f-8cb3-d69896165e3f.webp",
+    ],
+  },
+  alternates: {
+    canonical: "/examples/x402",
+  },
+};
+
+function Avatar({
+  sender,
+}: {
+  sender: "human" | "agent";
+}) {
+  return (
+    <div
+      className={`w-8 h-8 md:w-9 md:h-9 rounded-full flex items-center justify-center shrink-0 text-[11px] font-bold select-none ${
+        sender === "human"
+          ? "bg-gradient-to-br from-amber-600 to-amber-800 text-white"
+          : "bg-gradient-to-br from-zinc-800 to-zinc-950 text-amber-400"
+      }`}
+    >
+      {sender === "human" ? "T" : "AI"}
+    </div>
+  );
+}
+
+function Message({
+  sender,
+  label,
+  highlight,
+  children,
+}: {
+  sender: "human" | "agent";
+  label: string;
+  highlight?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <article className="group">
+      <div className="flex gap-3 items-start">
+        <Avatar sender={sender} />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1.5">
+            <span
+              className={`text-[13px] font-semibold ${
+                sender === "human" ? "text-amber-800" : "text-zinc-800"
+              }`}
+            >
+              {label}
+            </span>
+          </div>
+          <div
+            className={`rounded-2xl px-4 py-3 md:px-5 md:py-4 ${
+              highlight
+                ? "bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/80 shadow-sm"
+                : sender === "human"
+                  ? "bg-zinc-100/80"
+                  : "bg-white border border-zinc-100"
+            }`}
+          >
+            <div className="[&>*:last-child]:mb-0">{children}</div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function Badge({ children, variant = "default" }: { children: React.ReactNode; variant?: "default" | "success" }) {
+  const styles = variant === "success"
+    ? "bg-emerald-100 text-emerald-800 border-emerald-200"
+    : "bg-zinc-100 text-zinc-600 border-zinc-200";
+  return (
+    <span className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2.5 py-1 rounded-full border ${styles} mb-3`}>
+      {children}
+    </span>
+  );
+}
+
+function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-0">
+      <span className="text-[13px] font-semibold text-zinc-500 sm:w-24 shrink-0">{label}</span>
+      <span className="text-[13px] text-zinc-800">{children}</span>
+    </div>
+  );
+}
+
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@type": "Article",
+  headline: "x402 Payment Session — AI Agents Pay for Services with Crypto",
+  description:
+    "Watch a real session where the Agent Swarm used x402 protocol to autonomously pay $0.05 USDC on Base mainnet and generate an AI image.",
+  datePublished: "2026-02-28T00:00:00Z",
+  author: {
+    "@type": "Organization",
+    name: "Agent Swarm",
+    url: "https://agent-swarm.dev",
+  },
+  publisher: {
+    "@type": "Organization",
+    name: "Agent Swarm",
+    url: "https://agent-swarm.dev",
+    logo: {
+      "@type": "ImageObject",
+      url: "https://agent-swarm.dev/logo.png",
+    },
+  },
+  mainEntityOfPage: "https://agent-swarm.dev/examples/x402",
+  image:
+    "https://blob.imference.com/large/37f7ee3b-616b-402f-8cb3-d69896165e3f.webp",
+};
+
+export default function X402ExamplePage() {
+  return (
+    <main className="min-h-screen bg-zinc-50/50">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      {/* Top bar */}
+      <nav className="border-b border-zinc-200/60 bg-white/90 backdrop-blur-xl sticky top-0 z-50">
+        <div className="mx-auto max-w-2xl px-4 sm:px-6 h-12 flex items-center gap-3">
+          <Link
+            href="/examples"
+            className="flex items-center gap-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 transition-colors"
+          >
+            <ArrowLeft className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">Examples</span>
+          </Link>
+          <div className="w-px h-4 bg-zinc-200" />
+          <div className="flex items-center gap-1.5">
+            <Zap className="w-3.5 h-3.5 text-amber-600" />
+            <span className="text-[13px] font-medium text-zinc-700">
+              x402 Payment Session
+            </span>
+          </div>
+        </div>
+      </nav>
+
+      <div className="mx-auto max-w-2xl px-4 sm:px-6">
+        {/* Header */}
+        <header className="pt-8 pb-6 md:pt-12 md:pb-8">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-zinc-900 leading-tight">
+            AI Agents Pay for Services
+            <br />
+            <span className="gradient-text">with Crypto</span>
+          </h1>
+          <p className="mt-3 text-[15px] text-zinc-500 leading-relaxed max-w-xl">
+            A real session where the agent swarm used the{" "}
+            <a
+              href="https://www.x402.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-amber-700 hover:text-amber-900 font-medium underline underline-offset-2 decoration-amber-300 transition-colors"
+            >
+              x402 protocol
+            </a>{" "}
+            to pay $0.05 USDC on Base and generate an image — autonomously.
+          </p>
+        </header>
+
+        {/* Result image */}
+        <section className="mb-8 md:mb-10">
+          <div className="rounded-2xl overflow-hidden border border-zinc-200 shadow-lg shadow-zinc-200/50 relative group">
+            <Image
+              src="https://blob.imference.com/large/37f7ee3b-616b-402f-8cb3-d69896165e3f.webp"
+              alt="A cat on a skateboard, anime style — generated via x402 payment"
+              width={1024}
+              height={1024}
+              className="w-full block"
+              priority
+              sizes="(max-width: 768px) 100vw, 672px"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
+            <div className="absolute bottom-0 left-0 right-0 p-4 md:p-5">
+              <p className="text-white/95 text-sm md:text-base font-medium italic font-[var(--font-sans)]">
+                &ldquo;a cat on a skateboard, anime style&rdquo;
+              </p>
+              <div className="flex gap-2 mt-2.5 flex-wrap">
+                <span className="text-[11px] font-medium px-2.5 py-1 rounded-full bg-white/15 text-white/90 backdrop-blur-sm border border-white/10">
+                  illustrious-hassuka-xl
+                </span>
+                <span className="text-[11px] font-bold px-2.5 py-1 rounded-full bg-amber-400/90 text-zinc-900 backdrop-blur-sm">
+                  $0.05 USDC
+                </span>
+                <span className="text-[11px] font-medium px-2.5 py-1 rounded-full bg-white/15 text-white/90 backdrop-blur-sm border border-white/10">
+                  Base mainnet
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* x402 flow card */}
+        <section className="mb-8 md:mb-10">
+          <div className="rounded-2xl bg-white border border-zinc-200 p-5 md:p-6">
+            <div className="flex items-center gap-2 mb-4">
+              <Wallet className="w-4 h-4 text-amber-700" />
+              <h2 className="text-[15px] font-semibold text-zinc-900">
+                How x402 Payment Works
+              </h2>
+            </div>
+            <div className="space-y-0">
+              {[
+                "Client sends POST request to API",
+                "Server responds with 402 Payment Required",
+                "Client signs EIP-712 payment (USDC on Base)",
+                "Client resends with X-PAYMENT header",
+                "Server validates, returns 200 with image",
+              ].map((label, i) => (
+                <div key={label}>
+                  <div className="flex items-center gap-3 py-2">
+                    <div className="w-6 h-6 rounded-full bg-amber-100 text-amber-800 flex items-center justify-center text-[11px] font-bold shrink-0">
+                      {i + 1}
+                    </div>
+                    <p className="text-[13px] text-zinc-700">{label}</p>
+                  </div>
+                  {i < 4 && (
+                    <div className="ml-3 h-3 border-l border-dashed border-zinc-200" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Transcript */}
+        <section className="pb-10">
+          <h2 className="text-lg md:text-xl font-semibold text-zinc-900 mb-6">
+            Session Transcript
+          </h2>
+
+          <div className="space-y-6">
+            {/* 1 */}
+            <Message sender="human" label="Taras">
+              <p className="text-[14px] text-zinc-700 leading-relaxed">
+                Can you create an Openfort wallet (prod) so I can top it up?
+              </p>
+            </Message>
+
+            {/* 2 */}
+            <Message sender="agent" label="Agent Swarm">
+              <p className="text-[14px] text-zinc-700 leading-relaxed mb-2">
+                On it. The plan:
+              </p>
+              <ol className="text-[14px] text-zinc-700 space-y-1.5 pl-5 list-decimal marker:text-zinc-400">
+                <li>Research the imference.com API (endpoints, pricing, x402 flow)</li>
+                <li>
+                  Write a script using our Openfort wallet{" "}
+                  <code className="text-[12px] bg-zinc-100 px-1.5 py-0.5 rounded-md font-mono">
+                    0x6943...271b
+                  </code>{" "}
+                  (5.89 USDC on Base)
+                </li>
+                <li>Generate the image: &ldquo;cat on a skateboard, anime style&rdquo;</li>
+                <li>Report back each step</li>
+              </ol>
+            </Message>
+
+            {/* 3 */}
+            <Message sender="agent" label="Agent Swarm">
+              <Badge>Step 1 — API Research</Badge>
+              <p className="text-[14px] text-zinc-700 leading-relaxed mb-3">
+                Research complete:
+              </p>
+              <div className="bg-zinc-50 rounded-xl p-3.5 space-y-2">
+                <InfoRow label="Endpoint">
+                  <code className="text-[12px] font-mono break-all">
+                    POST https://imference.com/ondemand/generate
+                  </code>
+                </InfoRow>
+                <InfoRow label="Payment">
+                  x402 protocol — $0.05/image in USDC on Base
+                </InfoRow>
+                <InfoRow label="Model">
+                  illustrious-hassaku-xl (anime)
+                </InfoRow>
+                <InfoRow label="SDK">
+                  <code className="text-[12px] font-mono">@x402/fetch</code> +{" "}
+                  <code className="text-[12px] font-mono">@x402/evm</code> handle 402 automatically
+                </InfoRow>
+              </div>
+            </Message>
+
+            {/* 4 */}
+            <Message sender="agent" label="Agent Swarm">
+              <Badge>Step 2 — Environment &amp; Script</Badge>
+              <p className="text-[14px] text-zinc-700 leading-relaxed mb-3">
+                Environment configured. Verification script written using{" "}
+                <code className="text-[12px] font-mono bg-zinc-100 px-1.5 py-0.5 rounded-md">
+                  createX402Client()
+                </code>{" "}
+                from the agent-swarm x402 module with Openfort signer on Base mainnet.
+              </p>
+              <div className="rounded-xl overflow-hidden">
+                <div className="bg-zinc-900 px-4 py-2 flex items-center gap-2 border-b border-zinc-800">
+                  <div className="flex gap-1.5">
+                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+                  </div>
+                  <span className="text-[11px] text-zinc-500 font-mono ml-2">verify-x402.ts</span>
+                </div>
+                <pre className="bg-zinc-950 text-zinc-300 p-4 text-[12px] md:text-[13px] font-mono overflow-x-auto leading-relaxed">
+{`const client = createX402Client({
+  signer: openfortSigner,
+  chain: "base",
+});
+
+const result = await client.fetch(
+  "https://imference.com/ondemand/generate",
+  {
+    method: "POST",
+    body: JSON.stringify({
+      prompt: "a cat on a skateboard, anime style",
+      model: "illustrious-hassuka-xl",
+    }),
+  }
+);
+// x402 handles 402 → sign → retry automatically`}
+                </pre>
+              </div>
+            </Message>
+
+            {/* 5 — Success */}
+            <Message sender="agent" label="Agent Swarm" highlight>
+              <Badge variant="success">
+                <CheckCircle className="w-3 h-3" />
+                Verification Successful
+              </Badge>
+              <p className="text-[14px] font-medium text-zinc-900 mb-3">
+                x402 payment flow verified end-to-end!
+              </p>
+              <div className="bg-white/80 rounded-xl p-3.5 border border-amber-200/60 space-y-2">
+                <InfoRow label="Prompt">&ldquo;a cat on a skateboard, anime style&rdquo;</InfoRow>
+                <InfoRow label="Model">illustrious-hassuka-xl</InfoRow>
+                <InfoRow label="Cost">$0.05 USDC on Base mainnet</InfoRow>
+                <InfoRow label="Wallet">
+                  <code className="text-[11px] font-mono break-all">
+                    0x69436bfe16c82a9a5ef74fd3de634c9c822c271b
+                  </code>
+                </InfoRow>
+              </div>
+              <p className="text-[13px] text-zinc-500 mt-3">
+                Real payment on Base mainnet. The entire flow — from request to image — was autonomous.
+              </p>
+            </Message>
+
+            {/* 6 */}
+            <Message sender="human" label="Taras">
+              <p className="text-[14px] text-zinc-700 leading-relaxed">
+                Nice! Make sure to remember how to pay using x402.
+              </p>
+            </Message>
+
+            <Message sender="agent" label="Agent Swarm">
+              <p className="text-[14px] text-zinc-700 leading-relaxed">
+                Noted. Saved a full x402 delegation guide to memory.
+              </p>
+            </Message>
+
+            {/* 7 */}
+            <Message sender="human" label="Taras">
+              <p className="text-[14px] text-zinc-700 leading-relaxed">
+                Can you create a new wallet and send me the address?
+              </p>
+            </Message>
+
+            <Message sender="agent" label="Agent Swarm">
+              <p className="text-[14px] text-zinc-700 leading-relaxed mb-3">
+                New Openfort production wallet created:
+              </p>
+              <div className="bg-zinc-50 rounded-xl p-3.5">
+                <InfoRow label="Address">
+                  <code className="text-[11px] font-mono break-all">
+                    0x0c34aa778b2d839e3434af9972d5861e3756894d
+                  </code>
+                </InfoRow>
+              </div>
+              <p className="text-[13px] text-zinc-500 mt-2">
+                Brand new wallet — different from the existing one (0x69436bfe...).
+              </p>
+            </Message>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer className="border-t border-zinc-200 py-8">
+          <p className="text-[13px] text-zinc-500 leading-relaxed mb-5">
+            This is a real session from the{" "}
+            <Link href="/" className="text-amber-700 hover:text-amber-900 font-medium transition-colors">
+              Agent Swarm
+            </Link>
+            . The x402 protocol enables AI agents to autonomously pay for
+            services using cryptocurrency — no human wallet interaction needed.
+          </p>
+          <div className="flex gap-2.5 flex-wrap">
+            {[
+              { href: "https://www.x402.org/", label: "x402 Protocol" },
+              { href: "https://imference.com", label: "imference.com" },
+              {
+                href: "https://github.com/desplega-ai/agent-swarm",
+                label: "Agent Swarm",
+              },
+            ].map(({ href, label }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-[12px] font-medium text-zinc-500 hover:text-zinc-800 bg-white border border-zinc-200 hover:border-zinc-300 rounded-full px-3.5 py-1.5 transition-all"
+              >
+                <ExternalLink className="w-3 h-3" />
+                {label}
+              </a>
+            ))}
+          </div>
+        </footer>
+      </div>
+    </main>
+  );
+}