Let's Build A Strapi Plugin To Integrate Vercel’s AI SDK In Our Next.js 16 Project

What We're Building

Want to try something different? Let’s build a custom Strapi plugin that integrates Vercel’s AI SDK, giving our backend native AI capabilities we can securely expose to our Next.js app.

Here is a complimentary video to go along with the post.

Instead of wiring AI logic directly into the frontend, we’ll centralize it inside Strapi—so we can:

🔐 Keep API keys secure 🧠 Standardize prompts and AI workflows 🔌 Expose clean, reusable endpoints to Next.js 🚀 Scale and iterate without touching frontend logic

Think of it as turning Strapi into our AI control center—while Next.js becomes the experience layer.

If we do this right, we won’t just “add AI.” We’ll build an extensible AI layer into our architecture.

We will cover three following examples

1. Simple Ask - Send a prompt, receive a complete response
2. Streaming Response - Real-time token-by-token streaming via Server-Sent Events (SSE)
3. Multi-turn Chat - Full conversational interface with message history

Key Features

• Modular Plugin Architecture - Reusable Strapi plugin for AI capabilities
• Multiple Streaming Patterns - SSE and UI Message Stream protocols

Architecture Overview

System Architecture

Request Flow Patterns

Project Structure

1ai-sdk/
2├── server/                          # Strapi Backend
3│   ├── config/
4│   │   ├── plugins.ts               # Plugin configuration
5│   │   ├── database.ts              # Database settings
6│   │   └── server.ts                # Server settings
7│   ├── src/
8│   │   └── plugins/
9│   │       └── ai-sdk/              # Our AI SDK Plugin
10│   │           ├── admin/           # Admin UI components
11│   │           └── server/          # Backend logic
12│   │               ├── src/
13│   │               │   ├── controllers/
14│   │               │   ├── services/
15│   │               │   ├── routes/
16│   │               │   └── lib/     # AI SDK integration
17│   │               └── package.json
18│   ├── .env                         # Environment variables
19│   └── package.json
20│
21├── next-client/                     # Next.js Frontend
22│   ├── app/
23│   │   ├── layout.tsx               # Root layout
24│   │   └── page.tsx                 # Home page
25│   ├── components/
26│   │   ├── AskExample.tsx           # Non-streaming demo
27│   │   ├── AskStreamExample.tsx     # SSE streaming demo
28│   │   └── ChatExample.tsx          # Chat interface demo
29│   ├── hooks/
30│   │   ├── useAsk.ts                # Non-streaming hook
31│   │   └── useAskStream.ts          # Streaming hook
32│   ├── lib/
33│   │   └── api.ts                   # API client functions
34│   └── package.json
35│
36└── docs/                            # Documentation
37    └── TUTORIAL.md                  # This file

Technology Stack

Backend (Strapi Server)

Frontend (Next.js Client)

AI Services

Important: UIMessage vs ModelMessage (AI SDK v6)

In AI SDK v6, there are two distinct message formats:

The useChat hook manages conversation state using UIMessage format (richer, includes IDs and parts). However, the AI SDK's streamText function expects ModelMessage format.

Use convertToModelMessages(uiMessages) to convert between them:

1import { convertToModelMessages, type UIMessage } from "ai";
2
3// In your service layer
4async chat(messages: UIMessage[]) {
5  const modelMessages = await convertToModelMessages(messages);
6  return streamText({ model, messages: modelMessages });
7}

Note: convertToModelMessages is async in AI SDK v6 to support async Tool.toModelOutput().

Part 1: Setting Up Strapi

Note: make sure to use Node 22 (lts version)

Note: This tutorial uses npm for all commands. If you prefer yarn or pnpm, the commands are interchangeable (e.g., npm run dev → yarn dev, npm install → yarn add).

Step 1.1: Create a New Strapi Project

# Create a new Strapi project
npx create-strapi@latest server

Complete the following questions:

paul@dev test npx create-strapi-app@latest server

 Strapi   v5.33.3 🚀 Let's create your new project

🚀 Welcome to Strapi! Ready to bring your project to life?

Create a free account and get:
30 days of access to the Growth plan, which includes:
✨ Strapi AI: content-type builder, media library and translations
✅ Live Preview
✅ Single Sign-On (SSO) login
✅ Content History
✅ Releases

? Please log in or sign up. Skip
? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes
? Participate in anonymous A/B testing (to improve Strapi)? No

 Strapi   Creating a new application at /Users/paul/test/server

# Navigate to the project
cd server

Step 1.2: Project Structure After Creation

