Structured Extraction for App Enhancement

import { z } from 'zod';

// TODO: Define the appointmentSchema with these fields:
// - title (string)
// - startTime (string, nullable)
// - endTime (string, nullable)
// - attendees (array of strings, nullable)
// - location (string, nullable)
// - date (string, required)

// TODO: Export a type based on the schema using z.infer

import { z } from "zod";

export const appointmentSchema = z.object({
	title: z.string(),
	startTime: z.string().nullable(),
	endTime: z.string().nullable(),
	attendees: z.array(z.string()).nullable(),
	location: z.string().nullable(),
	date: z.string(),
});

export type AppointmentDetails = z.infer<typeof appointmentSchema>;

'use server';

import { generateObject } from 'ai';
import { appointmentSchema, type AppointmentDetails } from './schemas';

export const extractAppointment = async (
  input: string,
): Promise<AppointmentDetails> => {
  console.log(`Extracting from: "${input}"`);

  // TODO: Use generateObject to extract appointment details
  // - Model: 'openai/gpt-4.1'
  // - Prompt: Ask to extract appointment details from the input
  // - Schema: Use the appointmentSchema
  // - Return the extracted details
};

"use server";

import { generateObject } from "ai";
import { appointmentSchema, type AppointmentDetails } from "./schemas";

export const extractAppointment = async (
	input: string,
): Promise<AppointmentDetails> => {
	console.log(`Extracting from: "${input}"`);

	const { object: appointmentDetails } = await generateObject({
		model: "openai/gpt-4.1",
		prompt: `Extract the appointment details from the following natural language input:\n\n"${input}"`,
		schema: appointmentSchema,
	});

	console.log("Extracted details:", appointmentDetails);
	return appointmentDetails;
};

// Add these imports
import { extractAppointment } from './actions';
import { type AppointmentDetails } from './schemas';

// Inside the component, add state for the appointment data
const [appointment, setAppointment] = useState<AppointmentDetails | null>(null);

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setLoading(true);
  setAppointment(null); // Clear previous results

  const formData = new FormData(e.target as HTMLFormElement);
  const input = formData.get('appointment') as string;

  try {
    const result = await extractAppointment(input);
    setAppointment(result);
  } catch (error) {
    console.error('Extraction failed:', error);
    // TODO: Show error to user
  } finally {
    setLoading(false);
  }
};

<CalendarAppointment appointment={appointment} />

"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { CalendarAppointment } from "./calendar-appointment";
import { extractAppointment } from "./actions";
import { type AppointmentDetails } from "./schemas";

export default function Page() {
	const [loading, setLoading] = useState(false);
	const [appointment, setAppointment] = useState<AppointmentDetails | null>(
		null,
	);

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setLoading(true);
		setAppointment(null); // Clear previous results

		const formData = new FormData(e.target as HTMLFormElement);
		const input = formData.get("appointment") as string;

		try {
			const result = await extractAppointment(input);
			setAppointment(result);
		} catch (error) {
			console.error("Extraction failed:", error);
			// TODO: Show error to user
		} finally {
			setLoading(false);
		}
	};

	return (
		<div className="max-w-lg mx-auto px-4 py-8">
			<div className="flex flex-col gap-6">
				<Card>
					<CardHeader>
						<CardTitle>Extract Appointment</CardTitle>
					</CardHeader>
					<CardContent>
						<form onSubmit={handleSubmit} className="space-y-4">
							<Input
								name="appointment"
								placeholder="Enter appointment details..."
								className="w-full"
							/>
							<Button type="submit" className="w-full" disabled={loading}>
								{loading ? "Extracting..." : "Extract Appointment"}
							</Button>
						</form>
					</CardContent>
				</Card>
				<CalendarAppointment appointment={appointment} />
			</div>
		</div>
	);
}

export const appointmentSchema = z.object({
  title: z.string().describe(
    'The title of the event. Should be the main purpose, concise, without names. Capitalize properly.'
  ),
  startTime: z
    .string()
    .nullable()
    .describe('Appointment start time in HH:MM format (e.g., 14:00 for 2pm).'),
  endTime: z.string().nullable().describe(
    'Appointment end time in HH:MM format. If not specified, assume a 1-hour duration after startTime.'
  ),
  attendees: z.array(z.string()).nullable().describe(
    'List of attendee names. Extract first and last names if available.'
  ),
  location: z.string().nullable(),
  date: z.string().describe(
    `The date of the appointment. Today's date is ${new Date().toISOString().split('T')[0]}. Use YYYY-MM-DD format.`
  ),
});