Template Showcase

Chatbot Starter

A complete AI chatbot implementation featuring real-time streaming, persistent conversation history using local storage or a database, and the ability for the AI to call external tools.

Clone Repository

ainative.sh/examples/chatbot-starter

Core Capabilities

Every starter is pre-configured with industry best practices and deep AINative integrations. Clean, modular, and designed to scale from prototype to production.

Real-time token streaming

Enterprise-ready implementation with full type safety and observability. Optimized for high-throughput streaming and minimal latency.

Tool-calling support (e.g., search, weather)

Optimized for Edge runtimes and serverless environments.

Persistent message history

Secure by default with built-in validation and CSRF protection.

Customizable system prompts

Deep integration with the AINative Reconciler state system for buttery smooth UI updates and zero-flicker streaming.

Technical Stack

Clean, modular, and designed to scale from prototype to production.

Frontend Layer

Reactive hooks and streaming primitives.

TYPESCRIPTREACT 19

Chat.tsx

import { useStream } from "@ainative/react";

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useStream({
    api: "/api/chat",
  });

  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <div className="inline-block p-3 rounded-lg bg-muted">
              {m.content}
            </div>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="p-4 border-t">
        <input 
          value={input} 
          onChange={handleInputChange} 
          placeholder="Ask something..."
          className="w-full p-2 rounded border"
        />
      </form>
    </div>
  );
}

Backend Adapter

Universal protocol handlers for any runtime.

NODE.JSEDGE READY

route.ts

import { AINativeHandler } from "@ainative/server-node";

export const POST = AINativeHandler({
  provider: "openai",
  model: "gpt-4o",
  tools: {
    getWeather: {
      description: "Get the current weather",
      parameters: { city: { type: "string" } },
      execute: async ({ city }) => ({ temperature: 22, condition: "Sunny" })
    }
  }
});