# AI egress
> AI model traffic from AIOP to each endpoint; with EU-only routing on, requests to endpoints outside the EU stop at the policy point.
- Element: `<ln-egress>`
- React: `import { LnEgress } from "@/components/lumesec/ln-egress"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-egress.json
- Page: https://elements.lumesec.ai/components/network/egress



Live preview: https://elements.lumesec.ai/view/ln-egress

```html
<ln-egress></ln-egress>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-egress
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/ln-egress.json
```

## Usage

React:

```tsx
import { LnEgress } from "@/components/lumesec/ln-egress";

export function Example() {
  return (
    <LnEgress />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-egress.js"></script>

<ln-egress></ln-egress>
```

## Behaviour

Model traffic from AIOP to each endpoint. With EU-only routing on, requests to endpoints outside the EU stop at the policy point and are counted.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                | Description                                       |
| -------- | ---------- | --------------------- | ------------------------------------------------- |
| `policy` | `onPolicy` | `{ euOnly: boolean }` | Fires when EU-only routing is switched on or off. |

## Accessibility

* EU-only routing is a `role="switch"` button with `aria-checked` and `aria-label="EU-only routing"`.
* Switching it announces the new policy in a polite live region.
* Each endpoint's state (EU, Local, Outside EU, Blocked) and rate are text; the canvas is `aria-hidden`.
* Reduced motion: traffic pixels and the flash at the block point are not drawn.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--destructive`, `--foreground`, `--lumesec`, `--lumesec-success`, `--lumesec-warning`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-danger`, `--ui-fg`, `--ui-fg2`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-surface`, `--ui-track` and `--ui-warn`.

## Notes

* Shows five built-in endpoints, one outside the EU (Unlisted endpoint, us-east-1). No attribute selects other endpoints; rates and counters are simulated and update every second while the element is on screen.
* EU-only routing is on by default; while it is on, Blocked today keeps counting.
* Uses a container query: below 470px the source box narrows and the stats wrap to two columns.