1server/
2├── config/
3│   ├── admin.ts
4│   ├── api.ts
5│   ├── database.ts
6│   ├── middlewares.ts
7│   ├── plugins.ts
8│   └── server.ts
9├── database/
10├── public/
11├── src/
12│   └── admin/
13├── types/
14├── .env
15├── .env.example
16├── package.json
17└── tsconfig.json

Step 1.3: Configure Environment Variables

Create or update your .env file:

1# Server
2HOST=0.0.0.0
3PORT=1337
4
5# Secrets (generate with: openssl rand -base64 32)
6APP_KEYS=your-app-keys-here
7API_TOKEN_SALT=your-api-token-salt
8ADMIN_JWT_SECRET=your-admin-jwt-secret
9TRANSFER_TOKEN_SALT=your-transfer-token-salt
10JWT_SECRET=your-jwt-secret
11
12# Database (for SQLite)
13DATABASE_CLIENT=sqlite
14DATABASE_FILENAME=.tmp/data.db
15
16# AI SDK Configuration ( you can use any provider, I chose to use Anthropic)
17ANTHROPIC_API_KEY=sk-ant-your-api-key-here
18ANTHROPIC_MODEL=claude-sonnet-4-20250514

Step 1.4: Verify Strapi Installation

# Start the development server
cd server
npm run dev

Visit http://localhost:1337 to create your admin account.

Once you have created your Admin User you will be greeted by the Strapi Admin area.

If you have never used Strapi checkout this Crash Course Tutorial that I have created.

Part 2: Building the AI SDK Plugin (Our first Strapi Plugin)

This is the core of our implementation - a Strapi plugin that integrates the Vercel AI SDK with Anthropic Claude.

Plugin Architecture

Step 2.1: Using Strapi Plugin SDK to Scaffold Our Plugin

We'll use the official Strapi Plugin SDK to scaffold our plugin. This CLI toolkit provides a complete project structure with all necessary configuration files.

# From the server directory, run the plugin init command
cd server
npx @strapi/sdk-plugin@latest init ai-sdk

You'll be prompted with several questions. Here are the recommended answers for our AI SDK plugin:

1npx @strapi/sdk-plugin@latest init ai-sdk
2[INFO]  Creating a new package at:  src/plugins/ai-sdk
3✔ plugin name … ai-sdk
4✔ plugin display name … AI SDK
5✔ plugin description … Integrate AI capabilities using Vercel AI SDK
6✔ plugin author name … Paul Bratslavsky
7✔ plugin author email … paul.bratslavsky@strapi.io
8✔ git url …
9✔ plugin license … MIT
10✔ register with the admin panel? … yes
11✔ register with the server? … yes
12✔ use editorconfig? … yes
13✔ use eslint? … yes
14✔ use prettier? … yes
15✔ use typescript? … yes

Important: Make sure to answer Yes to both "register with the admin panel" and "register with the server" since our plugin needs backend API routes.

Troubleshooting: Peer Dependency Error During Scaffolding

The @strapi/sdk-plugin init command automatically runs npm install at the end of scaffolding. You may encounter a peer dependency conflict like this:

1npm error ERESOLVE unable to resolve dependency tree
2npm error peer react@"19" from react-intl@8.1.3

This happens because the scaffolded plugin template includes react-intl@^8.1.3 (which requires React 19) but sets react@^18.3.1 as a devDependency. Don't worry - the plugin files are still generated successfully, only the npm install step failed.

To fix this, navigate to the plugin directory and install dependencies manually:

cd src/plugins/ai-sdk
npm install --legacy-peer-deps

Alternatively, if you're using Yarn or pnpm, you can install with those instead, as they handle peer dependency conflicts more gracefully:

cd src/plugins/ai-sdk
yarn install  # or: pnpm install

Once this process is done, you will see the following message:

You can now enable your plugin by adding the following in ./config/plugins.ts
───────────────────────────────────
export default {
  // ...
  'ai-sdk': {
    enabled: true,
    resolve: './src/plugins/ai-sdk'
  },
  // ...
}
───────────────────────────────────

[INFO] Plugin generated successfully.

Go ahead and do that now.

Now let's install our dependencies and build out plugin for the first time.

# Navigate to the plugin directory
cd src/plugins/ai-sdk
npm run build

You can also start your plugin in watch mode with the following command:

npm run watch

Then restart your Strapi application by running npm run dev in the root and you should see the following.

Should show up in Menu

Should show up in Settings

Now that we know our basic plugin structure is set up, lets start by installing all the required dependencies.

Step 2.2 Install the AI SDK dependencies

Make sure to run this in the src/plugins/ai-sdk folder:

npm install @ai-sdk/anthropic ai

Note: If you encounter the same ERESOLVE peer dependency error from Step 2.1, use the --legacy-peer-deps flag:

