open-index/open-npm huggingface dataset:
npm package: @lg-mcp/embeddable-uis
Description: lg-mcp Embeddable UI Components
Latest version: 0.1.0

# Embeddable UIs

![npm (scoped)](https://img.shields.io/npm/v/@lg-mcp/embeddable-uis.svg)

## Installation

### PNPM

```shell
pnpm add @lg-mcp/embeddable-uis
```

### Yarn

```shell
yarn add @lg-mcp/embeddable-uis
```

### NPM

```shell
npm install @lg-mcp/embeddable-uis
```

## Overview

`@lg-mcp/embeddable-uis` provides embeddable UI components for MCP (Model Context Protocol) integrations. These components are designed to be rendered within MCP clients and provide consistent, styled interfaces for displaying MongoDB data.

## Components

### ListDatabases

Displays a table of databases with their names and sizes. The component automatically formats byte sizes to human-readable units (Bytes, KB, MB, GB, TB).

#### Example

```tsx
import { ListDatabases } from '@lg-mcp/embeddable-uis';

const databases = [
  { name: 'admin', size: 40960 },
  { name: 'local', size: 81920 },
  { name: 'sample_mflix', size: 104857600 },
];

<ListDatabases databases={databases} darkMode={false} />;
```

#### Properties

| Prop        | Type              | Description                                        | Default |
| ----------- | ----------------- | -------------------------------------------------- | ------- |
| `databases` | `Array<Database>` | Array of database objects to display in the table. | -       |
| `darkMode`  | `boolean`         | Determines if the component renders in dark mode.  | -       |

#### Database Type

| Property | Type     | Description                        |
| -------- | -------- | ---------------------------------- |
| `name`   | `string` | The name of the database.          |
| `size`   | `number` | The size of the database in bytes. |
npm package: @lg-mcp/ui-resource-renderer
Description: lg-mcp UI Resource Renderer
Latest version: 0.2.0

# UI Resource Renderer

![npm (scoped)](https://img.shields.io/npm/v/@lg-mcp/ui-resource-renderer.svg)

## Installation

### PNPM

```shell
pnpm add @lg-mcp/ui-resource-renderer
```

### Yarn

```shell
yarn add @lg-mcp/ui-resource-renderer
```

### NPM

```shell
npm install @lg-mcp/ui-resource-renderer
```

## Overview

`@lg-mcp/ui-resource-renderer` provides a React component for rendering MCP (Model Context Protocol) UI resources. This component wraps `@mcp-ui/client`'s `UIResourceRenderer` with LeafyGreen-specific defaults, including automatic iframe resizing.

## Components

### UIResourceRenderer

Renders an MCP UI resource within an iframe.

#### Example

```tsx
import { UIResourceRenderer } from '@lg-mcp/ui-resource-renderer';

function MyComponent() {
  const resource = {
    uri: 'https://example.com/ui-resource',
    mimeType: 'text/html',
    // ... other resource properties
  };

  return (
    <UIResourceRenderer
      resource={resource}
      iframeRenderData={{
        darkMode: false,
        databases: ['db1', 'db2'],
      }}
      onActionResult={result => {
        console.log('Action result:', result);
      }}
    />
  );
}
```

#### Properties

| Prop               | Type                               | Description                                                                                                  | Default     |
| ------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------- |
| `resource`         | `UIResource`                       | The MCP UI resource to render. Required.                                                                     | -           |
| `iframeRenderData` | `Record<string, unknown>`          | Data to pass to the iframe via renderData. Use this for any data needed in the iframe, including `darkMode`. | `undefined` |
| `onActionResult`   | `(result: UIActionResult) => void` | Callback invoked when the embedded UI performs an action.                                                    | -           |
| `htmlProps`        | `object`                           | Additional props to pass to the underlying HTML iframe element.                                              | `{}`        |

#### Types

##### UIResourceRendererProps

The props interface for `UIResourceRenderer`. Extends the base `UIResourceRenderer` props from `@mcp-ui/client` with LeafyGreen-specific defaults.

##### UIActionResult

The result type returned when the embedded UI performs an action. Re-exported from `@mcp-ui/client`.

#### Utilities

##### isUIResource

A utility function to check if a value is a valid UI resource. Re-exported from `@mcp-ui/client`.

```tsx
import { isUIResource } from '@lg-mcp/ui-resource-renderer';

if (isUIResource(someValue)) {
  // someValue is a valid UI resource
}
```
npm package: @lg-tools/build
Description: Build config for LeafyGreen repositories
Latest version: 0.9.0

# `lg-tools/build`

Shared build config & scripts for LeafyGreen repositories

## Building all packages

We rely on `turbo` to handle all package builds. Run `turbo run <scripts>` to build packages in a monorepo.

### Building individual packages

Turbo requires a script to be defined on each package that is run for each job defined in turbo. We provide 3 such scripts to easily drop into each package.

For each package you want turbo to build, add the following scripts to package.json:

```json
  "scripts": {
    "build": "lg-build bundle",
    "tsc": "lg-build tsc",
    "docs": "lg-build docs"
  }
```

### Internal build script

The `lg` command is defined in `@lg-tools/cli`. In order to build a package that `cli` depends on, we won't be able to use the `lg` command.
To get around this, `@lg-tools/build` defines an internal command to be used in this special case.

For a package that cli depends on, define the following scripts in its `package.json`:

```json
  "scripts": {
    "build": "lg-build bundle",
    "tsc": "lg-build tsc"
  }
```
npm package: @lg-tools/cli
Description: Command Line tools for LeafyGreen
Latest version: 0.12.2

# @lg-tools/cli

Defines a command line interface for LeafyGreen.

## Installation

### Global

```bash
yarn global add @lg-tools/cli
```

### Local

```bash
yarn add --dev @lg-tools/cli
```

## Usage

```
> lg <subcommand>
```

This CLI provides tools both for LeafyGreen developers, and consumers of our libraries.

Some subcommands we offer are `install`, `update`, `test`, `lint`, `link` and more.

Run `--help` for an up-to-date list of commands:

```
> lg --help
> lg <subcommand> --help
```
npm package: @lg-tools/crawler
Description: Crawler for MongoDB documentation and other sites
Latest version: 0.0.2

# LeafyGreen Crawler Tool

A CLI tool for crawling and analyzing website content for LeafyGreen AI.

## Overview

This tool crawls websites and stores the content in MongoDB collections for use with LeafyGreen AI systems. The crawler can process either specific URLs or use pre-configured website sources.

## Prerequisites

- Node.js (v16 or higher)
- Yarn package manager
- MongoDB Atlas account with connection details
- Environment variables properly configured

## Installation

```bash
# From the root of the leafygreen-ui-private repository
cd tools/crawler
yarn install
```

## Configuration

Create a `.env` file in the `tools/crawler` directory with the following variables:

```
MONGODB_USER=your_mongodb_user
MONGODB_PASSWORD=your_mongodb_password
MONGODB_PROJECT_URL=your_project_url
MONGODB_APP_NAME=your_app_name
```

### Default Sources

The crawler comes with pre-configured sources in `src/constants.ts`:

- MongoDB Design (https://mongodb.design)
- React Documentation (https://react.dev)
- MDN Web Docs (https://developer.mozilla.org)

To add or modify sources, edit the `SOURCES` array in `src/constants.ts`.

## Usage

### Building the Tool

```bash
yarn build
```

### Basic Usage

```bash
# Use the built version
yarn lg-crawler

# Or use the development version
yarn crawl
```

### Command Line Options

- `-v, --verbose`: Enable verbose output
- `-d, --depth <number>`: Set maximum crawl depth (default: 3)
- `--url <url>`: Specify a single URL to crawl
- `--dry-run`: Run crawler without inserting documents into MongoDB

### Examples

```bash
# Crawl all pre-configured sources with verbose output
yarn crawl --verbose

# Crawl a specific URL with a depth of 2
yarn crawl --url https://example.com --depth 2

# Test crawling without saving to MongoDB
yarn crawl --dry-run --verbose
```

## Development

### Project Structure

- `src/index.ts`: Main entry point and command-line interface
- `src/crawler.ts`: Core crawler implementation
- `src/constants.ts`: Configuration constants and source definitions
- `src/utils/`: Helper utilities for crawling and data processing

### Adding New Features

1. Make your code changes
2. Build the project: `yarn build`
3. Test your changes: `yarn crawl --dry-run --verbose`

### Running Tests

```bash
yarn test
```

## Troubleshooting

- **MongoDB Connection Issues**: Verify your `.env` file has the correct credentials
- **Crawling Errors**: Use the `--verbose` flag to get detailed logs
- **Rate Limiting**: Some websites may block the crawler if too many requests are made

## License

Apache-2.0
npm package: @lg-tools/create
Description: Creates a new LeafyGreen packages
Latest version: 0.6.0

# `@lg-tools/create`

Creates a new LeafyGreen package

## Usage

Use from `@lg-tools/cli`:

```zsh
lg create <package-name>
```

## Initial Publish Required

After creating a new package, **you must manually publish the first version** before the automated release workflow can take over.
See [DEVELOPER.md](../../DEVELOPER.md#publishing-a-new-package) for detailed instructions.

## Options

### Scope

`-s`, `--scope`

The npm scope of the new package. Valid scopes are defined in the `package.json` `"lg.scopes"` property.

Defaults to the first entry in `lg.scopes`.

The directory is determined by the mapping defined in `lg.scopes`

```bash
# Create a new package in the @lg-charts scope
lg create my-package --scope @lg-charts
```

### Directory

`-d`, `--directory`

The directory to write the new package. Defaults to mapped directory of `--scope`.

```bash
# Create a new package in ./components
lg create my-package --directory './components'
```

### Parent

`-p`, `--parent`

Identifies the parent component of the new component. Creates a sub-component to the provided parent.

```bash
# Creates a new subcomponent of '@lg-charts/core'
lg create my-package --parent '@lg-charts/core'
```

### Dry

`-d`, `--dry`

Run without making any changes to the filesystem (default: `false`)

### Verbose

`-v`, `--verbose`

Prints additional information to the console (default: `false`)
npm package: @lg-tools/eslint-plugin
Description: ESLint Rules for LeafyGreen
Latest version: 0.2.0

# eslint-plugin-leafygreen

Lint Rules for LeafyGreen UI

## Installation

You'll first need to install [ESLint](https://eslint.org/):

```sh
pnpm install -D eslint
```

Next, install `@lg-tools/eslint-plugin`:

```sh
pnpm install -D @lg-tools/eslint-plugin
```

## Usage

Add `@lg-tools` to the plugins section of your `.eslintrc` configuration file. (You can omit the `/eslint-plugin` suffix):

```json
{
  "plugins": ["@lg-tools"],
  "extends": ["plugin:@lg-tools/internal"]
}
```

Optionally configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "@lg-tools/some-rule": ["warn"]
  }
}
```

## Rules

<!--
  Auto-generate this section with
  `pnpm --filter="@lg-tools/eslint-plugin" run docs`
-->
<!-- begin auto-generated rules list -->

💼 Configurations enabled in.\
🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).

| Name                                                     | Description                                        | 💼                  | 🔧  |
| :------------------------------------------------------- | :------------------------------------------------- | :------------------ | :-- |
| [no-indirect-imports](docs/rules/no-indirect-imports.md) | Forbid indirect imports from `src/` or `packages/` | ![badge-internal][] | 🔧  |

<!-- end auto-generated rules list -->

## Contributing

To create a new rule:

### 1. Run the `create-rule` script

```sh
pnpm --filter @lg-tools/eslint-plugin run create-rule <rule-name>
```

This will create a new file in `src/rules`, and a test file in `src/tests`

### 2. Add AST Listeners

Inside your new `src/rules/<my-rule>.ts` file, add the appropriate metadata, and write AST listeners.

The return object of a rule's `create` method should return at least one AST listener.

These work similar to CSS selectors, and run a function when the ESLint static analyzer hits a specific AST node.

See [ESLint Docs](https://eslint.org/docs/latest/extend/custom-rules) for more details.

```ts
export const exampleRule = createRule({
  // ...
  create: context => {
    return {
      VariableDeclaration: node => {
        // Executes on any variable declaration
        // e.g. const myVar = 5;
      },
    };
  },
});
```

## 3. Add tests

Inside the new `src/test/<my-rule>.spec.ts` file, add valid and invalid test cases.

See [ESLint RuleTester docs](https://eslint.org/docs/latest/integrate/nodejs-api#ruletester) for more details.

### Useful Resources

- [ESLint Docs](https://eslint.org/docs/latest/extend/custom-rules)
- [ESLint RuleTester](https://eslint.org/docs/latest/integrate/nodejs-api#ruletester)
- [ESTree Spec](https://github.com/estree/estree/blob/master/README.md)
- [JSX Spec](https://github.com/facebook/jsx/blob/main/README.md)
- [TSESLint Listener Definitions](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/utils/src/ts-eslint/Rule.ts#L293)
npm package: @lg-tools/install
Description: LeafyGreen UI Kit Install
Latest version: 0.4.2

# `@lg-tools/install`

Install LeafyGreen packages

## Usage

Use from `@lg-tools/cli`.

Install all `@leafygreen-ui` packages

```bash
> lg install
```

Install select packages by listing them:

```bash
> lg install lib palette
```

### Installation Options

You can also use flags to install specific subsets of packages:

#### Essential Packages

Install only the essential packages
(Essential packages includes only `@leafygreen-ui/leafygreen-provider`, `@leafygreen-ui/emotion`, and `@leafygreen-ui/lib`)

```bash
> lg install --essentials
```

#### Basic Packages

Install basic components. Includes essentials plus commonly used components. (See [`./src/getPackagesToInstall.ts`](./src/getPackagesToInstall.ts) for the latest list of "basic" packages)

```bash
> lg install --basic
```

#### Scope-based Installation

Install only packages from specific scopes:

```bash
> lg install --core    # Only installs @leafygreen-ui/* packages
> lg install --charts  # Only installs @lg-charts/* packages
> lg install --chat    # Only installs @lg-chat/* packages
```

Flags can be combined to install multiple scopes:

```bash
> lg install --core --charts  # Install both UI and chart packages
```

```bash
> lg install --basic --chat # Install the basic packages and all chat packages
```

#### Other Options

```bash
> lg install --dry      # Dry run - shows what would be installed without making changes
> lg install --verbose  # Shows detailed information during installation
```
npm package: @lg-tools/link
Description: Tools for linking LeafyGreen packages
Latest version: 0.3.1

# `@lg-tools/link`

Link and Unlink packages to a consuming repository

## Usage

Use from `@lg-tools/cli`.

### Link

Run `link` from the leafygreen repository to link packages to a consuming app.

```bash
> lg link ../path/to/app
```

### Unlink

Run `unlink` from the leafygreen repository to remove link packages from a consuming app.

```bash
> lg unlink ../path/to/app
```
npm package: @lg-tools/lint
Description: Lint rules & config for LeafyGreen repositories
Latest version: 3.1.1

# `@lg-tools/lint`

Shared Lint config & tooling for LeafyGreen

## Usage

Use from `@lg-tools/cli`.

```bash
> lg lint
```

### `fix` flag

Fix fixable ESlint or Prettier issues

```bash
> lg lint --fix
```
npm package: @lg-tools/migrator
Description: Migrator for LeafyGreen UI, think of a better description
Latest version: 0.0.2-beta.0

# Migrator

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/migrator.svg)

## Installation

### Yarn

```shell
yarn add @lg-tools/migrator
```

### NPM

```shell
npm install @lg-tools/migrator
```

## Usage

```jsx
yarn lg migrator <migration> <path> [...options]
```

### Arguments

#### `migration`

name of migration, see available migrations below.

<hr>

#### `path`

files or directory to transform

<hr>

### Options

#### `--i or --ignore`

Glob patterns to ignore

```jsx
yarn lg migrator <migration> <path> --ignore **/node_modules/** **/.next/**
```

#### `--d or --dry`

Dry run (no changes to files are made)

```jsx
yarn lg migrator <migration> <path> --dry
```

#### `--p or --print`

Print transformed files to stdout and changes are also made to files

```jsx
yarn lg migrator <migration> <path> --print
```

#### `--f or --force`

Bypass Git safety checks and forcibly run codemods.

```jsx
yarn lg migrator <migration> <path> --force
```

## Migrations

**_NOTE:_ These migrations are for testing purposes only**

### `consolidate-props`

This codemod consolidates two props into one.

```jsx
yarn lg migrator consolidate-props <path>
```

E.g.
In this example, the `disabled` props is merged into the `state` prop.

**Before**:

```jsx
<MyComponent disabled={true} state="valid" />
```

**After**:

```jsx
<MyComponent state="disabled" />
```

<hr>

### `rename-component-prop`

This codemod renames a component prop

```jsx
yarn lg migrator rename-component-prop <path>
```

E.g.
In this example, `prop` is renamed to `newProp`.

**Before**:

```jsx
<MyComponent prop="hey" />
```

**After**:

```jsx
<MyComponent newProp="hey" />
```

<hr>

### `update-component-prop-value`

This codemod updates a prop value

```jsx
yarn lg migrator update-component-prop-value <path>
```

E.g.
In this example, `value` is updated to `new prop value`.

**Before**:

```jsx
<MyComponent prop="value" />
```

**After**:

```jsx
<MyComponent prop="new prop value" />
```
npm package: @lg-tools/prompt-kit
Description: Prompts for personalizing LLM usage
Latest version: 0.3.3

# `@lg-tools/prompt-kit`

Shared prompts for LeafyGreen repositories.

## Usage

It's recommended to use `@lg-tools/prompt-kit` in tandem with `@lg-tools/cli`. The `lg merge-prompts-vscode` script will automatically merge the shared prompts into `.vscode/settings.json`.

### Options

To see all options for this command, run:

```bash
> lg merge-prompts-vscode --help
```

### Steps:

1. Ensure both `@lg-tools/prompt-kit` and `@lg-tools/cli` are installed.
2. Run the following command:
   ```bash
   > lg merge-prompts-vscode
   ```
3. Open your VS Code settings to verify that the prompts have been successfully added.
npm package: @lg-tools/storybook
Description: Storybook config for LeafyGreen
Latest version: 0.4.1
Deprecated: Use `@lg-tools/storybook-addon` instead

# `@lg-tools/storybook`

Storybook addon to share configuration in LeafyGreen repositories.

## Usage

Install this package, and consume it in your `.storybook/` config files.

```ts
// .storybook/main.ts
export default {
  addons: ['@lg-tools/storybook'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      fastRefresh: true,
      strictMode: true,
    },
  },
};
```

Most parameters `preview.ts` will be automatically populated by the addon. However you may want to customize certain things like section ordering:

```js
// .storybook/preview.js
const parameters = {
  options: {
    storySort: {
      method: 'alphabetical',
      order: [
        // ... section headers
      ],
    },
  },
};

export default {
  parameters,
};
```
npm package: @lg-tools/storybook-addon
Description: Storybook Addon for LeafyGreen UI Kit
Latest version: 0.6.6

# `@lg-tools/storybook-addon`

Storybook addon to share configuration in LeafyGreen repositories.

## Usage

Install this package, and consume it in your `.storybook/` config files.

```ts
// .storybook/main.ts
export default {
  addons: ['@lg-tools/storybook-addon'],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      fastRefresh: true,
      strictMode: true,
    },
  },
};
```

Most parameters `preview.ts` will be automatically populated by the addon. However you may want to customize certain things like section ordering:

```js
// .storybook/preview.js
const parameters = {
  options: {
    storySort: {
      method: 'alphabetical',
      order: [
        // ... section headers
      ],
    },
  },
};

export default {
  parameters,
};
```
npm package: @lg-tools/storybook-utils
Description: Storybook Utilities for LeafyGreen UI
Latest version: 0.3.4

# Storybook Utils

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/storybook-utils.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/storybook-utils/live-example/)

## Installation

### Yarn

```shell
yarn add @lg-tools/storybook-utils
```

### NPM

```shell
npm install @lg-tools/storybook-utils
```

## Usage

`@lg-tools/storybook-utils` provides several utilities & types to help write Storybook files
npm package: @lg-tools/test
Description: Jest setup & config for LeafyGreen repositories
Latest version: 0.5.1

# `@lg-tools/test`

Shared test config & scripts for LeafyGreen repositories.

## Usage

It's best not to use this as a standalone package, but use it as part of `@lg-tools/cli` instead.

To run tests using the shared config, use the `lg` cli:

```bash
> lg test
```

### Options

To see all options for this command run:

```bash
> lg test --help
```

### Extending & overriding the shared config

To extend/override the shared config (located in `@lg-tools/test/config`), create a `jest.config.js` file at the root of the repository, and extend the default config with the code below:

```js
// ./jest.config.js
const jestConfig = require('@lg-tools/test/config/js.config.js');

module.exports = {
  ...jestConfig,
  // extend your jest config here
};
```

You can also pass a `--config` option to the test command:

```bash
> lg test --config ./path/to/config
```

### Testing in React 17

In CI we test our components using React 17.

To do this manually, first run the [init script](./scripts/install-react17.ts) in order to install the specific testing dependencies needed for React 17. (`yarn init17` from the repo root)

```bash
> yarn init17
```

Next, run your tests with the `--react17` flag. This ensures that the tests are run with specific Jest config for React 17.

```bash
> yarn test --react17
```

To go back to the default version of React you'll need to clear your packages and re-build:

```
> yarn clean:modules && yarn run init
```
npm package: @lg-tools/update
Description: Updates all LeafyGreen UI packages to the latest version
Latest version: 0.1.20

# @lg-tools/update

Update tools for LeafyGreen

## Usage

Updates all installed LeafyGreen packages.

```
> lg update
```

### Options

#### `--scope`

Select the scope of packages to update. Some valid scopes are:

- `@leafygreen-ui`
- `@lg-tools`

#### `--latest`

Uses `yarn upgrade --latest`, and ignores package versions
npm package: @lg-tools/validate
Description: Validation tools for LeafyGreen repositories
Latest version: 0.6.1

# `@lg-tools/validate`

Package validation scripts for LeafyGreen

## Usage

This package is a sub-module of `@lg-tools/cli`.

To validate builds & dependencies, run

```bash
> lg validate
```

### Builds

Validates whether the output of the build command, and that each module type is valid.

To validate builds only:

```bash
> lg validate --buildsOnly
```

### Dependencies

Uses `depcheck` to ensure all dependencies are valid in a package.

To validate dependencies only:

```bash
> lg validate --depsOnly
```