The launch of the window.ai in the Canary version of Chrome has redefined the developer experience of building AI features on the client side. Gemini Nano, a SLM (Small Language Model), runs locally really fast but is limited to basic tasks.
It looks something like this 👇
const textSession = await window.ai.createTextSession();
const answer = await textSession.prompt("What is the meaning of life?");
This is great, but you're limited by the device hardware, device type, and browser, and it would drain the battery fairly quickly!
What I'm more excited about is the new framework for interacting with AI tooling/utilities with the window.ai standard on the client side!
So here's how you can expand the capability of window.ai to a wider range of powerful client side AI tools in any browser or device with JigsawStack without the limitations of Gemini Nano.
#1 Get a public API key from JigsawStack's dashboard API key tab
Secret keys give access to all APIs with a single key, which is great for backend applications with some form of authentication on your APIs.
For client side applications, we'll use public keys as you can limit what APIs the key has access to and the domains that can interact with this key from the client.
So, if you're only going to use translation, you'll have to add the translation API as part of the API access, the same works for any other service you would use.
Remember to add your domain/subdomains to prevent abuse of your API key from bad actors.
#2 Install JigsawStack by running npm i jigsawstack or using your favorite package manager. Mines yarn!
Now, all you have to do is create a JigsawStack client by passing in the key you created, then pass the client instance to window.ai
const jigsaw = JigsawStack({ apiKey: "pk_fecc....92je9" });
window.ai = jigsaw
Typically, you would want to do this at the root of your application, so it only needs to get instantiated once.
SSR projects like NextJS? Do this in _app.ts in a useEffect() hook
useEffect(() => {
if (typeof window !== "undefined") {
const jigsaw = JigsawStack({ apiKey: "pk_fecc....92je9" });
window.ai = jigsaw
}
}, [typeof window]);
#3 Use it!
Now, you have a full suite of AI power utilities you can use on your client application!
window.ai.translate({ text: "Hey, how are you?", current_language: "en", target_language: "zh" });
window.ai.sentiment({ text: "I love how easy it is to get started" })
window.ai.vision.vocr({ file_store_key: "user_passport.png", prompt: "passport_number" });
You might be asking, what about typescript?
In your global or root type file like index.d.ts, add the following code which extends the typing of window.ai with JigsawStack's types globally
import type { JigsawStack } from "jigsawstack";
declare global {
interface Window {
ai: ReturnType<typeof JigsawStack>;
}
}
export {};
If you're using another AI framework or other future window.ai features with JigsawStack, you can merge them all into the window.ai.
window.ai = {
...window.ai
...otherAIStuff
...jigsaw
}
I'm excited to see AI being used more on the client side, like what React did for web apps, I think Google is doing with window.ai.
This is going to change the way we use AI on the client side, and we're going to see a lot more AI powered applications that are faster and better as it becomes a commodity!
If you're interested in seeing how JigsawStack shapes the AI world, join our growing community of developers on Discord and Twitter. Share your projects, ask questions, and collaborate with others who are just as passionate about innovation as you are.
