skillboss.co
Sign in
Documentation

Build a Multi-Model AI Chatbot in 15 Minutes

Create a production-ready chatbot that switches between GPT-4, Claude, and Gemini based on the task. No API key juggling required.

Create a production-ready chatbot that switches between GPT-4, Claude, and Gemini based on the task. No API key juggling required.

What You'll Build

A web-based chatbot that intelligently routes queries to GPT-4o (for general chat), Claude Opus (for code), and Gemini Flash (for speed).

Why This Is Powerful

  • Access 3 top AI models with one API key
  • Smart model routing based on query type
  • Production-ready with streaming responses
  • Pay-as-you-go pricing (no subscriptions)

Prerequisites

  • Claude Code, OpenClaw, or Cursor installed
  • SkillBoss account (get $2 free at skillboss.co)
  • Basic TypeScript knowledge

Architecture

Input: User message Skills: openai/gpt-4o, anthropic/claude-opus-4, google/gemini-2-flash Output: AI response with streaming

Step 1: Install SkillBoss CLI

One command to get access to 679+ AI models:

# Install SkillBoss
set up skillboss.co/skill.md

# Verify installation
skillboss --version

Step 2: Create Next.js Project

Set up a new Next.js app with TypeScript:

npx create-next-app@latest ai-chatbot --typescript --tailwind --app
cd ai-chatbot

Step 3: Install Dependencies

Add OpenAI SDK (works with SkillBoss API):

npm install openai

Step 4: Create API Route

Build the chat endpoint with smart model routing:

// app/api/chat/route.ts
import { OpenAI } from 'openai'
import { OpenAIStream, StreamingTextResponse } from 'ai'

const client = new OpenAI({
  baseURL: 'https://api.skillboss.co/v1',
  apiKey: process.env.SKILLBOSS_API_KEY,
})

// Smart model selection
function selectModel(message: string): string {
  if (message.includes('code') || message.includes('function')) {
    return 'anthropic/claude-opus-4' // Best for code
  }
  if (message.length < 50) {
    return 'google/gemini-2-flash' // Fast for short queries
  }
  return 'openai/gpt-4o' // Default for general chat
}

export async function POST(req: Request) {
  const { messages } = await req.json()
  const lastMessage = messages[messages.length - 1].content

  const model = selectModel(lastMessage)

  const response = await client.chat.completions.create({
    model,
    messages,
    stream: true,
  })

  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}

Step 5: Create Chat UI

Build a clean chat interface:

// app/page.tsx
'use client'
import { useChat } from 'ai/react'

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Multi-Model AI Chat</h1>

      <div className="flex-1 overflow-y-auto mb-4 space-y-4">
        {messages.map((m) => (
          <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`rounded-lg px-4 py-2 max-w-[80%] ${
              m.role === 'user'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-200 text-gray-900'
            }`}>
              {m.content}
            </div>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask anything..."
          className="flex-1 border rounded-lg px-4 py-2"
        />
        <button
          type="submit"
          className="bg-blue-500 text-white rounded-lg px-6 py-2 hover:bg-blue-600"
        >
          Send
        </button>
      </form>
    </div>
  )
}

Step 6: Add Environment Variables

Configure your SkillBoss API key:

# .env.local
SKILLBOSS_API_KEY=sk_your_key_here

# Get your key at: https://skillboss.co/console

Step 7: Run Your Chatbot

Start the development server:

npm run dev

# Open http://localhost:3000
# Try asking: "Write a Python function to sort a list"
# (Will use Claude Opus for code)

Related Tutorials

© 2026 SkillBoss