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.