Install adaptive UI withhydra-ai

import { HydraClient } from "hydra-ai";
import WeatherForecast from "./components/weather-forecast";
import DailyForecast from "./components/daily-forecast";

const hydra = new HydraClient();

hydra.registerComponent("WeatherForecast", WeatherForecast, {
  city: "string",
  country: "string",
  unit: '"celsius" | "fahrenheit"',
});

hydra.registerComponent("DailyForecast", DailyForecast, {
  day: "string",
  temperature: "number",
  condition: '"sunny" | "cloudy" | "rainy" | "snowy"',
});

export default hydra;

"use client";

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

export default function Home() {
  const [weatherComponent, setWeatherComponent] = 
    useState<ReactElement | null>(null);

  const generateWeatherForecast = async () => {
    const component = await hydra.generateComponent(
      "Show a 5-day weather forecast for New York"
    );
    setWeatherComponent(component);
  };

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

  return (
    <main>
      {weatherComponent}
    </main>
  );
}