open-index/open-npm huggingface dataset:
npm package: @limbar/api
Description: TypeScript API clients for Limbar endpoints that let you embed Android Emulators and iOS Simulators in your web application.
Author: Limbar
Latest version: 0.6.4

# @limbar/api

Create Android emulators or iOS simulators as if you're calling your own internal functions.

This package contains a fully-typed HTTP client to communicate with Limbar services,
specifically region endpoints and main Limbar API with following features:
* Types are generated from OpenAPI spec and kept up-to-date,
* Minimal dependencies so that it can be used in all JavaScript environments,
* Based on `fetch` for performance and exposing all the `fetch` options in a typed manner,
* [OpenAPI spec](openapi/region.yaml) is published so you can generate your own clients too.

## Get Started

See a full example with frontend and backend in [`examples/simple`](../../examples/simple).

Add the dependency:
```bash
npm install @limbar/api
```

Here is an example API call made to `eu-north1` region using this client.

```ts
import { createRegionClient } from "@limbar/api";

const apiToken = process.env.API_TOKEN;
const organizationId = process.env.ORGANIZATION_ID;
const region = process.env.REGION;

if (!apiToken || !organizationId || !region) {
  console.error("Error: Missing required environment variables (API_TOKEN, ORGANIZATION_ID, REGION).");
  process.exit(1);
}

const regionClient = createRegionClient({
  baseUrl: `https://${region}.limbar.net`,
  token: apiToken,
});
const name = `api-example-${Math.random().toString(36).substring(2, 9)}`;
const result = await regionClient.putAndroidInstance(organizationId, {
  instance: {
    metadata: { name }
  },
  wait: true
});

if (result.status !== 200) {
    console.error(`API Error (${result.status}): ${result.data.message}`);
    process.exit(1)
}
console.log({
    name,
    webrtcUrl: result.data.status.webrtcUrl,
    token: result.data.token,
}, "Success! You can deliver the token and webrtcUrl to RemoteControl component from @limbar/ui in your frontend!");
```

## Region Client

It is used to communicate with a given region, such as `eu-north1`, to manage instances and their tokens as shown above.

It's effectively a wrapper around code generated from [Limbar OpenAPI](./openapi/region.yaml).
See the code in [index.ts](./src/region/index.ts).

## Instance Client

It is used to communicate directly with an instance in server environment, regardless of whether it's
Android emulator or iOS simulator. For example, you can request a screenshot of a running instance at any time.

It's based on standard WebSocket messages.
See the code in [index.ts](./src/instance/index.ts).
npm package: @limbar/ui
Description: React UI components written in TypeScript for embedding Limbar products such as remote control of Android emulators and iOS simulators in web applications.
Author: Limbar
Latest version: 0.7.2

# @limbar/ui

This package contains all the UI components that you can use to serve
Android emulators and iOS simulators from [Limbar](https://limbar.io)
to your users over WebRTC, such as `RemoteControl` which is a React
component written in TypeScript.

## Get Started

For full example with both backend and frontend, see
[`examples/simple`](../../examples/simple)

Add the dependency to your frontend package.
```bash
npm install @limbar/ui
```

### Styling

The components come with their own CSS styles and **do not require Tailwind CSS** or any other CSS framework. The styles are self-contained and included automatically when you import the components.

You can customize the appearance by:
- Using CSS custom properties (CSS variables) for theming
- Adding custom CSS classes via the `className` prop
- Overriding the default styles with your own CSS

```css
/* Example: Customize spinner color */
:root {
  --rc-spinner-color: #your-brand-color;
  --rc-muted-foreground: #your-text-color;
}
```

It's recommended that you trigger creation over a backend endpoint of
yours that will call Limbar with an organization token. Making the
call from browser to Limbar directly risks leaking your organization token.

Here is an example:

```tsx
import { RemoteControl } from '@limbar/ui';

function MyRemoteControl() {
  return (
    <RemoteControl 
      url="https://your-webrtc-url" 
      token="your-auth-token"
    />
  );
}
```

To get the WebRTC URL and token, you can add an endpoint to your backend
that calls [Limbar](https://limbar.io) using our type-safe client package
[`@limbar/api`](../api) or you can make the HTTP calls directly according to our
[API Reference](https://limbar.io/docs/api-reference).

## Components

### RemoteControl

The `RemoteControl` component allows you to stream the screen of an Android emulator to your application as well as control it
with your mouse and keyboard.

Some of the features include:

* Multiple users can connect to the same instance simultaneously which is super useful for
  demos and presentations.
  * You can build and deploy your app in a cloud editor that has `lim connect android` running and see your app
    in the browser.
* The component is optimized for low latency and high performance by using WebRTC as the transport layer for both video
  and the control signals.

#### Props

| Prop | Type | Description |
|------|------|-------------|
| `url` | string | The URL of the instance to connect to |
| `token` | string | Token used to authenticate the connection to the instance |
| `className` | string? | Optional class name to apply to the component on top of the default styles |
| `sessionId` | string? | Optional unique identifier for the WebRTC session to prevent conflicts between users connected to the same source. If not provided, a random one will be generated |
| `openUrl` | string? | Optional URL to open in the instance when the component is ready, such as an Expo URL |