AI Widget

A universal AI widget for websites. Supports OpenAI, Gemini, Anthropic, xAI, Meta/LLaMA, Mistral, DeepSeek, Alibaba, and custom AI providers.

Features streaming responses, multi-modal inputs (voice, file, image), persistent sessions, analytics, and framework-agnostic usage. Works with React, Vue, Angular, Svelte, or vanilla JS.

Features

Core AI

• Text completion / generation
• Chatbot conversations (multi-turn)
• Summarization, paraphrasing, translation
• Code assistance: completion, debugging hints, language conversion

Streaming & Real-Time

• Streaming responses from providers like OpenAI
• Real-time incremental updates
• Typing animation simulation
• Progress callbacks

Multi-Modal

• Voice input (speech-to-text) and output (text-to-speech)
• File analysis (PDF, TXT, JSON)
• Image generation and analysis

Frontend Integration

• Framework-agnostic
• React hooks and components
• Vanilla JS support
• Custom themes and UI options

Data & State

• Persistent conversation history (localStorage)
• Optional session-based context
• Analytics & logging support
• Rate-limiting / queueing for multiple users

Developer Experience

• TypeScript ready
• Supports fetch, axios, or custom API clients
• Easy to extend for new providers
• Fully documented API

Installation

npm install ai-widget-pro
# or
yarn add ai-widget-pro

Quick Start

import { complete } from "ai-widget-pro";

const config = {
  provider: "<end-point-link>",
  apiKey: "YOUR_OPENAI_KEY",
  model: "eg. gpt-4 or gpt-3.5-turbo ..."
};

const response = await complete({
  prompt: "Hello AI",
  providerConfig: config
});

console.log("AI Response:", response);

Examples

1. Text Completion

const response = await complete({
  prompt: "Write a short poem about AI and nature",
  providerConfig: config
});
console.log(response);

2. Streaming Example

import { stream } from "ai-widget-pro";

stream({
  prompt: "Explain quantum computing in simple words",
  providerConfig: config,
  onUpdate: (chunk) => process.stdout.write(chunk)
});

3. Voice Support

Text-to-Speech

import { speak } from "ai-widget-pro";
speak("Hello world! This is AI speaking.");

Speech-to-Text

import { startVoiceInput } from "ai-widget-pro";
startVoiceInput((text) => console.log("Recognized speech:", text));

4. File Analysis

import { analyzeFile } from "ai-widget-pro";

const file = new File(["This document explains AI basics"], "ai.txt");

const result = await analyzeFile(file, {
  prompt: "Summarize this document in one paragraph",
  providerConfig: config
});

console.log(result);

5. Image Generation

import { generateImage } from "ai-widget-pro";

const imageUrl = await generateImage("A futuristic city skyline at sunset", {
  prompt: "",
  providerConfig: config
});

console.log("Generated image URL:", imageUrl);

6. Conversation Storage

import { saveConversation, loadConversation } from "ai-widget-pro";

saveConversation("session123", ["Hello AI", "Hi! How can I help you?"]);

const history = loadConversation("session123");
console.log(history);

7. Analytics Logging

import { logEvent } from "ai-widget-pro";

logEvent("message_sent", { prompt: "Hello AI" });
logEvent("voice_input_started");

8. Custom Provider Example

import axios from "axios";
import { complete } from "ai-widget-pro";

const customConfig = {
  provider: "custom",
  apiKey: "",
  apiClient: axios
};

const response = await complete({
  prompt: "Custom AI API test",
  providerConfig: customConfig
});

console.log(response);

9. React Integration

import React, { useState, useEffect } from "react";
import { complete } from "ai-widget-pro";

const AIChat = () => {
  const [response, setResponse] = useState("");

  useEffect(() => {
    complete({ 
      prompt: "Hello from React!", 
      providerConfig: config 
    }).then(setResponse);
  }, []);

  return <div>{response}</div>;
};

export default AIChat;

10. Vue Integration

<template>
  <div>{{ aiResponse }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { complete } from "ai-widget-pro";

const aiResponse = ref("");

onMounted(async () => {
  aiResponse.value = await complete({ 
    prompt: "Hello from Vue!", 
    providerConfig: config 
  });
});
</script>

11. Vanilla JS Integration

<script type="module">
  import { complete } from "./dist/index.js";

  const config = {
    provider: "openai",
    apiKey: "YOUR_OPENAI_KEY",
    model: "gpt-4"
  };

  const output = await complete({ 
    prompt: "Hello Vanilla JS!", 
    providerConfig: config 
  });
  
  document.body.innerText = output;
</script>

API Reference

Core Functions

| Function | Description | Parameters | |----------|-------------|------------| | complete() | Text completion/generation | prompt, providerConfig | | stream() | Streaming responses | prompt, providerConfig, onUpdate | | speak() | Text-to-speech | text, options | | startVoiceInput() | Speech-to-text | callback, options | | analyzeFile() | File analysis | file, prompt, providerConfig | | generateImage() | Image generation | prompt, providerConfig |

Configuration

const config = {
  provider: "openai" | "gemini" | "anthropic" | "custom",
  apiKey: "your-api-key",
  model: "gpt-4" | "gemini-pro" | "claude-3",
  apiClient?: axios | fetch | custom
};

Streaming Flow Diagram

User Input → AI Widget → Provider API → Streaming Response → UI Update
     ↓           ↓            ↓              ↓               ↓
   Prompt    Validation   HTTP Request   Chunk Received   onUpdate()

File/Voice/Image Processing Flow

Input (File/Voice/Image) → Processing → AI Analysis → Output
         ↓                     ↓           ↓          ↓
    Format Detection    Conversion    API Call    Results

Provider Support

| Provider | Text | Streaming | Voice | Images | |----------|------|-----------|-------|--------| | OpenAI | ✅ | ✅ | ✅ | ✅ | | Gemini | ✅ | ⚠️ | ⚠️ | ✅ | | Anthropic | ✅ | ⚠️ | ⚠️ | ❌ | | xAI | ✅ | ⚠️ | ❌ | ❌ | | Custom | ✅ | ✅ | ✅ | ✅ |

✅ Supported | ⚠️ Fallback | ❌ Not Available

Notes

• Streaming is currently supported for OpenAI. Other providers fallback to normal completion.
• Multi-modal features like image generation are stubbed and can be extended for other AI models.
• Works with any HTTP client: fetch, axios, or custom implementations.
• Fully compatible with modern browsers and Node.js.
• TypeScript definitions included for better developer experience.

License

MIT License © 2025

Changelog

v1.0.0

• Initial release
• Core AI functionality
• Multi-provider support
• Framework integrations

Built with ❤️ for developers who want powerful AI integration made simple.