Generating Structured Objects (JSON) with Vercel AI SDK and Zod - Part 5 (Final)

// lib/schemas.ts (or directly in your API route)
import { z } from 'zod';

export const contactSchema = z.object({
  name: z.string().optional().describe("The full name of the person."),
  email: z.string().email().optional().describe("The email address."),
  phone: z.string().optional().describe("The phone number."),
  company: z.string().optional().describe("The company name."),
});

export type Contact = z.infer<typeof contactSchema>;

// app/api/generate-object/route.ts
import { openai } from '@ai-sdk/openai';
import { generateObject, GenerateObjectResult } from 'ai';
import { z } from 'zod';

export const runtime = 'edge'; // Can also be 'nodejs' if necessary for the model/provider
export const maxDuration = 30;

// Define the schema directly here or import it
const contactSchema = z.object({
  name: z.string().optional().describe("The full name of the person."),
  email: z.string().email().optional().describe("The email address."),
  phone: z.string().optional().describe("The phone number."),
  company: z.string().optional().describe("The company name, if mentioned."),
});

export async function POST(req: Request) {
  const { textInput } = await req.json();

  if (!textInput) {
    return new Response('Text input is required', { status: 400 });
  }

  try {
    const { object, usage, finishReason, ...rest } = await generateObject({
      model: openai('gpt-4o'), // A model that supports tool/function calling is required
      schema: contactSchema,
      prompt: `Extract the contact information from the following text: "${textInput}"`,
      // mode: 'tool', // Default is 'tool', can also be 'json' for models supporting JSON mode directly
    });

    // `object` is now a typed object matching your Zod schema
    console.log('Generated Object:', object);
    console.log('Usage:', usage);
    console.log('Finish Reason:', finishReason);

    // You can also access other parts of the result if needed, e.g., rawResponse
    // console.log('Full result:', { object, usage, finishReason, ...rest });

    return Response.json({ generatedContact: object, usage, finishReason });

  } catch (error) {
    console.error("Error generating object:", error);
    let errorMessage = "Failed to generate object.";
    if (error instanceof Error) {
        errorMessage = error.message;
    }
    // Check if it's an APIError from the SDK for more details
    // if (error instanceof APIError) { ... }
    return new Response(JSON.stringify({ error: errorMessage }), { status: 500, headers: { 'Content-Type': 'application/json' } });
  }
}

// app/object-gen/page.tsx
'use client';

import { FormEvent, useState } from 'react';
import { z } from 'zod'; // Import Zod for type inference if needed

// Re-define or import your schema for type safety on the client
const contactSchema = z.object({
  name: z.string().optional(),
  email: z.string().email().optional(),
  phone: z.string().optional(),
  company: z.string().optional(),
});
type Contact = z.infer<typeof contactSchema>;

interface GenerationResponse {
  generatedContact?: Contact;
  usage?: { promptTokens: number; completionTokens: number; totalTokens: number };
  finishReason?: string;
  error?: string;
}

export default function ObjectGenPage() {
  const [textInput, setTextInput] = useState("John Doe works at Acme Corp. Reach him at john.doe@example.com or (555) 123-4567.");
  const [generatedObject, setGeneratedObject] = useState<Contact | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [apiResponse, setApiResponse] = useState<GenerationResponse | null>(null);


  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);
    setGeneratedObject(null);
    setApiResponse(null);

    try {
      const response = await fetch('/api/generate-object', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ textInput }),
      });

      const data: GenerationResponse = await response.json();

      if (!response.ok) {
        throw new Error(data.error || `API responded with ${response.status}`);
      }

      setGeneratedObject(data.generatedContact || null);
      setApiResponse(data);

    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : 'An unknown error occurred.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex flex-col w-full max-w-xl py-12 mx-auto">
      <h1 className="text-2xl font-bold mb-6">Structured Object Generation</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="text-input" className="block text-sm font-medium text-gray-700">
            Text Input:
          </label>
          <textarea
            id="text-input"
            className="w-full p-2 border border-gray-300 rounded shadow-sm text-black"
            rows={5}
            value={textInput}
            onChange={(e) => setTextInput(e.target.value)}
            required
          />
        </div>

        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:bg-gray-300"
        >
          {isLoading ? 'Generating...' : 'Generate Object'}
        </button>
      </form>

      {error && (
        <div className="mt-6 p-4 bg-red-100 text-red-700 border border-red-300 rounded">
          <strong>Error:</strong> {error}
        </div>
      )}

      {generatedObject && (
        <div className="mt-6 p-4 border border-gray-200 rounded bg-gray-50">
          <h3 className="text-lg font-semibold mb-2">Generated Object:</h3>
          <pre className="whitespace-pre-wrap text-sm text-gray-800">
            {JSON.stringify(generatedObject, null, 2)}
          </pre>
        </div>
      )}
      {apiResponse && apiResponse.usage && (
        <div className="mt-2 p-2 border-gray-200 text-xs text-gray-600">
            <p>Usage: {apiResponse.usage.totalTokens} tokens ({apiResponse.usage.promptTokens} prompt, {apiResponse.usage.completionTokens} completion). Finish: {apiResponse.finishReason}</p>
        </div>
      )}
    </div>
  );
}