npm install @ai-sdk/anthropic ai --legacy-peer-deps

Note: Don't forget to rebuild your plugin and restart the Strapi application to apply the changes.

Step 2.3: Plugin Structure Overview

After scaffolding, your plugin structure will look like this:

1src/plugins/ai-sdk/
2├── admin/
3│   └── src/
4│       ├── components/          # Admin UI components (generated)
5│       ├── pages/               # Admin pages (generated)
6│       └── index.ts             # Admin entry point
7├── server/
8│   └── src/
9│       ├── controllers/         # We'll add our API controllers here
10│       ├── services/            # We'll add our service layer here
11│       ├── routes/              # We'll add our routes here
12│       └── index.ts             # Server entry point
13├── package.json
14├── tsconfig.json
15└── README.md

Now let's create the additional directories we need for our implementation.

Run the following in the root folder of your plugin:

# Create the lib directory for our core AI SDK integration
mkdir -p server/src/lib
mkdir -p server/src/routes/content-api

We will cover these in detail in a bit.

Phase 1: Plugin Configuration & Initialization

Let's update plugin config to initialize and connect to the Anthropic API. We'll verify it works before adding any endpoints.

Step 2.4: Configure the Plugin in Strapi

First, let's tell Strapi about our plugin and pass it the API key. Update config/plugins.ts in your Strapi root:

1export default ({ env }) => ({
2  "ai-sdk": {
3    enabled: true,
4    resolve: "./src/plugins/ai-sdk",
5    config: {
6      anthropicApiKey: env("ANTHROPIC_API_KEY"),
7      chatModel: env("ANTHROPIC_MODEL", "claude-sonnet-4-20250514"),
8    },
9  },
10});

Make sure your .env file has the API key:

1ANTHROPIC_API_KEY=sk-ant-your-api-key-here
2ANTHROPIC_MODEL=claude-sonnet-4-20250514

Step 2.5: Create Basic Types

Create src/plugins/ai-sdk/server/src/lib/types.ts with just what we need for initialization:

1/**
2 * Supported Claude model names
3 */
4export const CHAT_MODELS = [
5  "claude-sonnet-4-20250514",
6  "claude-opus-4-20250514",
7  "claude-3-5-sonnet-20241022",
8  "claude-3-5-haiku-20241022",
9  "claude-3-haiku-20240307",
10] as const;
11
12export type ChatModelName = (typeof CHAT_MODELS)[number];
13export const DEFAULT_MODEL: ChatModelName = "claude-sonnet-4-20250514";
14
15/**
16 * Plugin configuration interface
17 */
18export interface PluginConfig {
19  anthropicApiKey: string;
20  chatModel?: ChatModelName;
21  baseURL?: string;
22}

We'll add more types as we need them in later phases.

Step 2.6: Create the AI SDK Manager (Basic Version)

Create src/plugins/ai-sdk/server/src/lib/init-ai-sdk.ts. We'll start with just initialization - no AI calls yet:

1import { createAnthropic, type AnthropicProvider } from "@ai-sdk/anthropic";
2import {
3  CHAT_MODELS,
4  DEFAULT_MODEL,
5  type PluginConfig,
6  type ChatModelName,
7} from "./types";
8
9/**
10 * AISDKManager - Core class for AI SDK integration
11 * We'll add AI methods in the next phase
12 */
13class AISDKManager {
14  private provider: AnthropicProvider | null = null;
15  private model: ChatModelName = DEFAULT_MODEL;
16
17  /**
18   * Initialize the manager with plugin configuration
19   * Returns false if config is missing required fields
20   */
21  initialize(config: unknown): boolean {
22    const cfg = config as Partial<PluginConfig> | undefined;
23
24    if (!cfg?.anthropicApiKey) {
25      return false;
26    }
27
28    this.provider = createAnthropic({
29      apiKey: cfg.anthropicApiKey,
30      baseURL: cfg.baseURL,
31    });
32
33    if (cfg.chatModel && CHAT_MODELS.includes(cfg.chatModel)) {
34      this.model = cfg.chatModel;
35    }
36
37    return true;
38  }
39
40  getChatModel(): ChatModelName {
41    return this.model;
42  }
43
44  isInitialized(): boolean {
45    return this.provider !== null;
46  }
47}
48
49export const aiSDKManager = new AISDKManager();

Step 2.7: Create the Register Hook

Create src/plugins/ai-sdk/server/src/register.ts. This runs when Strapi starts:

