JSPM

@allem-sdk/ai

0.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 23
  • Score
    100M100P100Q49807F
  • License MIT

AI chat and completion hooks for React. Multi-provider streaming (Google Gemini, Anthropic Claude, OpenAI GPT). Built on Vercel AI SDK v6.

Package Exports

  • @allem-sdk/ai
  • @allem-sdk/ai/client
  • @allem-sdk/ai/server

Readme

Allem SDK

npm version License React 19 TypeScript AI SDK v6

@allem-sdk/ai

AI hooks for React built on Vercel AI SDK v6. Multi-provider support (Google, Anthropic, OpenAI) with a unified API.

Installation

npm install @allem-sdk/ai ai @ai-sdk/react

# Install at least one provider
npm install @ai-sdk/google    # Google Gemini
npm install @ai-sdk/anthropic # Anthropic Claude
npm install @ai-sdk/openai    # OpenAI GPT

Client Usage

import { useState } from "react";
import { AllemAIProvider, useAllemChat } from "@allem-sdk/ai";

function App() {
  return (
    <AllemAIProvider api="/api/chat" provider="google">
      <Chat />
    </AllemAIProvider>
  );
}

function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status } = useAllemChat();
  const isLoading = status === "submitted" || status === "streaming";

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.parts?.filter((p) => p.type === "text").map((p) => p.text).join("")}
        </div>
      ))}
      <form onSubmit={async (e) => {
        e.preventDefault();
        const text = input;
        setInput("");
        await sendMessage({ text });
      }}>
        <input value={input} onChange={(e) => setInput(e.target.value)} disabled={isLoading} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Server Usage

// app/api/chat/route.ts (Next.js)
import { createAllemChatHandler } from "@allem-sdk/ai";
import { google } from "@ai-sdk/google";
import { anthropic } from "@ai-sdk/anthropic";

export const POST = createAllemChatHandler({
  providers: {
    google: (model) => google(model ?? "gemini-2.0-flash"),
    anthropic: (model) => anthropic(model ?? "claude-sonnet-4-20250514"),
  },
  defaultProvider: "google",
});

Exports

Export Type Description
useAllemChat Hook Chat hook with streaming, provider context, and message history
useAllemCompletion Hook Text completion hook for single-turn prompts
useAllemAIConfig Hook Access the current provider context values (api, provider, model, headers)
AllemAIProvider Component React context provider for default API and provider config
createAllemChatHandler Server Server-side API route handler with multi-provider routing

Part of Allem SDK

This package can be used standalone or as part of the full SDK. Install allem-sdk to get all packages in one install.

Support

If you find Allem SDK useful, consider supporting its development:

Buy Me A Coffee

License

MIT - Ahmed Allem