---
title: "Installing Brainfish in Micro-UI Architectures"
description: "Brainfish integrates as a lightweight JavaScript widget that runs entirely in your frontend. Whether you’re working with a monolith, a modern single-page app, or a federated micro-frontend (MicroUI) architecture, the install process is the same at its core: add a snippet in your UI layer, update CSP, and optionally wire up analytics or events."
canonical_url: "https://help.brainfi.sh/articles/installing-brainfish-in-micro-ui-architectures-hUtyDYOuK8"
md_url: "https://help.brainfi.sh/articles/installing-brainfish-in-micro-ui-architectures-hUtyDYOuK8.md"
---
# Installing Brainfish in Micro-UI Architectures

Brainfish integrates as a lightweight JavaScript widget that runs entirely in your frontend. Whether you’re working with a monolith, a modern single-page app, or a federated micro-frontend (MicroUI) architecture, the install process is the same at its core: add a snippet in your UI layer, update CSP, and optionally wire up analytics or events.

## Key Concepts

* **Frontend-only**: Brainfish does not require backend changes.
* **Install once, use everywhere**: In micro-frontend environments, add the widget at the shell or shared design system layer so you don’t need to touch every service individually.
* **Optional deep integrations**: Analytics, events, and custom callbacks can be enabled as needed.


---

## Installation Options

### Option A — Script Tag (fastest)

Add the module script in your HTML layout (e.g., MicroUI shell):

```html
<script type="module">
  import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js";
  Brainfish.Widgets.init({ widgetKey: "bf_search_widget_<YOUR_KEY>" });
</script>
```

### Option B — NPM Package

Install via NPM if you prefer embedding in a shared UI library or per micro-frontend:

```bash
npm install @brainfish-ai/web-widget
```

```ts

import Brainfish from '@brainfish-ai/web-widget';

Brainfish.Widgets.init({ widgetKey: "bf_search_widget_<YOUR_KEY>" });
```

Then add a trigger button in your UI code.

## Supporting Micro-Frontends

### Recommended approaches


1. **Shell-level integration** Add Brainfish in the MicroUI container/shell so all micro-frontends inherit it automatically.
2. **Tag Manager injection** Optionally inject the snippet with [Google Tag Manager](/articles/how-to-integrate-brainfish-widgets-with-google-tag-manager-a-step-by-step-guide-5KShJpWwaU) or similar, if you want zero-code rollouts.
3. **Legacy monoliths** Install in the main layout template identical to a single-page app setup.

### Per-service installs (not recommended)

If each service owns its own independent UI with no shared shell or design system, you can embed the snippet manually (recommended option is using Google Tag Manager or shared script). 

## Content Security Policy (CSP) Updates

If you enforce CSP, add Brainfish domains:

```html
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               frame-src 'self' https://app.brainfi.sh https://agent.brainfi.sh;
               connect-src 'self' wss://analytic.brainfi.sh;">
```

## Events & Analytics

### Identify users

```js

Brainfish.Widgets.identify({
  userId: user.id,       // Required: A unique identifier for the user (e.g., their database ID).
  email: user.email,     // Optional: The user's email address for additional context.
  properties: {          // Optional: Custom attributes to enrich the user profile.
    teamId: user.teamId,           // The team or organization the user belongs to.
    subscription: user.subscription, // The user's subscription level or plan.
    isAdmin: user.isAdmin,         // A boolean indicating if the user is an admin.
  },
});
```

## Rollout Plan


1. **Decide install point** — MicroUI shell or design system recommended.
2. **Update CSP** — Apply in all environments.
3. **Add triggers** — Global header or context-specific help icons.
4. **Enable analytics/events** (optional).
5. **Staged rollout** — Deploy to staging → canary → production.

## Framework Notes

Brainfish works with:

* React
* Vue
* Angular
* Salesforce Lightning Web Components (LWC)
* Plain HTML/JS
* Tag Manager injection

See our framework-specific guides in the Help Center for step-by-step examples.

**Next Step**: [Copy your widget config](#) from the Agents dashboard and insert it into your shell or design system.