1import type { Core } from "@strapi/strapi";
2import { aiSDKManager } from "./lib/init-ai-sdk";
3
4const register = ({ strapi }: { strapi: Core.Strapi }) => {
5  const config = strapi.config.get("plugin::ai-sdk");
6  const initialized = aiSDKManager.initialize(config);
7
8  if (!initialized) {
9    strapi.log.warn(
10      "AI SDK plugin: anthropicApiKey not configured, plugin will not be initialized",
11    );
12    return;
13  }
14
15  strapi.log.info(
16    `AI SDK plugin initialized with model: ${aiSDKManager.getChatModel()}`,
17  );
18};
19
20export default register;

Step 2.8: Verify Plugin Initialization

Rebuild and start Strapi:

npm run build
npm run develop

Check the console. You will see:

[2026-01-18 16:10:49.069] warn: AI SDK plugin: anthropicApiKey not configured, plugin will not be initialized

We need to add our credentials to our .env file:

1ANTHROPIC_API_KEY=your_api_key

Now, restart and you should see the following message:

[2026-01-18 16:15:50.508] info: AI SDK plugin initialized with model: claude-sonnet-4-20250514

Phase 2: Basic Text Generation (Non-Streaming)

Now let's add our first AI endpoint.

Step 2.9: Add generateText to AISDKManager

Update src/plugins/ai-sdk/server/src/lib/init-ai-sdk.ts to add text generation capabilities.

Add to imports:

1import { generateText, type LanguageModel } from "ai";

Add these methods to the AISDKManager class (before getChatModel()):

1  private getLanguageModel(): LanguageModel {
2    if (!this.provider) {
3      throw new Error('AI SDK Manager not initialized');
4    }
5    return this.provider(this.model);
6  }
7
8  async generateText(prompt: string, options?: { system?: string }) {
9    const result = await generateText({
10      model: this.getLanguageModel(),
11      prompt,
12      system: options?.system,
13    });
14    return { text: result.text };
15  }

Your file should now look like this:

1import { createAnthropic, type AnthropicProvider } from "@ai-sdk/anthropic";
2import { generateText, type LanguageModel } from "ai"; // ← Added
3import {
4  CHAT_MODELS,
5  DEFAULT_MODEL,
6  type PluginConfig,
7  type ChatModelName,
8} from "./types";
9
10class AISDKManager {
11  private provider: AnthropicProvider | null = null;
12  private model: ChatModelName = DEFAULT_MODEL;
13
14  initialize(config: unknown): boolean {
15    const cfg = config as Partial<PluginConfig> | undefined;
16
17    if (!cfg?.anthropicApiKey) {
18      return false;
19    }
20
21    this.provider = createAnthropic({
22      apiKey: cfg.anthropicApiKey,
23      baseURL: cfg.baseURL,
24    });
25
26    if (cfg.chatModel && CHAT_MODELS.includes(cfg.chatModel)) {
27      this.model = cfg.chatModel;
28    }
29
30    return true;
31  }
32
33  // ↓ New method
34  private getLanguageModel(): LanguageModel {
35    if (!this.provider) {
36      throw new Error("AI SDK Manager not initialized");
37    }
38    return this.provider(this.model);
39  }
40
41  // ↓ New method
42  async generateText(prompt: string, options?: { system?: string }) {
43    const result = await generateText({
44      model: this.getLanguageModel(),
45      prompt,
46      system: options?.system,
47    });
48    return { text: result.text };
49  }
50
51  getChatModel(): ChatModelName {
52    return this.model;
53  }
54
55  isInitialized(): boolean {
56    return this.provider !== null;
57  }
58}
59
60export const aiSDKManager = new AISDKManager();

Step 2.10: Create the Service

Create src/plugins/ai-sdk/server/src/services/service.ts:

1import type { Core } from "@strapi/strapi";
2import { aiSDKManager } from "../lib/init-ai-sdk";
3
4const service = ({ strapi }: { strapi: Core.Strapi }) => ({
5  async ask(prompt: string, options?: { system?: string }) {
6    const result = await aiSDKManager.generateText(prompt, options);
7    return result.text;
8  },
9
10  isInitialized() {
11    return aiSDKManager.isInitialized();
12  },
13});
14
15export default service;

Step 2.11: Create the Controller

Create src/plugins/ai-sdk/server/src/controllers/controller.ts:

1import type { Core } from "@strapi/strapi";
2import type { Context } from "koa";
3
4const controller = ({ strapi }: { strapi: Core.Strapi }) => ({
5  async ask(ctx: Context) {
6    const { prompt, system } = (ctx.request as any).body as {
7      prompt?: string;
8      system?: string;
9    };
10
11    if (!prompt || typeof prompt !== "string") {
12      ctx.badRequest("prompt is required and must be a string");
13      return;
14    }
15
16    const service = strapi.plugin("ai-sdk").service("service");
17    if (!service.isInitialized()) {
18      ctx.badRequest("AI SDK not initialized");
19      return;
20    }
21
22    const result = await service.ask(prompt, { system });
23    ctx.body = { data: { text: result } };
24  },
25});
26
27export default controller;

