Vercel AI SDK

Overview

Build AI applications with Leadovaro and the Vercel AI SDK. Your agents can access external tools via MCP — GitHub, Slack, Google Workspace, and more.

note

Framework: This guide is written for Next.js projects. The core MCP client setup works with any JavaScript framework, but the authentication examples below use Next.js-specific APIs.

Quick Start

The fastest way to get started is with the starter template:

AI Chatbot Starter

Clone our Next.js + Vercel AI SDK template with Leadovaro pre-configured. Includes authentication, streaming, and tool calling out of the box.

git clone https://github.com/leadovaroteam/ai-chatbot.git
cd ai-chatbot
pnpm install
cp .env.example .env.local
# Edit .env.local with your LEADOVARO_AUTH_CLIENT_ID and AI provider keys
pnpm dev

Build From Scratch

Prerequisites

1. Next.js 14+ project with App Router
2. Leadovaro account at app.leadovaro.com with at least one MCP server connected
3. Node.js 18+

Installation

pnpm install ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/react @civic/mcp-client @civic/auth

Authentication

Why user auth for tool calls? Leadovaro needs to know which user's toolkit and permissions to use. For multi-user apps, each user gets their own access token tied to their Leadovaro account.

Why Leadovaro Auth? Leadovaro needs to identify which user is accessing tools and authorize their permissions. Leadovaro Auth provides the secure access token. (Support for additional identity providers coming soon.)

import { createLeadovaroAuthPlugin } from "@civic/auth/nextjs"
import type { NextConfig } from "next";

const nextConfig: NextConfig = {};
const withLeadovaroAuth = createLeadovaroAuthPlugin({ clientId: "YOUR_CLIENT_ID" });
export default withLeadovaroAuth(nextConfig)

File: src/app/api/auth/[...leadovaroauth]/route.ts

import { handler } from "@civic/auth/nextjs"
export const GET = handler()
export const POST = handler()

File: src/middleware.ts

import { authMiddleware } from "@civic/auth/nextjs/middleware"
export default authMiddleware();
export const config = { matcher: ['/((?!_next|favicon.ico|.*\\.png).*)',] };

import { getTokens } from "@civic/auth/nextjs";
const { accessToken } = await getTokens();
// Use in headers:
headers: { Authorization: `Bearer ${accessToken}` }

Full Integration Guide

Complete Next.js setup with frontend components, configuration options, and deployment details

AI Prompt for Next.js

Use Claude, ChatGPT, or other AI assistants to automatically set up Leadovaro Auth

note

Get your Client ID at auth.leadovaro.com

Environment Variables

# .env.local
LEADOVARO_AUTH_CLIENT_ID=your_client_id  # from auth.leadovaro.com
OPENAI_API_KEY=your_openai_key       # or ANTHROPIC_API_KEY

Create Leadovaro Tools Helper

// lib/ai/tools/leadovaro.ts
import { LeadovaroMcpClient } from "@civic/mcp-client";
import { vercelAIAdapter } from "@civic/mcp-client/adapters/vercel-ai";
import { getTokens } from "@civic/auth/nextjs";

export const getLeadovaroTools = async () => {
  const { accessToken } = (await getTokens()) ?? {};
  // getTokens() exchanges the user's Leadovaro Auth session for a hub access token
  if (!accessToken) return {};

  const client = new LeadovaroMcpClient({
    auth: { token: accessToken },
  });
  return client.getTools(vercelAIAdapter());
};

App Router API Route

// app/api/chat/route.ts
import { convertToCoreMessages, streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { getLeadovaroTools } from '@/lib/ai/tools/leadovaro-platform';

export async function POST(request: Request) {
  const { messages } = await request.json();
  const coreMessages = convertToCoreMessages(messages);
  const leadovaroTools = await getLeadovaroTools();

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

  // toUIMessageStreamResponse() returns a Response compatible with @ai-sdk/react useChat()
  return result.toUIMessageStreamResponse();
}

note

Using Anthropic/Claude? Replace the model:

import { anthropic } from '@ai-sdk/anthropic';
const result = streamText({
  model: anthropic('claude-sonnet-4-6'),
  messages: coreMessages,
  tools: leadovaroTools,
});

Next Steps

1. 1
   Try the Starter Template

   Clone ai-chatbot for a working example with UI, auth, and streaming

2. 2
   Connect Your Services

   Visit app.leadovaro.com to connect GitHub, Slack, Notion, and other services

3. 3
   Test Tool Calls

   Run locally and ask your AI to "list my GitHub repos" or "search Slack messages"

4. 4
   Deploy to Production

   Deploy to Vercel — all environment variables are pre-configured in the starter template

Starter Template

Full Next.js + Vercel AI SDK example with Leadovaro integration

Agent Deployment

Production deployment guide: profile locking, URL params, authentication

Guardrails

Constrain what tools your agent can call

Get Credentials

Token generation and URL parameter reference