Build Once.
Run in any AI Host.

1// widgets/WeatherWidget.tsx
2import { useToolInvocation, useWidgetState } from '@pancakeapps/react';
3import { useEffect } from 'react';
4
5export function WeatherWidget() {
6  const { input } = useToolInvocation<{ city: string }>();
7  const [data, setData] = useWidgetState<WeatherData | null>(null);
8
9  useEffect(() => {
10    fetchWeather(input.city).then(setData);
11  }, [input.city]);
12
13  if (!data) return <Loading />;
14
15  return (
16    <div className="weather-widget">
17      <City name={data.city} />
18      <Temperature value={data.temp} unit={data.unit} />
19      <Conditions type={data.condition} />
20      <Stats humidity={data.humidity} wind={data.wind} />
21    </div>
22  );
23}