Step 2.12: Create the Route

Create src/plugins/ai-sdk/server/src/routes/content-api/index.ts:

1export default {
2  type: "content-api",
3  routes: [
4    {
5      method: "POST",
6      path: "/ask",
7      handler: "controller.ask",
8      config: { policies: [] },
9    },
10  ],
11};

Create src/plugins/ai-sdk/server/src/routes/index.ts:

1import contentApi from "./content-api";
2
3export default {
4  "content-api": contentApi,
5};

Step 2.13: Test with curl

Rebuild, restart, and test:

curl -X POST http://localhost:1337/api/ai-sdk/ask \
  -H "Content-Type: application/json" \
  -d '{"prompt": "What is 2 + 2? Reply with just the number."}'

You will get the Forbidden message:

1{
2  "data": null,
3  "error": {
4    "status": 403,
5    "name": "ForbiddenError",
6    "message": "Forbidden",
7    "details": {}
8  }
9}

We need to first enable our API in Strapi:

Now, try again.

Expected response:

1{ "data": { "text": "4" } }

Step 2.14: Write a Test for the Ask Endpoint

Create tests/test-ask.mjs in your Strapi project root:

1const API_URL = "http://localhost:1337/api/ai-sdk";
2
3async function testAsk() {
4  console.log("Testing /ask endpoint...\n");
5
6  const response = await fetch(`${API_URL}/ask`, {
7    method: "POST",
8    headers: { "Content-Type": "application/json" },
9    body: JSON.stringify({
10      prompt: "What is Strapi and why should I use it?",
11    }),
12  });
13
14  if (!response.ok) {
15    console.error("Request failed:", response.status, response.statusText);
16    const error = await response.text();
17    console.error(error);
18    process.exit(1);
19  }
20
21  const data = await response.json();
22  console.log("Response:", JSON.stringify(data, null, 2));
23
24  if (data.data?.text) {
25    console.log("\n✅ Test passed!");
26  } else {
27    console.error("\n❌ Test failed: unexpected response format");
28    process.exit(1);
29  }
30}
31
32testAsk().catch(console.error);

Add the test script to your package.json:

1{
2  "scripts": {
3    "test:ask": "node tests/test-ask.mjs"
4  }
5}

Run the test:

npm run test:ask

Expected output:

1Testing /ask endpoint...
2
3Response: {
4  "data": {
5    "text": "Strapi is an open-source headless CMS..."
6  }
7}
8
9✅ Test passed!

Phase 3: Next.js Frontend

Now let's build a simple frontend to interact with our API.

Step 3.1: Create Next.js App

In a separate directory (outside your Strapi project):

npx create-next-app@latest next-client

paul@dev test npx create-next-app@latest next-client
? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
❯   Yes, use recommended defaults
    TypeScript, ESLint, Tailwind CSS, App Router
    No, reuse previous settings
    No, customize settings

    Using npm.

Initializing project with template: app-tw


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

added 357 packages, and audited 358 packages in 30s

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Generating route types...
✓ Types generated successfully

Initialized a git repository.

Success! Created next-client at /Users/paul/test/next-client

Step 3.2: Create the API Client

Create the lib folder and add lib/api.ts:

1const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:1337/api/ai-sdk";
2
3// Simple fetch wrapper
4export async function askAI(prompt: string, options?: { system?: string }) {
5  const res = await fetch(`${API_BASE}/ask`, {
6    method: "POST",
7    headers: { "Content-Type": "application/json" },
8    body: JSON.stringify({ prompt, ...options }),
9  });
10
11  if (!res.ok) {
12    throw new Error(`API error: ${res.status}`);
13  }
14
15  const data = await res.json();
16  return data.data?.text as string;
17}
18
19export { API_BASE };

Step 3.3: Create the useAsk Hook

Create the hooks folder and add hooks/useAsk.ts:

1"use client";
2
3import { useState, useCallback } from "react";
4import { askAI } from "@/lib/api";
5
6export function useAsk() {
7  const [response, setResponse] = useState("");
8  const [loading, setLoading] = useState(false);
9  const [error, setError] = useState<Error | null>(null);
10
11  const ask = useCallback(async (prompt: string, options?: { system?: string }) => {
12    setLoading(true);
13    setError(null);
14    setResponse("");
15
16    try {
17      const text = await askAI(prompt, options);
18      setResponse(text);
19      return text;
20    } catch (err) {
21      const error = err instanceof Error ? err : new Error(String(err));
22      setError(error);
23      throw error;
24    } finally {
25      setLoading(false);
26    }
27  }, []);
28
29  const reset = useCallback(() => {
30    setResponse("");
31    setError(null);
32  }, []);
33
34  return { ask, response, loading, error, reset };
35}

