Ai Integration Generator

AI Integration Generator

Before generating any output, read config/defaults.md and adapt all patterns, imports, and code examples to the user's configured stack.

Generation Process

1. Determine AI feature type (chat, completion, structured output, tool calling, RAG)
2. Generate API route with streaming
3. Generate UI component with appropriate hook
4. Add error handling and loading states
5. Verify streaming works end-to-end

Streaming Chat Route

Create app/api/chat/route.ts:

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4o'),
    system: 'You are a helpful assistant.',
    messages,
  });

  return result.toDataStreamResponse();
}

With Anthropic

import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

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

  const result = streamText({
    model: anthropic('claude-sonnet-4-5-20250929'),
    system: 'You are a helpful assistant.',
    messages,
  });

  return result.toDataStreamResponse();
}

Chat UI Component

'use client';

import { useChat } from '@ai-sdk/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } =
    useChat();

  return (
    
      
        {messages.map((message) => (
          
            
              {message.content}
            
          
        ))}
      

      {error && (
        
          Something went wrong. Please try again.
        
      )}

      
        
        
          Send
        
      
    
  );
}

Completion Route

Create app/api/completion/route.ts for single-prompt completion:

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

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

  const result = streamText({
    model: openai('gpt-4o'),
    prompt,
  });

  return result.toDataStreamResponse();
}

Completion UI

'use client';

import { useCompletion } from '@ai-sdk/react';

export function CompletionForm() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } =
    useCompletion();

  return (
    
      
        
        
          Generate
        
      

      {completion && (
        
          {completion}
        
      )}
    
  );
}

Structured Output

Use generateObject() for typed, non-streaming output with Zod validation:

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const recipeSchema = z.object({
  name: z.string(),
  ingredients: z.array(
    z.object({
      name: z.string(),
      amount: z.string(),
    })
  ),
  steps: z.array(z.string()),
});

export type Recipe = z.infer;

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

  const { object } = await generateObject({
    model: openai('gpt-4o'),
    schema: recipeSchema,
    prompt,
  });

  return Response.json(object);
}

Tool Calling

Define tools that the model can invoke:

import { streamText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      getWeather: tool({
        description: 'Get the current weather for a location',
        parameters: z.object({
          location: z.string().describe('City name'),
        }),
        execute: async ({ location }) => {
          // TODO: Call weather API
          return { temperature: 22, condition: 'sunny', location };
        },
      }),
      searchProducts: tool({
        description: 'Search for products in the catalog',
        parameters: z.object({
          query: z.string(),
          maxResults: z.number().default(5),
        }),
        execute: async ({ query, maxResults }) => {
          // TODO: Query database
          return { results: [], query, maxResults };
        },
      }),
    },
    maxSteps: 5,
  });

  return result.toDataStreamResponse();
}

Rendering Tool Results in the Frontend

'use client';

import { useChat } from '@ai-sdk/react';

export function ChatWithTools() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    
      {messages.map((message) => (
        
          {message.content}

          {message.toolInvocations?.map((toolInvocation) => {
            if (toolInvocation.state === 'result') {
              return (
                
                  Tool: {toolInvocation.toolName} — Result:{' '}
                  {JSON.stringify(toolInvocation.result)}
                
              );
            }
            return (
              
                Calling {toolInvocation.toolName}...
              
            );
          })}
        
      ))}

      
        
        Send
      
    
  );
}

RAG Pattern

Embedding Generation

import { embed } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function generateEmbedding(text: string) {
  const { embedding } = await embed({
    model: openai.embedding('text-embedding-3-small'),
    value: text,
  });

  return embedding;
}

Vector Search + Context Injection

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const lastMessage = messages[messages.length - 1].content;

  // 1. Generate embedding for the query
  const queryEmbedding = await generateEmbedding(lastMessage);

  // 2. Search vector store for relevant documents
  const relevantDocs = await prisma.$queryRaw`
    SELECT content, 1 - (embedding  ${queryEmbedding}::vector) as similarity
    FROM documents
    ORDER BY similarity DESC
    LIMIT 5
  `;

  // 3. Inject context into system prompt
  const context = relevantDocs.map((doc: any) => doc.content).join('\n\n');

  const result = streamText({
    model: openai('gpt-4o'),
    system: `Answer based on the following context:\n\n${context}`,
    messages,
  });

  return result.toDataStreamResponse();
}

Error Handling

Route-Level Error Handling

import { streamText, APICallError } from 'ai';
import { openai } from '@ai-sdk/openai';

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

    const result = streamText({
      model: openai('gpt-4o'),
      messages,
    });

    return result.toDataStreamResponse();
  } catch (error) {
    if (APICallError.isInstance(error)) {
      return Response.json(
        { error: 'AI service unavailable' },
        { status: error.statusCode ?? 503 }
      );
    }
    return Response.json({ error: 'Internal server error' }, { status: 500 });
  }
}

Client-Side Error Handling

const { messages, error, reload } = useChat({
  onError(error) {
    console.error('Chat error:', error);
  },
});

// In JSX:
{error && (
  
    Something went wrong.
     reload()}>Retry
  
)}

Environment Variables

Add to .env.local:

OPENAI_API_KEY=         # OpenAI API key
ANTHROPIC_API_KEY=      # Anthropic API key (if using Claude)

Completeness Check

After generating an AI integration, verify that: the route exports a POST handler with streamText or generateObject, the UI component uses the correct hook (useChat for chat, useCompletion for completion), error and loading states are handled in both the route and the UI, streaming responses return result.toDataStreamResponse(), and the required API key environment variable is documented. If using tools, verify each tool has a Zod parameters schema and an execute function.

Asset

See assets/chat-route/route.ts for a minimal streaming chat route template.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Nembie
• Source: Nembie/claude-code-skills
• License: MIT

Install and usage instructions live in the source repository linked above.