Window.ai

Models

Explore our complete list of models and API references here.

Overview

The window.ai Chrome API introduces native AI capabilities that run locally within the browser environment. While Chrome’s native implementation is still in its early stages (available in Chrome Canary) with limited capabilities, JigsawStack extends this concept by providing a comprehensive suite of powerful AI utilities through the same familiar interface. By integrating JigsawStack with the window.ai object, you can:

Provide consistent AI capabilities across all browsers
Access advanced AI features beyond what’s natively available
Create seamless browser-based AI experiences for your users

Prerequisites

Before integrating JigsawStack with window.ai, you’ll need:

A JigsawStack account
Your JigsawStack Public API key

For client-side browser integration, always use your public key instead of your secret key. You can enhance security by restricting the public key to specific APIs or domains. Learn more about public vs. secret API keys.

Integration

Basic Setup

Add JigsawStack to your browser application and assign it to the window.ai object:

// Import JigsawStack in a module environment
import { JigsawStack } from "jigsawstack";

// Initialize with your public key
const jigsawstack = JigsawStack({ 
  apiKey: "pk_fecc....92je9"  // Use your public key here
});

// Assign to window.ai
window.ai = jigsawstack;

For script tag inclusion:

<script src="https://cdn.jigsawstack.com/jigsawstack.min.js"></script>
<script>
  // Initialize JigsawStack
  const jigsawstack = JigsawStack({ 
    apiKey: "pk_fecc....92je9"  // Your public key
  });
  
  // Assign to window.ai
  window.ai = jigsawstack;
</script>

TypeScript Support

For TypeScript projects, add proper typing for the window.ai object:

// index.d.ts or types.d.ts
import type { JigsawStack } from "jigsawstack";

declare global {
  interface Window {
    ai: ReturnType<typeof JigsawStack>;
  }
}

export {};

Using window.ai

Once integrated, you can access all JigsawStack capabilities through the window.ai object:

Sentiment Analysis

// Analyze sentiment with a simple call
const sentiment = await window.ai.sentiment("I love how easy it is to get started");
console.log(sentiment); // { sentiment: "positive", score: 0.92 }

Text Translation

// Translate text between languages
const translation = await window.ai.translate({
  text: "Hello, world!",
  targetLang: "es"
});
console.log(translation); // "¡Hola, mundo!"

Text Summarization

// Generate a summary of longer text
const summary = await window.ai.summary({
  text: "Long article or document content here...",
  maxLength: 100
});
console.log(summary); // Concise summary of the text

Image Generation

// Generate an image from a text prompt
const image = await window.ai.image_generation({
  prompt: "A serene mountain landscape with a lake"
});
document.getElementById('generatedImage').src = image.url;

Complete Example

Here’s a complete example showing how to integrate JigsawStack with window.ai in a web application:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JigsawStack window.ai Demo</title>
  <script src="https://cdn.jigsawstack.com/jigsawstack.min.js"></script>
</head>
<body>
  <h1>JigsawStack window.ai Demo</h1>
  
  <div>
    <h2>Sentiment Analysis</h2>
    <input type="text" id="sentimentText" placeholder="Enter text for sentiment analysis">
    <button id="analyzeSentiment">Analyze</button>
    <div id="sentimentResult"></div>
  </div>
  
  <script>
    // Initialize JigsawStack and assign to window.ai
    const jigsawstack = JigsawStack({ 
      apiKey: "pk_fecc....92je9" // Your public key
    });
    window.ai = jigsawstack;
    
    // Set up event listeners
    document.getElementById('analyzeSentiment').addEventListener('click', async () => {
      const text = document.getElementById('sentimentText').value;
      const result = await window.ai.sentiment(text);
      
      document.getElementById('sentimentResult').textContent = 
        `Sentiment: ${result.sentiment} (Score: ${result.score})`;
    });
  </script>
</body>
</html>

Fallback Strategy

To create a resilient application that works with both native window.ai (when available) and JigsawStack:

// Check if native window.ai exists, otherwise use JigsawStack
if (!window.ai) {
  const jigsawstack = JigsawStack({ apiKey: "pk_fecc....92je9" });
  window.ai = jigsawstack;
}

// Now you can use window.ai safely
const result = await window.ai.sentiment("Your text here");

Browser Compatibility

JigsawStack’s window.ai integration works across all major browsers:

Chrome
Firefox
Safari
Edge
Opera

This provides consistent AI capabilities regardless of native browser AI support.

Get Started

Quick Start

Integration

Web Scrape

Web Search

Translate

Data

Vision

Audio

Classification

File Management

Webhooks

Resources

Others

Models

Overview

Prerequisites

Integration

Basic Setup

TypeScript Support

Using window.ai

Sentiment Analysis

Text Translation

Text Summarization

Image Generation

Complete Example

Fallback Strategy

Browser Compatibility

Models

​Overview

​Prerequisites

​Integration

​Basic Setup

​TypeScript Support

​Using window.ai

​Sentiment Analysis

​Text Translation

​Text Summarization

​Image Generation

​Complete Example

​Fallback Strategy

​Browser Compatibility

Overview

Prerequisites

Integration

Basic Setup

TypeScript Support

Using window.ai

Sentiment Analysis

Text Translation

Text Summarization

Image Generation

Complete Example

Fallback Strategy

Browser Compatibility