Build Adaptive UIs with AI

import { HydraClient } from "hydra-ai";
import TransferMoney from "./components/transfer-money";
import FindTransaction from "./components/find-transaction";
import TakeLoan from "./components/take-loan";

const hydra = new HydraClient();

hydra.registerComponent(
  "TransferMoney",
  "Transfer money between accounts",
  TransferMoney,
  {
    fromAccount: "string",
    toAccount: "string",
    amount: "number",
    currency: '"USD" | "EUR" | "GBP"',
  }
);

...

hydra.registerComponent(
  "TakeLoan",
  "Apply for a loan with specified terms",
  TakeLoan,
  {
    amount: "number",
    interestRate: "number",
    term: "number",
    purpose: '"personal" | "business" | "mortgage"',
  }
);

export default hydra;

"use client";

import { ReactElement, useEffect, useState } from "react";
import hydra from "./hydra-client";

export default function BankingDashboard() {
  const [bankingComponent, setBankingComponent] = 
    useState<ReactElement | null>(null);

  const generateBankingUI = async () => {
    const component = await hydra.generateComponent(
      "Transfer $500 to my mom's account"
    );
    setBankingComponent(component);
  };

  useEffect(() => {
    generateBankingUI();
  }, []);

  return (
    <main>
      <h1>Banking Dashboard</h1>
      {bankingComponent}
      <button onClick={generateBankingUI}>Generate New Banking UI</button>
    </main>
  );
}