develop-ai-functions-example

par vercel

Scripts de développement et de validation pour les fonctions du SDK AI, couvrant plusieurs fournisseurs et capacités. Organisés par catégorie de fonction du SDK AI (génération de texte, streaming, sortie structurée, embeddings, génération d'images, parole, transcription, reclassement et agents). La convention de nommage des fichiers associe les combinaisons de fournisseurs et de fonctionnalités (par exemple, openai-tool-call.ts, amazon-bedrock-anthropic-cache-control.ts) pour une identification rapide. Inclut des utilitaires partagés pour la gestion des erreurs, le chargement d'environnement,...

npx skills add https://github.com/vercel/ai --skill develop-ai-functions-example

AI Functions Examples

The examples/ai-functions/ directory contains scripts for validating, testing, and iterating on AI SDK functions across providers.

Example Categories

Examples are organized by AI SDK function in examples/ai-functions/src/:

DirectoryPurpose
generate-text/Non-streaming text generation with generateText()
stream-text/Streaming text generation with streamText()
generate-object/Structured output generation with generateObject()
stream-object/Streaming structured output with streamObject()
agent/ToolLoopAgent examples for agentic workflows
embed/Single embedding generation with embed()
embed-many/Batch embedding generation with embedMany()
generate-image/Image generation with generateImage()
generate-speech/Text-to-speech with generateSpeech()
transcribe/Audio transcription with transcribe()
rerank/Document reranking with rerank()
middleware/Custom middleware implementations
registry/Provider registry setup and usage
telemetry/OpenTelemetry integration
complex/Multi-component examples (agents, routers)
lib/Shared utilities (not examples)
tools/Reusable tool definitions

File Naming Convention

Examples follow the pattern: {provider}-{feature}.ts

PatternExampleDescription
{provider}.tsopenai.tsBasic provider usage
{provider}-{feature}.tsopenai-tool-call.tsSpecific feature
{provider}-{sub-provider}.tsamazon-bedrock-anthropic.tsProvider with sub-provider
{provider}-{sub-provider}-{feature}.tsgoogle-vertex-anthropic-cache-control.tsSub-provider with feature

Example Structure

All examples use the run() wrapper from lib/run.ts which:

  • Loads environment variables from .env
  • Provides error handling with detailed API error logging

Basic Template

import { providerName } from '@ai-sdk/provider-name';
import { generateText } from 'ai';
import { run } from '../lib/run';

run(async () => {
  const result = await generateText({
    model: providerName('model-id'),
    prompt: 'Your prompt here.',
  });

  console.log(result.text);
  console.log('Token usage:', result.usage);
  console.log('Finish reason:', result.finishReason);
});

Streaming Template

import { providerName } from '@ai-sdk/provider-name';
import { streamText } from 'ai';
import { printFullStream } from '../lib/print-full-stream';
import { run } from '../lib/run';

run(async () => {
  const result = streamText({
    model: providerName('model-id'),
    prompt: 'Your prompt here.',
  });

  await printFullStream({ result });
});

Tool Calling Template

import { providerName } from '@ai-sdk/provider-name';
import { generateText, tool } from 'ai';
import { z } from 'zod';
import { run } from '../lib/run';

run(async () => {
  const result = await generateText({
    model: providerName('model-id'),
    tools: {
      myTool: tool({
        description: 'Tool description',
        inputSchema: z.object({
          param: z.string().describe('Parameter description'),
        }),
        execute: async ({ param }) => {
          return { result: `Processed: ${param}` };
        },
      }),
    },
    prompt: 'Use the tool to...',
  });

  console.log(JSON.stringify(result, null, 2));
});

Structured Output Template

import { providerName } from '@ai-sdk/provider-name';
import { generateObject } from 'ai';
import { z } from 'zod';
import { run } from '../lib/run';

run(async () => {
  const result = await generateObject({
    model: providerName('model-id'),
    schema: z.object({
      name: z.string(),
      items: z.array(z.string()),
    }),
    prompt: 'Generate a...',
  });

  console.log(JSON.stringify(result.object, null, 2));
  console.log('Token usage:', result.usage);
});

Running Examples

From the examples/ai-functions directory:

pnpm tsx src/generate-text/openai.ts
pnpm tsx src/stream-text/openai-tool-call.ts
pnpm tsx src/agent/openai-generate.ts

When to Write Examples

Write examples when:

  1. Adding a new provider: Create basic examples for each supported API (generateText, streamText, generateObject, etc.)

  2. Implementing a new feature: Demonstrate the feature with at least one provider example

  3. Reproducing a bug: Create an example that shows the issue for debugging

  4. Adding provider-specific options: Show how to use providerOptions for provider-specific settings

  5. Creating test fixtures: Use examples to generate API response fixtures (see capture-api-response-test-fixture skill)

Utility Helpers

The lib/ directory contains shared utilities:

FilePurpose
run.tsError-handling wrapper with .env loading
print.tsClean object printing (removes undefined values)
print-full-stream.tsColored streaming output for tool calls, reasoning, text
save-raw-chunks.tsSave streaming chunks for test fixtures
present-image.tsDisplay images in terminal
save-audio.tsSave audio files to disk

Using print utilities

import { print } from '../lib/print';

// Pretty print objects without undefined values
print('Result:', result);
print('Usage:', result.usage, { depth: 2 });

Using printFullStream

import { printFullStream } from '../lib/print-full-stream';

const result = streamText({ ... });
await printFullStream({ result }); // Colored output for text, tool calls, reasoning

Reusable Tools

The tools/ directory contains reusable tool definitions:

import { weatherTool } from '../tools/weather-tool';

const result = await generateText({
  model: openai('gpt-4o'),
  tools: { weather: weatherTool },
  prompt: 'What is the weather in San Francisco?',
});

Best Practices

  1. Keep examples focused: Each example should demonstrate one feature or use case

  2. Use descriptive prompts: Make it clear what the example is testing

  3. Handle errors gracefully: The run() wrapper handles this automatically

  4. Use realistic model IDs: Use actual model IDs that work with the provider

  5. Add comments for complex logic: Explain non-obvious code patterns

  6. Reuse tools when appropriate: Use weatherTool or create new reusable tools in tools/

Plus de skills de vercel

benchmark-sandbox
vercel
Exécute les scénarios d'évaluation de vercel-plugin dans des sandbox Vercel au lieu de panneaux WezTerm locaux. Provisionne des microVM éphémères avec Claude Code et le plugin préinstallé,…
official
emil-design-eng
vercel
Cette compétence encode la philosophie d'Emil Kowalski sur le polissage UI, la conception de composants, les décisions d'animation et les détails invisibles qui rendent un logiciel agréable.
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de l'équipe Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
write-guide
vercel
Produire un guide technique qui enseigne un cas d'usage concret à travers des exemples progressifs. Les concepts ne sont introduits que lorsque le lecteur en a besoin.
official
release
vercel
Release vercel-plugin — exécuter les gates, incrémenter la version, générer les artefacts, commiter et pousser. Utiliser lorsqu'on demande de "release", "ship", "bump and push" ou "cut a release".
official
deepsec
vercel
Exécuter DeepSec sur un checkout de projet Vercel depuis dev3000. Utiliser pour la configuration DeepSec en un clic, l’amorçage du contexte du projet, le traitement limité de premier passage, et…
official
backport-pr
vercel
Effectuer un backport d'une pull request Next.js fusionnée depuis canary vers une branche de version précédente telle que next-16-2. Utiliser lorsque l'utilisateur demande de faire un backport, un cherry-pick ou d'ouvrir un…
official