open-index/open-npm huggingface dataset:
npm package: @replay-build/mcp-server
Description: MCP server for Replay.build — generate React UI from video recordings via AI agents
Latest version: 1.0.0

# @replay-build/mcp-server

MCP server for [Replay.build](https://replay.build) — generate production-ready React UI from video recordings via AI agents.

## Tools

| Tool | Description | Credits |
|------|-------------|---------|
| `replay_generate` | Video URL → React + Tailwind code | 150 |
| `replay_scan` | Video URL → UI structure JSON (pages, colors, navigation) | 50 |
| `replay_validate` | Code + Design System → validation errors | 5 |

## Setup

### 1. Get an API key

Go to [replay.build/settings?tab=api-keys](https://replay.build/settings?tab=api-keys) and create a key.

### 2. Claude Code / Claude Desktop

Add to your MCP config (`~/.claude/settings.json` or `claude_desktop_config.json`):

```json
{
  "mcpServers": {
    "replay": {
      "command": "npx",
      "args": ["@replay-build/mcp-server"],
      "env": {
        "REPLAY_API_KEY": "rk_live_your_key_here"
      }
    }
  }
}
```

### 3. Cursor

Add to `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "replay": {
      "command": "npx",
      "args": ["@replay-build/mcp-server"],
      "env": {
        "REPLAY_API_KEY": "rk_live_your_key_here"
      }
    }
  }
}
```

## Usage

Once configured, your AI agent can call:

```
replay_generate({ video_url: "https://example.com/recording.mp4" })
→ Returns complete React + Tailwind HTML code

replay_scan({ video_url: "https://example.com/recording.mp4" })
→ Returns { pages: [...], ui: { colors, typography, navigation } }

replay_validate({ code: "<html>...", design_system_id: "uuid" })
→ Returns { valid: false, errors: [...] }
```

## REST API

The MCP server wraps the Replay REST API. You can also call it directly:

```bash
# Generate code from video
curl -X POST https://replay.build/api/v1/generate \
  -H "Authorization: Bearer rk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"video_url": "https://example.com/recording.mp4"}'

# Scan video for UI structure
curl -X POST https://replay.build/api/v1/scan \
  -H "Authorization: Bearer rk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"video_url": "https://example.com/recording.mp4"}'

# Validate code against design system
curl -X POST https://replay.build/api/v1/validate \
  -H "Authorization: Bearer rk_live_..." \
  -H "Content-Type: application/json" \
  -d '{"code": "<html>...", "design_system_id": "uuid"}'
```

## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `REPLAY_API_KEY` | Yes | API key from replay.build/settings |
| `REPLAY_API_URL` | No | Custom API URL (default: https://replay.build) |

## License

MIT
npm package: @replayio/overboard
Description: The offical design system for the fictitious Replay Overboard store.
Author: Travis Arnold
Latest version: 0.4.1

# Overboard Design System

The offical design system for the fictitious Replay Overboard store.

## Install

```bash
npm install @replay/overboard
```

## Usage

Import the overboard CSS file:

```css
@import url("@replayio/overboard/index.css");
```

Now you can use components like `Hoverboard` wherever you want:

```tsx
import { Hoverboard } from "@replay/overboard";

export default function App() {
  return <Hoverboard color="blue" rotate={90} />;
}
```
npm package: @repldex/api
Description: Repldex is the unofficial community-editable encyclopedia of user created entries for the [Replit Discord Server](https://replit.com/discord).
Author: Repldex
Latest version: 0.1.0

[![Run on Replit](https://replit.com/badge/github/repldex/repldex-npm)](https://replit/com/github/repldex/repldex-npm)

# ⚠️ Coming Soon! ⚠️

### Repldex
Repldex is the unofficial community-editable encyclopedia of user created entries for the [Replit Discord Server](https://replit.com/discord). This repository contains the entire source code for the nodeJS API wrapper.

# Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md)
npm package: @repledev/rinku_native_addons
Description: Native addons for the project: Rinku
Author: RepleDEV
Latest version: 2.2.2

## Rinku native addons

Native addons for the project: [Rinku](https://github.com/RepleDEV/rinku).

## Supported platforms

- Windows

## Building

```bash
$ npm run build
```
npm package: @repledev/rinku_winswitcher
Description: Window Switcher for Rinku
Author: RepleDEV
Latest version: 1.0.15

## WinSwitcher
This module's current purpose is to store the current active window's data,  
and to be able to re-focus that window later on.  
  
May expand to an actually useful module.

This is a module for the project: [Rinku](https://github.com/repledev/rinku).

## Platforms
Currently supported platforms:
- Windows

**Will log an error if the platform is unsupported!**

## Setup

Install [node-gyp](https://github.com/nodejs/node-gyp) [here](https://github.com/nodejs/node-gyp/blob/master/README.md#Installation).

Then, run:
```bash
$ npm install
```

### Compiling
```bash
$ npm run build
```
npm package: @repletory/icon
Description: Reusable Icon component for Repletory
Author: Stanley Masuku
Latest version: 1.0.4

  @repletory/icon Documentation body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1, h2, h3 { color: #0070f3; } pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; overflow: auto; } code { background-color: #f9f9f9; padding: 2px 5px; border-radius: 3px; font-family: monospace; } ul { margin-left: 20px; }

@repletory/icon
===============

**@repletory/icon** is a reusable React component that dynamically renders SVG icons from the `@repletory/svg` library. It allows customization of size, color, variant, and shadow for icons.

Installation
------------

npm install @repletory/icon @repletory/svg
# or
yarn add @repletory/icon @repletory/svg
  

Features
--------

*   Dynamically renders SVGs from `@repletory/svg`.
*   Supports multiple sizes (`xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`).
*   Customize icon colors.
*   Built-in shadow options with `shadow`, `shadowSm`, and `shadowLg`.

Usage
-----

To use the `Icon` component, first import the desired SVGs from `@repletory/svg` and pass them to the `Icon` component.

import React from 'react';
import { heart, alarm } from '@repletory/svg';
import Icon from '@repletory/icon';

const Example = () => (
  

);

export default Example;
  

Props
-----

Prop

Type

Default

Description

`name`

`keyof typeof Icons`

Required

The name of the icon imported from `@repletory/svg`.

`variant`

`'bold' | 'duotone' | 'fill' | 'light' | 'regular' | 'thin'`

`'regular'`

The style variant of the icon.

`size`

`'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string`

`'md'`

The size of the icon. Can be predefined or custom.

`color`

`string`

`'black'`

The color of the icon. Accepts any valid CSS color value.

`shadow`

`boolean`

`false`

Applies a default shadow to the icon.

`shadowSm`

`boolean`

`false`

Applies a small shadow to the icon.

`shadowLg`

`boolean`

`false`

Applies a large shadow to the icon.

Shadow Behavior
---------------

Only one shadow can be applied at a time. The priority order is: **shadowLg > shadowSm > shadow**.

If multiple shadow props are set to `true`, the higher priority shadow will be applied.

Examples
--------

License
-------

This library is licensed under [MIT](./LICENSE). Contributions are welcome!
npm package: @repletory/svg
Description: SVG library for Repletory icons
Author: Stanley Masuku
Latest version: 1.0.1

  @repletory/icon Documentation body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1, h2, h3 { color: #0070f3; } pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; overflow: auto; } code { background-color: #f9f9f9; padding: 2px 5px; border-radius: 3px; font-family: monospace; } ul { margin-left: 20px; }

@repletory/icon
===============

**@repletory/icon** is a reusable React component that dynamically renders SVG icons from the `@repletory/svg` library. It allows customization of size, color, variant, and shadow for icons.

Installation
------------

npm install @repletory/icon @repletory/svg
# or
yarn add @repletory/icon @repletory/svg
  

Features
--------

*   Dynamically renders SVGs from `@repletory/svg`.
*   Supports multiple sizes (`xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`).
*   Customize icon colors.
*   Built-in shadow options.

Usage
-----

To use the `Icon` component, first import the desired SVGs from `@repletory/svg` and pass them to the `Icon` component.

import React from 'react';
import { heart, alarm } from '@repletory/svg';
import Icon from '@repletory/icon';

const Example = () => (
  

);

export default Example;
  

Props
-----

Prop

Type

Default

Description

`name`

`keyof typeof Icons`

Required

The name of the icon imported from `@repletory/svg`.

`variant`

`'bold' | 'duotone' | 'fill' | 'light' | 'regular' | 'thin'`

`'regular'`

The style variant of the icon.

`size`

`'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string`

`'md'`

The size of the icon. Can be predefined or custom.

`color`

`string`

`'black'`

The color of the icon. Accepts any valid CSS color value.

`shadow`

`boolean | 'sm' | 'lg'`

`false`

Adds a shadow effect to the icon.

License
-------

This library is licensed under [MIT](./LICENSE). Contributions are welcome!