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:

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.

Was this page helpful?

Suggest editsRaise issue