AI Integration

Vercel AI SDK

Understanding the AI foundation powering Nuda Kit.

Nuda Kit uses the Vercel AI SDK as its AI foundation. This is the same SDK used by Vercel's v0, ChatGPT wrappers, and thousands of production AI applications.

Why Vercel AI SDK?

Provider Agnostic

Switch between OpenAI, Anthropic, Google, and 20+ other providers without changing your code.

Streaming First

Built-in support for streaming responses with automatic backpressure handling.

Type Safe

Full TypeScript support with typed messages, responses, and tool calls.

Edge Ready

Optimized for serverless and edge deployments with minimal cold starts.

Architecture Overview

The AI integration in Nuda Kit is split between frontend and backend:

┌─────────────────────────────────────────────────────────────┐
│                    Frontend (Nuxt)                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  @ai-sdk/vue                                         │   │
│  │  • Chat component with streaming                     │   │
│  │  • Message state management                          │   │
│  │  • Auto-scrolling & UI helpers                       │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────┬───────────────────────────┘
                                  │ HTTP Stream
                                  ▼
┌─────────────────────────────────────────────────────────────┐
│                   Backend (AdonisJS)                        │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  AI Service                                          │   │
│  │  • Provider abstraction (OpenAI, Anthropic, Google)  │   │
│  │  • Text generation & streaming                       │   │
│  │  • Model configuration                               │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Supported Providers

Out of the box, Nuda Kit supports three major AI providers:

OpenAI

The most popular choice for AI applications, offering GPT-4 and beyond.

ModelBest For
GPT-5Most capable, complex reasoning
GPT-4oFast, multimodal, great balance

Anthropic

Known for Claude's strong reasoning and safety features.

ModelBest For
Claude 4.5 SonnetLong context, nuanced responses

Google AI

Google's Gemini models with strong multimodal capabilities.

ModelBest For
Gemini 2.5 ProComplex tasks, large context
Gemini 2.5 FlashFast responses, cost-effective

Configuration

API Keys

Add your provider API keys to backend/.env:

# OpenAI
OPENAI_API_KEY=sk-...

# Anthropic
ANTHROPIC_API_KEY=sk-ant-...

# Google AI
GOOGLE_API_KEY=...
You only need to configure the providers you plan to use. If you're only using OpenAI, you don't need Anthropic or Google keys.

Core Capabilities

Text Generation

Generate complete text responses in a single request. Best for:

  • Background processing
  • Batch operations
  • When you don't need real-time feedback

Text Streaming

Stream responses token-by-token for real-time UI updates. Best for:

  • Chat interfaces
  • Interactive applications
  • Better perceived performance

Smooth Streaming

Nuda Kit includes stream smoothing that provides a more natural reading experience:

  • Prevents choppy text appearance
  • Simulates consistent typing speed
  • Works across all providers

AI Service

The backend includes a dedicated AiService class that provides:

FeatureDescription
Provider AbstractionAutomatically routes requests to the correct provider based on model name
Model SwitchingChange models per-request or set a default
Generation OptionsConfigure temperature, top-p, frequency penalty, and more
Stream HandlingBuilt-in support for streaming with optional chunk callbacks

Available Options

When generating or streaming text, you can configure:

OptionDescriptionDefault
modelNameWhich model to usegpt-4o
temperatureCreativity (0-2)Provider default
topPNucleus samplingProvider default
frequencyPenaltyReduce repetitionProvider default
presencePenaltyEncourage new topicsProvider default

Frontend Integration

The frontend uses @ai-sdk/vue for seamless Vue integration:

  • Chat Class — Manages conversation state and streaming
  • Transport Layer — Handles API communication with authentication
  • Message Format — Standardized message structure across providers

API Endpoint

The AI streaming endpoint:

MethodEndpointAuthDescription
POST/ai/streamRequiredStream AI responses

Request Body:

  • messages — Array of conversation messages
  • model — Model name (e.g., gpt-4o, claude-4.5-sonnet)

Extending the AI Service

The AI service is designed to be extended. Common customizations:

  • Add system prompts — Inject instructions before user messages
  • Implement tool calling — Let the AI execute functions
  • Add embeddings — Generate vector embeddings for RAG
  • Token counting — Track usage for billing
  • Response caching — Cache common queries

Best Practices

Error Handling

AI APIs can fail for various reasons. Always handle:

  • Rate limits (429 errors)
  • Context length exceeded
  • Invalid API keys
  • Network timeouts

Cost Management

AI API calls can be expensive. Consider:

  • Using smaller models for simple tasks
  • Implementing response caching
  • Setting up usage quotas per user
  • Monitoring token consumption

Security

Protect your AI implementation:

  • Never expose API keys to the frontend
  • Validate and sanitize user inputs
  • Implement rate limiting per user
  • Monitor for prompt injection attempts

Resources