Building Tool UI

import { Badge, Card } from '@frontmcp/ui/components';

interface WeatherOutput {
  location: string;
  temperature: number;
  units: 'celsius' | 'fahrenheit';
  conditions: string;
  humidity: number;
  windSpeed: number;
}

export default function WeatherWidget({ output, loading }: { output: WeatherOutput | null; loading?: boolean }) {
  if (loading || !output) {
    return <Card title="Weather" subtitle="Loading..." />;
  }

  const symbol = output.units === 'celsius' ? '°C' : '°F';

  return (
    <Card title={output.location} subtitle="Current Weather" elevation={2}>
      <div style={{ textAlign: 'center', padding: '16px 0' }}>
        <div style={{ fontSize: '3rem' }}>
          {output.temperature}
          {symbol}
        </div>
        <Badge variant={output.conditions === 'sunny' ? 'success' : 'default'}>{output.conditions}</Badge>
      </div>
      <dl>
        <dt>Humidity</dt>
        <dd>{output.humidity}%</dd>
        <dt>Wind speed</dt>
        <dd>{output.windSpeed} km/h</dd>
      </dl>
    </Card>
  );
}

import { fileURLToPath } from 'node:url';
import { Tool, ToolContext, z } from '@frontmcp/sdk';

const widgetPath = fileURLToPath(new URL('./weather.widget.tsx', import.meta.url));

const outputSchema = z.object({
  location: z.string(),
  temperature: z.number(),
  units: z.enum(['celsius', 'fahrenheit']),
  conditions: z.string(),
  humidity: z.number(),
  windSpeed: z.number(),
});

@Tool({
  name: 'get_weather',
  description: 'Get current weather for a location',
  inputSchema: {
    location: z.string().describe('City name or location'),
    units: z.enum(['celsius', 'fahrenheit']).optional().describe('Temperature units'),
  },
  outputSchema,
  ui: {
    servingMode: 'static',
    template: { file: widgetPath },
  },
})
export default class GetWeatherTool extends ToolContext {
  async execute(input: { location: string; units?: 'celsius' | 'fahrenheit' }) {
    // In production, call a real weather API
    return {
      location: input.location,
      temperature: 22,
      units: input.units || 'celsius',
      conditions: 'sunny',
      humidity: 55,
      windSpeed: 10,
    };
  }
}

import { Badge, Card } from '@frontmcp/ui/components';

type Status = 'under_budget' | 'at_budget' | 'over_budget';
const variants = { under_budget: 'success', at_budget: 'warning', over_budget: 'error' } as const;

export default function ExpenseWidget({
  output,
}: {
  output: { userName: string; totalExpenses: number; pendingCount: number; approvedCount: number; status: Status } | null;
}) {
  if (!output) return <Card title="Expenses" subtitle="Loading..." />;

  return (
    <Card title={output.userName} elevation={2}>
      <Badge variant={variants[output.status]}>{output.status.replace('_', ' ').toUpperCase()}</Badge>
      <dl>
        <dt>Total</dt>
        <dd>{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(output.totalExpenses)}</dd>
        <dt>Pending</dt>
        <dd>{output.pendingCount}</dd>
        <dt>Approved</dt>
        <dd>{output.approvedCount}</dd>
      </dl>
    </Card>
  );
}

import { fileURLToPath } from 'node:url';
import { Tool, ToolContext, z } from '@frontmcp/sdk';

const widgetPath = fileURLToPath(new URL('./expense.widget.tsx', import.meta.url));

@Tool({
  name: 'expense_summary',
  description: 'Get expense summary for a user',
  inputSchema: { userId: z.string() },
  outputSchema: z.object({
    userName: z.string(),
    totalExpenses: z.number(),
    pendingCount: z.number(),
    approvedCount: z.number(),
    status: z.enum(['under_budget', 'at_budget', 'over_budget']),
  }),
  ui: { servingMode: 'static', template: { file: widgetPath } },
})
export default class ExpenseSummaryTool extends ToolContext {
  async execute(input: { userId: string }) {
    // Fetch from database in production
    return {
      userName: 'John Doe',
      totalExpenses: 1234.56,
      pendingCount: 3,
      approvedCount: 12,
      status: 'under_budget' as const,
    };
  }
}