# Is window.ai the new way for client side AI?

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 👇

```typescript
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](https://jigsawstack.com/dashboard)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724720900471/ba94e180-3b04-4469-8810-53af493dc725.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724721147460/41e93b83-4dba-4d09-b04d-61f8a68649be.png align="center")

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`

```typescript

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

```typescript
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!

```typescript
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

```typescript
//index.d.ts
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`.

```typescript
window.ai = {
  ...window.ai //base window.ai features
  ...otherAIStuff //other tools
  ...jigsaw //JigsawStack AI suite
}
```

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!

## **Join the JigsawStack Community**

If you're interested in seeing how JigsawStack shapes the AI world, join our growing community of developers on [Discord](https://discord.gg/GnvmdZ7z) and [Twitter](https://x.com/jigsawstack). Share your projects, ask questions, and collaborate with others who are just as passionate about innovation as you are.