Create hooks/index.ts to export the hook:

1export { useAsk } from "./useAsk";

Step 3.4: Create the AskExample Component

Create the components folder and add components/AskExample.tsx:

1"use client";
2
3import { useState, type SubmitEvent } from "react";
4import { useAsk } from "@/hooks";
5
6export function AskExample() {
7  const [prompt, setPrompt] = useState("What is the capital of France?");
8  const { ask, response, loading, error } = useAsk();
9
10  const handleSubmit = async (e: SubmitEvent) => {
11    e.preventDefault();
12    await ask(prompt);
13  };
14
15  return (
16    <section className="bg-white dark:bg-zinc-900 rounded-lg p-6 shadow">
17      <h2 className="text-xl font-semibold mb-4 text-black dark:text-white">
18        /ask - Non-streaming
19      </h2>
20      <form onSubmit={handleSubmit} className="space-y-4">
21        <input
22          type="text"
23          value={prompt}
24          onChange={(e) => setPrompt(e.target.value)}
25          className="w-full p-3 border rounded-lg dark:bg-zinc-800 dark:border-zinc-700 dark:text-white"
26          placeholder="Enter your prompt..."
27        />
28        <button
29          type="submit"
30          disabled={loading}
31          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
32        >
33          {loading ? "Loading..." : "Ask"}
34        </button>
35      </form>
36      {error && (
37        <div className="mt-4 p-4 bg-red-100 dark:bg-red-900 rounded-lg">
38          <p className="text-red-700 dark:text-red-200">{error.message}</p>
39        </div>
40      )}
41      {response && (
42        <div className="mt-4 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
43          <p className="text-black dark:text-white whitespace-pre-wrap">{response}</p>
44        </div>
45      )}
46    </section>
47  );
48}

Create components/index.ts to export the component:

1export { AskExample } from "./AskExample";

Step 3.5: Update the Home Page

Replace app/page.tsx:

1import { AskExample } from "@/components";
2
3export default function Home() {
4  return (
5    <div className="min-h-screen bg-zinc-50 dark:bg-black p-8">
6      <main className="max-w-4xl mx-auto space-y-8">
7        <h1 className="text-3xl font-bold text-center text-black dark:text-white">
8          AI SDK Test
9        </h1>
10
11        <div className="grid gap-8">
12          <AskExample />
13        </div>
14      </main>
15    </div>
16  );
17}

Step 3.6: Run the Frontend

npm run dev

Open http://localhost:3000, type a prompt, and click Ask. You should see the AI response appear.

Phase 4: Add Streaming (Enhancement)

Now let's enhance our app with streaming responses for a better user experience. Instead of waiting for the entire response, users will see text appear token-by-token in real time.

Step 4.1: Add streamText to AISDKManager

Update src/plugins/ai-sdk/server/src/lib/init-ai-sdk.ts to add streaming capabilities.

Update the import to add streamText:

1import { generateText, streamText, type LanguageModel } from "ai"; // ← Added streamText

Add this method to the AISDKManager class (after generateText()):

1  async streamText(prompt: string, options?: { system?: string }) {
2    const result = streamText({
3      model: this.getLanguageModel(),
4      prompt,
5      system: options?.system,
6    });
7    return { textStream: result.textStream };
8  }

Your full file should now look like this:

