Integrating Fikra API with Next.js AI Chatbot Framework

This guide demonstrates how to configure the Next.js AI chatbot custom API framework to use Fikra API as a custom OpenAI-compatible endpoint. Fikra API is hosted at fikraapi.co.ke with the base URL api.fikraapi.co.ke/v1.

Prerequisites

• A Next.js project with the AI SDK installed.
• A valid Fikra API key.

Step 1: Install Dependencies

Ensure you have the necessary packages installed:

npm install ai @ai-sdk/openai

Step 2: Configure the Custom API Endpoint

In your Next.js application, you need to create a custom OpenAI provider instance that points to the Fikra API base URL. Below is the exact JavaScript code block showing how to change the base_url in the Next.js AI chatbot custom API to point to api.fikraapi.co.ke/v1.

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

// Create a custom OpenAI provider instance pointing to Fikra API
const fikra = createOpenAI({
  apiKey: process.env.FIKRA_API_KEY,
  baseURL: 'https://api.fikraapi.co.ke/v1', // Exact base URL for Fikra API
});

// Export the model for use in your chatbot
export const model = fikra('gpt-4o'); // Or any supported model

Step 3: Use the Model in Your Chatbot

Now, you can use the configured model in your Next.js AI chatbot component.

import { useChat } from 'ai/react';
import { model } from './fikra-provider'; // Import the configured model

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat', // Your API route
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
      </form>
    </div>
  );
}

Step 4: Create the API Route

Create an API route in app/api/chat/route.js to handle chat requests.

import { streamText } from 'ai';
import { model } from './fikra-provider'; // Import the configured model

export const maxDuration = 60; // Optional: Set max duration for streaming

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

  const result = streamText({
    model: model,
    messages: messages,
  });

  return result.toDataStreamResponse();
}

Step 5: Set Environment Variables

Add your Fikra API key to your .env.local file:

FIKRA_API_KEY=your_fikra_api_key_here

Conclusion

By following these steps, you have successfully configured the Next.js AI chatbot custom API framework to use Fikra API as a custom OpenAI endpoint. The base URL api.fikraapi.co.ke/v1 is now set, allowing seamless integration with Fikra's AI services.