open-index/open-npm huggingface dataset:
npm package: @livepeer/chroma
Description: A component library that contains some UI building blocks for livestreaming video applications.
Latest version: 1.0.0-alpha.7

# Chroma

[![home](https://img.shields.io/badge/%E2%97%80-home-lightgrey.svg?style=flat-square)](https://github.com/livepeer/livepeerjs#readme)
[![npm](https://img.shields.io/npm/v/@livepeer/chroma.svg?style=flat-square)](https://www.npmjs.com/package/@livepeer/chroma)
[![Discord](https://img.shields.io/discord/423160867534929930.svg?style=flat-square)](https://discord.gg/7wRSUGX)
[![GitHub issues](https://img.shields.io/github/issues/livepeer/livepeerjs/chroma.svg?style=flat-square)](https://github.com/livepeer/livepeerjs/labels/chroma)

A component library that contains some UI building blocks for livestreaming video applications.

More docs to come soon! For now, take a look at the `scripts` section of [`package.json`](https://github.com/livepeer/livepeerjs/blob/master/packages/chroma/package.json#L17)
npm package: @livepeer/core
Description: Livepeer UI Kit's core vanilla JS library.
Latest version: 3.3.1

# @livepeer/core

## Documentation

The `@livepeer/core` package is used as a dependency in `livepeer` and `@livepeer/core-react` - it should not be installed directly. For full documentation and examples, visit [docs.livepeer.org](https://docs.livepeer.org).

## Community

Check out the following places for more livepeer-related content:

- Join the [discussions on GitHub](https://github.com/livepeer/ui-kit/discussions)
- Follow [@livepeer](https://twitter.com/livepeer) on Twitter
- Jump into our [Discord](https://discord.gg/livepeer)
npm package: @livepeer/core-react
Description: Internal library used for livepeer react primitives.
Latest version: 3.2.10

# @livepeer/core-react

## Documentation

The `@livepeer/core-react` package is used as a dependency in `@livepeer/react` and `@livepeer/react-native` - it should not be installed directly. For full documentation and examples, visit [docs.livepeer.org](https://docs.livepeer.org).

## Community

Check out the following places for more livepeer-related content:

- Join the [discussions on GitHub](https://github.com/livepeer/ui-kit/discussions)
- Follow [@livepeer](https://twitter.com/livepeer) on Twitter
- Jump into our [Discord](https://discord.gg/livepeer)
npm package: @livepeer/core-web
Description: Livepeer UI Kit's core web library, for adding reactive stores to video elements.
Latest version: 5.2.6

# @livepeer/core-web

## Documentation

The `@livepeer/core-web` package contains vanilla JS data fetching and Livepeer provider/protocol interactions for the livepeer ecosystem. For full documentation and examples, visit [docs.livepeer.org](https://docs.livepeer.org).

## Installation

Install `@livepeer/core-web` and its peer dependencies.

```bash
npm install @livepeer/core-web
```

## Community

Check out the following places for more livepeer-related content:

- Join the [discussions on GitHub](https://github.com/livepeer/ui-kit/discussions)
- Follow [@livepeer](https://twitter.com/livepeer) on Twitter
- Jump into our [Discord](https://discord.gg/livepeer)
npm package: @livepeer/design-system
Description: Design system for [Livepeer](https://livepeer.org/) products.
Latest version: 1.1.1

# Livepeer Design System

Design system for [Livepeer](https://livepeer.org/) products.

## Documentation

Visit [https://livepeer-design-system.vercel.app/](https://livepeer-design-system.vercel.app/) to view the design system reference components.

## Usage

```
yarn add @livepeer/design-system
```

## License

Licensed under the [MIT](./LICENSE) license.
npm package: @livepeer/lpx
Description: A command line protocol explorer. It has a console mode that allows you to interactively use the sdk.
Latest version: 1.0.0-alpha.6

# LPX

[![home](https://img.shields.io/badge/%E2%97%80-home-lightgrey.svg?style=flat-square)](https://github.com/livepeer/livepeerjs#readme)
[![npm](https://img.shields.io/npm/v/@livepeer/lpx.svg?style=flat-square)](https://www.npmjs.com/package/@livepeer/lpx)
[![Discord](https://img.shields.io/discord/423160867534929930.svg?style=flat-square)](https://discord.gg/7wRSUGX)
[![GitHub issues](https://img.shields.io/github/issues/livepeer/livepeerjs/lpx.svg?style=flat-square)](https://github.com/livepeer/livepeerjs/labels/lpx)

A command line protocol explorer. It has a console mode that allows you to interactively use the sdk.

More docs to come soon! For now, take a look at the `scripts` section of [`package.json`](https://github.com/livepeer/livepeerjs/blob/master/packages/lpx/package.json#L22)
npm package: @livepeer/monitor
Description: Monitors Livepeer's infrastructure
Author: Livepeer
Latest version: 1.0.0-alpha.6

# Livepeer Monitor

[![Discord](https://img.shields.io/discord/423160867534929930.svg?style=flat-square)](https://discord.gg/7wRSUGX)
[![GitHub issues](https://img.shields.io/github/issues/livepeer/livepeerjs/monitor.svg?style=flat-square)](https://github.com/livepeer/livepeerjs/labels/monitor)

This is a little script that monitors the Livepeer subgraph and informs a human
on Discord if it's falling behind.

For simplicity of deployment, `yarn run deploy:build` builds it into a single
JavaScript file including all dependencies with Parcel.

If you're looking to customize it for your purposes, check out the variables in
`src/config.js`.
npm package: @livepeer/react
Description: React primitives for video apps.
Latest version: 4.3.6

# @livepeer/react

## Documentation

The `@livepeer/react` package contains React-specific components for the livepeer ecosystem. For full documentation and examples, visit [docs.livepeer.org](https://docs.livepeer.org).

## Installation

Install `@livepeer/react` using a package manager.

```bash
npm install @livepeer/react
```

## Community

Check out the following places for more livepeer-related content:

- Join the [discussions on GitHub](https://github.com/livepeer/ui-kit/discussions)
- Follow [@livepeer](https://twitter.com/livepeer) on Twitter
- Jump into our [Discord](https://discord.gg/livepeer)
npm package: @livepeer/react-native
Description: React Native components & hooks for mobile apps built with Livepeer. (deprecated)
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @livepeer/react-native

## Maintenance Status

**This package has been deprecated.**

Please see [react-native-video](https://github.com/react-native-video/react-native-video)
for a full-featured HLS player, or [react-native-webrtc](https://github.com/react-native-webrtc/react-native-webrtc)
for a low-latency WebRTC player.
npm package: @liveperson-design-system/components
Description: The company design system components for LivePerson
Latest version: 0.5.9
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# LivePerson Design System Web Components

This project uses [Stencil](https://stenciljs.com/) to create Web Components.
For more details please check [Stencil Docs](https://stenciljs.com/docs/introduction)

## Installing

You can install LPDS components with NPM or Yarn.

- YARN: `yarn add @liveperson-design-system/components`
- NPM: `npm i @liveperson-design-system/components`

## How to use

### Project with a Framework

First, you have to define custom elements. To do this you can import `defineCustomElements` function from `@liveperson-design-system/components/loader`

```javascript
import { defineCustomElements } from '@liveperson-design-system/components/loader';

defineCustomElements();
```

If you need additional Polyfills use `applyPolyfills` function

```javascript
import { applyPolyfills, defineCustomElements } from '@liveperson-design-system/components/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});
```

### Project without a Framework

If you're using a simple HTML page, you can add your component via a script tag.
For example, if we published a component to npm, we could load the component through the [unpkg](https://unpkg.com/) CDN like this:

```html
<html>
  <head>
    <script src="https://unpkg.com/@liveperson-design-system/components"></script>
  </head>
  <body>
    <lp-button>Button</lp-button>
  </body>
</html>
```

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.
Note that type="module" only works in modern browsers (not available in IE11 or Edge 12-18).

```html
<html>
  <head>
    <script type="module">
      import { defineCustomElements } from 'https://unpkg.com/@liveperson-design-system/components/loader/index.es2017.js';
      defineCustomElements();
    </script>
  </head>
  <body>
    <lp-button>Button</lp-button>
  </body>
</html>
```

## Docs

We use [Storybook](https://storybook.js.org/) to create [LPDS docs and demos](https://livepersoninc.github.io/lp-design-system/?path=/story/components)

## License

MIT © [LivePersonInc](https://github.com/LivePersonInc)
npm package: @liveperson-design-system/icons
Description: The company design system icons for LivePerson
Latest version: 0.4.10
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# LivePerson Design System Icons

This project uses [Lit](https://lit.dev/) to create Web Components.
For more details please check [Lit Docs](https://lit.dev/docs/)

## Installing

You can install LPDS icons with NPM or Yarn.

- NPM: `npm i @liveperson-design-system/icons`
- YARN: `yarn add @liveperson-design-system/icons`

## How to use

### Project with a Framework

To use all LPDS Icons simply import `@liveperson-design-system/icons`

```javascript
import `@liveperson-design-system/icons`;
```

Also you can import specific icons to use it

```javascript
import `@liveperson-design-system/icons/dist/add-target`;
```

### Project without a Framework

If you're using a simple HTML page, you can add your component via a script tag.
For example, if we published a component to npm, we could load the component through the [unpkg](https://unpkg.com/) CDN like this:

```html
<html>
  <head>
    <script src="https://unpkg.com/@liveperson-design-system/icons"></script>
    <!-- or -->
    <script src="https://unpkg.com/@liveperson-design-system/icons/dist/add-target"></script>
  </head>
  <body>
    <lp-add-target-icon />
  </body>
</html>
```

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.
Note that type="module" only works in modern browsers (not available in IE11 or Edge 12-18).

```html
<html>
  <head>
    <script type="module">
      import 'https://unpkg.com/@liveperson-design-system/icons';
      // or
      import 'https://unpkg.com/@liveperson-design-system/icons/dist/add-target';
    </script>
  </head>
  <body>
    <lp-add-target-icon />
  </body>
</html>
```

## Docs

We use [Storybook](https://storybook.js.org/) to create [LPDS docs and demos](https://livepersoninc.github.io/lp-design-system/?path=/story/icons)

## License

MIT © [LivePersonInc](https://github.com/LivePersonInc)
npm package: @liveperson-design-system/tokens
Description: The company design system tokens for LivePerson
Latest version: 0.8.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# LivePerson Design System Tokens

Checkout the [demos](https://livepersoninc.github.io/lp-design-system/?path=/story/tokens)

## Installing

You can install LPDS tokens with NPM or Yarn.

- NPM: `npm i @liveperson-design-system/tokens`
- YARN: `yarn add @liveperson-design-system/tokens`

## How to use

LPDS Tokens provides a few options how you can use it.
Also, each module contains variables and some of them can has functions and mixins

### SCSS

```scss
@use '~@liveperson-design-system/tokens/scss/colors';

.button {
  background-color: colors.$blue;
}
```

### JS

```js
import styled from 'styled-components';

import { variables } from '@liveperson-design-system/tokens/js/colors';

const Button = styled.button`
  background-color: ${variables.blue.default};
`;
```

Some mixins can handle content. For example, Responsive module have `media` mixin and it works like this

```js
import styled from 'styled-components';

import { mixins } from '@liveperson-design-system/tokens/js/responsive';

const Button = styled.button`
  ${mixins.media('laptop')(`
    display: none;
  `)}
`;
```

### CSS

`{tokens}.css` includes CSS variables, helpers classes and others related things.
To use all of these, you have to add CSS file to the `head` tag

```html
<link rel="stylesheet" href="https://unpkg.com/@liveperson-design-system/tokens/css/colors.css">
```

#### CSS variables

To use CSS variables just add `lpds-{tokens}` class to the container. In most cases this is `body` tag.

```html
<body class="lpds-colors">
  <button>Button</button>
</body>

<style>
  button {
    background-color: var(--lpds-colors-blue);
  }
</style>
```

#### CSS helpers classes

Each module provides its own list of helpers classes

## License

MIT © [LivePersonInc](https://github.com/LivePersonInc)
npm package: @liveport/mcp
Description: MCP server for LivePort — expose localhost ports to AI agents with one tool call
Author: LivePort
Latest version: 0.1.0

# @liveport/mcp

MCP server for [LivePort](https://liveport.dev) — expose localhost ports to AI agents with one tool call.

Secure, authenticated tunnels that agents can create, inspect, and tear down entirely from within a Claude Code session. No terminal. No config. Just a tool call.

## Install

```bash
npx @liveport/mcp
```

Or globally:

```bash
npm install -g @liveport/mcp
```

## Setup

### 1. Get a bridge key

Sign in at [liveport.dev/dashboard](https://liveport.dev/dashboard) → **Keys** → **Create Key**.

### 2. Add to Claude Desktop

Add to your `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "liveport": {
      "command": "npx",
      "args": ["-y", "@liveport/mcp"],
      "env": {
        "LIVEPORT_BRIDGE_KEY": "lpk_your_key_here"
      }
    }
  }
}
```

**Config file location:**
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`

### 3. Restart Claude Desktop

The LivePort tools will appear automatically.

## Tools

### `liveport_connect`

Create a tunnel from a local port to a public URL.

```
liveport_connect(port: number, timeout?: number)
```

Returns the public HTTPS URL. Reuses existing tunnel if already active for that port.

### `liveport_list_tunnels`

List all active tunnels for the current bridge key, including tunnels from other sessions.

```
liveport_list_tunnels()
```

### `liveport_get_tunnel_url`

Get the public URL for a tunnel by local port number.

```
liveport_get_tunnel_url(port: number)
```

### `liveport_disconnect`

Disconnect a tunnel when done.

```
liveport_disconnect(port?: number, tunnelId?: string)
```

### `liveport_status`

Show active tunnels in the current session and bridge key status.

```
liveport_status()
```

## Example agent workflow

```
User: "Start a tunnel to my dev server on port 3000"

Agent uses liveport_connect(3000)
→ ✅ Tunnel created!
→ 🔗 Port 3000 → https://abc123.tunnel.liveport.online
→ Public URL: https://abc123.tunnel.liveport.online

User: "Send this URL to the webhook tester"
Agent: "Done — the webhook is at https://abc123.tunnel.liveport.online/webhook"

User: "OK done, close the tunnel"
Agent uses liveport_disconnect(3000)
→ ✅ Disconnected tunnel for port 3000.
```

## Environment variables

| Variable | Required | Description |
|----------|----------|-------------|
| `LIVEPORT_BRIDGE_KEY` | Yes | Bridge key from liveport.dev/dashboard |

## Security

Bridge keys are scoped to your account. Create short-lived keys for CI, long-lived keys for your local setup. Rotate from the dashboard at any time.

Never-expiring keys show a warning in the dashboard. Treat them like passwords.

## Links

- [Dashboard](https://liveport.dev/dashboard)
- [Docs](https://liveport.dev/docs)
- [npm](https://npmjs.com/package/@liveport/mcp)
- [GitHub](https://github.com/dundas/liveport)