1import { createAnthropic, type AnthropicProvider } from "@ai-sdk/anthropic";
2import { generateText, streamText, type LanguageModel } from "ai"; // ← Added streamText
3import {
4  CHAT_MODELS,
5  DEFAULT_MODEL,
6  type PluginConfig,
7  type ChatModelName,
8} from "./types";
9
10class AISDKManager {
11  private provider: AnthropicProvider | null = null;
12  private model: ChatModelName = DEFAULT_MODEL;
13
14  initialize(config: unknown): boolean {
15    const cfg = config as Partial<PluginConfig> | undefined;
16
17    if (!cfg?.anthropicApiKey) {
18      return false;
19    }
20
21    this.provider = createAnthropic({
22      apiKey: cfg.anthropicApiKey,
23      baseURL: cfg.baseURL,
24    });
25
26    if (cfg.chatModel && CHAT_MODELS.includes(cfg.chatModel)) {
27      this.model = cfg.chatModel;
28    }
29
30    return true;
31  }
32
33  private getLanguageModel(): LanguageModel {
34    if (!this.provider) {
35      throw new Error("AI SDK Manager not initialized");
36    }
37    return this.provider(this.model);
38  }
39
40  async generateText(prompt: string, options?: { system?: string }) {
41    const result = await generateText({
42      model: this.getLanguageModel(),
43      prompt,
44      system: options?.system,
45    });
46    return { text: result.text };
47  }
48
49  // ↓ New method
50  async streamText(prompt: string, options?: { system?: string }) {
51    const result = streamText({
52      model: this.getLanguageModel(),
53      prompt,
54      system: options?.system,
55    });
56    return { textStream: result.textStream };
57  }
58
59  getChatModel(): ChatModelName {
60    return this.model;
61  }
62
63  isInitialized(): boolean {
64    return this.provider !== null;
65  }
66}
67
68export const aiSDKManager = new AISDKManager();

Step 4.2: Install Koa Types

The SSE utility we're about to create uses Koa's Context type. Install the type definitions in your plugin directory:

cd src/plugins/ai-sdk
npm install --save-dev @types/koa --legacy-peer-deps

Note: After installing, if your editor still shows a "Cannot find module 'koa'" error, don't worry - this is just your IDE not picking up the newly installed types. Reload VS Code (Cmd+Shift+P → "Developer: Reload Window") and the error will disappear. The build itself will work fine.

Step 4.3: Create SSE Utilities

We need a helper to set up Server-Sent Events (SSE) on Koa's response. Create src/plugins/ai-sdk/server/src/lib/utils.ts:

1import type { Context } from "koa";
2import { PassThrough } from "node:stream";
3
4export function createSSEStream(ctx: Context): PassThrough {
5  ctx.set({
6    "Content-Type": "text/event-stream",
7    "Cache-Control": "no-cache, no-transform",
8    Connection: "keep-alive",
9    "X-Accel-Buffering": "no",
10  });
11
12  const stream = new PassThrough();
13  ctx.body = stream;
14  ctx.res.flushHeaders();
15
16  return stream;
17}
18
19export function writeSSE(stream: PassThrough, data: unknown): void {
20  stream.write(`data: ${JSON.stringify(data)}\n\n`);
21}

Step 4.4: Add askStream to Service

Update src/plugins/ai-sdk/server/src/services/service.ts to add streaming support.

Add this method (after ask()):

1  async askStream(prompt: string, options?: { system?: string }) {
2    const result = await aiSDKManager.streamText(prompt, options);
3    return result.textStream;
4  },

Your full service file should now look like this:

1import type { Core } from "@strapi/strapi";
2import { aiSDKManager } from "../lib/init-ai-sdk";
3
4const service = ({ strapi }: { strapi: Core.Strapi }) => ({
5  async ask(prompt: string, options?: { system?: string }) {
6    const result = await aiSDKManager.generateText(prompt, options);
7    return result.text;
8  },
9
10  // ↓ New method
11  async askStream(prompt: string, options?: { system?: string }) {
12    const result = await aiSDKManager.streamText(prompt, options);
13    return result.textStream;
14  },
15
16  isInitialized() {
17    return aiSDKManager.isInitialized();
18  },
19});
20
21export default service;

Step 4.5: Add askStream to Controller

Update src/plugins/ai-sdk/server/src/controllers/controller.ts.

Add the import for our SSE utilities at the top:

1import { createSSEStream, writeSSE } from "../lib/utils";

Add this method (after ask()):

1  async askStream(ctx: Context) {
2    const { prompt, system } = (ctx.request as any).body as { prompt?: string; system?: string };
3
4    if (!prompt || typeof prompt !== 'string') {
5      ctx.badRequest('prompt is required');
6      return;
7    }
8
9    const service = strapi.plugin('ai-sdk').service('service');
10    if (!service.isInitialized()) {
11      ctx.badRequest('AI SDK not initialized');
12      return;
13    }
14
15    const textStream = await service.askStream(prompt, { system });
16    const stream = createSSEStream(ctx);
17
18    void (async () => {
19      try {
20        for await (const chunk of textStream) {
21          writeSSE(stream, { text: chunk });
22        }
23        stream.write('data: [DONE]\n\n');
24      } catch (error) {
25        strapi.log.error('AI SDK stream error:', error);
26        writeSSE(stream, { error: 'Stream error' });
27      } finally {
28        stream.end();
29      }
30    })();
31  },

Your full controller file should now look like this:

