# Bundle an Asset Store filter for Web

> Serve a compatible .nosmai package as a static Web asset and apply its URL through the Nosmai Web developer preview.

> For AI agents: the complete documentation index is at https://nosmai.com/llms/effects.txt

Product: Nosmai Effects
Group: guide
Source: https://nosmai.com/docs/effects/guides/filters/bundle-an-asset-store-filter/web/

## Prerequisites

- A working [Web quickstart](/docs/effects/quickstart/web/)
- A Web-compatible effect package and its resources

## Add the package

For a Vite project, place the package in `public/filters`:

```text
public/filters/heart_face.nosmai
```

It will be served at `/filters/heart_face.nosmai`.

## Apply it

```ts
const result = await sdk.applyEffect(
  '/filters/heart_face.nosmai',
);

if (!result.success) {
  throw new Error(result.error ?? 'Effect could not be applied');
}
```

The package must be compatible with the Web preview. Mobile package support
does not guarantee Web support.

## Verify it worked

Reload with browser cache disabled once, then confirm the network request is
`200` and the effect is visible.

## Common errors

| Symptom | Fix |
| --- | --- |
| Package request is `404` | Confirm the public path and deployment output |
| CORS or CSP blocks the request | Allow the package origin in hosting and Content Security Policy |
| Package loads but is rejected | Use Web compatibility inspection and a package authored for the preview |

## Next steps

- [Add an AR mask on Web](/docs/effects/guides/effects/add-an-ar-mask/web/)
- [Review Web preview support](/docs/effects/platforms/web/)

## References

- [Web quickstart](/docs/effects/quickstart/web/)