1import type { Core } from "@strapi/strapi";
2import type { Context } from "koa";
3import { createSSEStream, writeSSE } from "../lib/utils";
4
5const controller = ({ strapi }: { strapi: Core.Strapi }) => ({
6  async ask(ctx: Context) {
7    const { prompt, system } = (ctx.request as any).body as {
8      prompt?: string;
9      system?: string;
10    };
11
12    if (!prompt || typeof prompt !== "string") {
13      ctx.badRequest("prompt is required and must be a string");
14      return;
15    }
16
17    const service = strapi.plugin("ai-sdk").service("service");
18    if (!service.isInitialized()) {
19      ctx.badRequest("AI SDK not initialized");
20      return;
21    }
22
23    const result = await service.ask(prompt, { system });
24    ctx.body = { data: { text: result } };
25  },
26
27  // ↓ New method
28  async askStream(ctx: Context) {
29    const { prompt, system } = (ctx.request as any).body as {
30      prompt?: string;
31      system?: string;
32    };
33
34    if (!prompt || typeof prompt !== "string") {
35      ctx.badRequest("prompt is required");
36      return;
37    }
38
39    const service = strapi.plugin("ai-sdk").service("service");
40    if (!service.isInitialized()) {
41      ctx.badRequest("AI SDK not initialized");
42      return;
43    }
44
45    const textStream = await service.askStream(prompt, { system });
46    const stream = createSSEStream(ctx);
47
48    void (async () => {
49      try {
50        for await (const chunk of textStream) {
51          writeSSE(stream, { text: chunk });
52        }
53        stream.write("data: [DONE]\n\n");
54      } catch (error) {
55        strapi.log.error("AI SDK stream error:", error);
56        writeSSE(stream, { error: "Stream error" });
57      } finally {
58        stream.end();
59      }
60    })();
61  },
62});
63
64export default controller;

Step 4.6: Add Streaming Route

Update src/plugins/ai-sdk/server/src/routes/content-api/index.ts to add the new endpoint:

1export default {
2  type: "content-api",
3  routes: [
4    {
5      method: "POST",
6      path: "/ask",
7      handler: "controller.ask",
8      config: { policies: [] },
9    },
10    {
11      method: "POST",
12      path: "/ask-stream",
13      handler: "controller.askStream",
14      config: { policies: [] },
15    },
16  ],
17};

Step 4.7: Test Streaming with curl

Rebuild and restart your plugin, then test:

curl -X POST http://localhost:1337/api/ai-sdk/ask-stream \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Count from 1 to 5"}'

Important: Don't forget to enable the new endpoint in Strapi Admin: Settings → Users & Permissions → Roles → Public → Ai-sdk → ask-stream.

You should see SSE events streaming in:

1data: {"text":"1"}
2data: {"text":","}
3data: {"text":" 2"}
4...
5
6data: [DONE]

Step 4.8: Write a Test for the Stream Endpoint

Create tests/test-stream.mjs in your Strapi project root:

1const API_URL = "http://localhost:1337/api/ai-sdk";
2
3async function testStream() {
4  console.log("Testing /ask-stream endpoint...\n");
5
6  const response = await fetch(`${API_URL}/ask-stream`, {
7    method: "POST",
8    headers: { "Content-Type": "application/json" },
9    body: JSON.stringify({ prompt: "Count from 1 to 5" }),
10  });
11
12  if (!response.ok) {
13    console.error("Request failed:", response.status, response.statusText);
14    const error = await response.text();
15    console.error(error);
16    process.exit(1);
17  }
18
19  const reader = response.body.getReader();
20  const decoder = new TextDecoder();
21
22  while (true) {
23    const { done, value } = await reader.read();
24    if (done) break;
25    process.stdout.write(decoder.decode(value));
26  }
27
28  console.log("\n\n✅ Stream test passed!");
29}
30
31testStream().catch(console.error);

Add the test script to your package.json:

1{
2  "scripts": {
3    "test:ask": "node tests/test-ask.mjs",
4    "test:stream": "node tests/test-stream.mjs"
5  }
6}

Run the test:

npm run test:stream

Step 4.9: Add Streaming to the Frontend

Now let's add streaming support to our Next.js app. We'll create a dedicated hook and component that sits alongside the existing non-streaming ones.

Add the askStreamAI function to lib/api.ts:

1export async function askStreamAI(
2  prompt: string,
3  options?: { system?: string }
4): Promise<Response> {
5  const res = await fetch(`${API_BASE}/ask-stream`, {
6    method: "POST",
7    headers: { "Content-Type": "application/json" },
8    body: JSON.stringify({ prompt, ...options }),
9  });
10
11  if (!res.ok) {
12    throw new Error(`API error: ${res.status}`);
13  }
14
15  return res;
16}