### Host SDK - Quick Start

Source: https://context7_llms

A basic example demonstrating how to create a component registry, register custom components, and initialize a worker controller to load and connect to a plugin.

```APIDOC
## Quick Start

```typescript
import {
  createWorkerController,
  createComponentRegistry,
} from "@uniview/host-sdk";

// Create a registry for custom components
const registry = createComponentRegistry();
registry.register("Button", MyButtonComponent);

// Create a controller to load the plugin
const controller = createWorkerController({
  pluginUrl: "/plugins/my-plugin.js",
  initialProps: { userId: "123" },
});

// Subscribe to tree updates
controller.subscribe((tree) => {
  console.log("New UI tree:", tree);
  // Render the tree using your framework
});

// Connect to start the plugin
await controller.connect();
```
```

--------------------------------

### Svelte Host Setup Example

Source: https://context7_llms

This Svelte component demonstrates how to set up a Uniview plugin host. It uses `@uniview/host-svelte` and `@uniview/host-sdk` to create a worker controller and render a plugin.

```svelte
<script lang="ts">
  import { PluginHost } from '@uniview/host-svelte';
  import { createWorkerController } from '@uniview/host-sdk';

  const controller = createWorkerController({
    pluginUrl: '/plugins/my-plugin.js'
  });
</script>

<PluginHost {controller} />

```

--------------------------------

### Host SDK - Installation

Source: https://context7_llms

Install the @uniview/host-sdk package using pnpm.

```APIDOC
## Installation

```bash
pnpm add @uniview/host-sdk
```
```

--------------------------------

### Install @uniview/host-sdk

Source: https://context7_llms

Installs the @uniview/host-sdk package using pnpm. This is the first step to integrating Uniview plugins into your application.

```bash
pnpm add @uniview/host-sdk
```

--------------------------------

### Installation

Source: https://context7_llms

Install the @uniview/runtime package using pnpm.

```APIDOC
## Installation

```bash
pnpm add @uniview/runtime
```
```

--------------------------------

### Basic PluginHost Usage with Svelte 5

Source: https://context7_llms

Demonstrates a quick start example of using the PluginHost component in Svelte 5. It shows how to set up a component registry and a plugin controller to load and render a plugin's UI.

```svelte
<script lang="ts">
  import { PluginHost } from '@uniview/host-svelte';
  import { createWorkerController, createComponentRegistry } from '@uniview/host-sdk';
  import Button from '$lib/components/Button.svelte';

  // Create component registry
  const registry = createComponentRegistry();
  registry.register('Button', Button);

  // Create plugin controller
  const controller = createWorkerController({
    pluginUrl: '/plugins/my-plugin.js'
  });
</script>

<PluginHost {controller} {registry}>
  {#snippet loading()}
    <p>Loading plugin...</p>
  {/snippet}
</PluginHost>
```

--------------------------------

### Install @uniview/runtime

Source: https://context7_llms

Install the @uniview/runtime package using pnpm. This is the first step to integrating runtime capabilities into your project.

```bash
pnpm add @uniview/runtime
```

--------------------------------

### Run Uniview Host Development Server

Source: https://context7_llms

Starts the development server for a SvelteKit application, allowing you to test the host and its integrated plugins.

```bash
pnpm dev
```

--------------------------------

### startWSServerPlugin (Deprecated)

Source: https://context7_llms

Start a WebSocket server plugin (Deprecated). Use `@uniview/runtime/ws-client` instead.

```APIDOC
## startWSServerPlugin (Deprecated)

Start a WebSocket server plugin.

<Callout type="warn">
  **Deprecated**: Running plugins as WebSocket servers is deprecated. Use
  `@uniview/runtime/ws-client` to connect to a Bridge server instead. This
  approach simplifies deployment and port management.
</Callout>

### Method

```typescript
import { startWSServerPlugin } from "@uniview/runtime/ws-server";

startWSServerPlugin({
  App,
  port: 3001,
});
```

### Description

This function starts a plugin that communicates over WebSocket. It is recommended to use the WebSocket client approach for new projects.

### Parameters

#### Request Body

- **App** (React.ComponentType) - Required - Your React plugin component
- **port** (number) - Required - The port to listen on

### Request Example

```typescript
// server-plugin.ts
import { startWSServerPlugin } from "@uniview/runtime/ws-server";
import App from "./App";

startWSServerPlugin({
  App,
  port: 3001,
});
```
```

--------------------------------

### Install @uniview/host-svelte and Dependencies

Source: https://context7_llms

Installs the necessary @uniview/host-svelte package along with its required SDK and protocol dependencies using pnpm.

```bash
pnpm add @uniview/host-svelte @uniview/host-sdk @uniview/protocol
```

--------------------------------

### Install Uniview Host SDK and Svelte Package

Source: https://context7_llms

Installs the necessary packages for host development using Svelte and the Uniview protocol.

```bash
pnpm add @uniview/host-sdk @uniview/host-svelte @uniview/protocol
```

--------------------------------

### Quick Start: Load and Manage Uniview Plugins

Source: https://context7_llms

Demonstrates the basic usage of @uniview/host-sdk to create a component registry, register custom components, and initialize a worker controller to load and manage a plugin. It shows how to subscribe to UI tree updates and connect to the plugin.

```typescript
import {
  createWorkerController,
  createComponentRegistry,
} from "@uniview/host-sdk";

// Create a registry for custom components
const registry = createComponentRegistry();
registry.register("Button", MyButtonComponent);

// Create a controller to load the plugin
const controller = createWorkerController({
  pluginUrl: "/plugins/my-plugin.js",
  initialProps: { userId: "123" },
});

// Subscribe to tree updates
controller.subscribe((tree) => {
  console.log("New UI tree:", tree);
  // Render the tree using your framework
});

// Connect to start the plugin
await controller.connect();
```

--------------------------------

### TypeScript: Setup Browser Environment

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This TypeScript code snippet sets up the browser environment by importing the 'browser' object from the '$app/environment' module. It's a foundational step for applications running in a browser context.

```typescript
import { browser } from "$app/environment";
```

--------------------------------

### startWorkerPlugin

Source: https://context7_llms

Bootstrap a plugin in a Web Worker with automatic RPC setup.

```APIDOC
## startWorkerPlugin

Bootstrap a plugin in a Web Worker with automatic RPC setup.

### Method

```typescript
function startWorkerPlugin(options: { App: React.ComponentType }): void;
```

### Description

This function:

1. Creates an RPC channel using the Worker's `postMessage`
2. Exposes the `HostToPluginAPI` methods to the host
3. Sets up the React reconciler
4. Starts rendering when `initialize()` is called

### Request Example

```typescript
// worker.ts
import { startWorkerPlugin } from "@uniview/runtime";
import App from "./App";

startWorkerPlugin({ App });
```
```

--------------------------------

### Start WebSocket Server Plugin (Deprecated)

Source: https://context7_llms

Launch a plugin that acts as a WebSocket server. Note that this method is deprecated in favor of the WebSocket client approach for better deployment and port management.

```typescript
// server-plugin.ts
import { startWSServerPlugin } from "@uniview/runtime/ws-server";
import App from "./App";

startWSServerPlugin({
  App,
  port: 3001,
});
```

--------------------------------

### Keyed Re-rendering Example

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This Svelte code demonstrates keyed re-rendering by wrapping a component in a `{#key ...}` block. This forces the component to be destroyed and recreated when the key's value changes, which is useful for resetting component state.

```html
{#key runtimeMode}
  <PluginHost {controller} {registry} />
{/key}
```

--------------------------------

### Install Uniview Plugin Development Packages with pnpm

Source: https://context7_llms

Provides the command to install essential packages for developing Uniview plugins using pnpm. This includes the core runtime, React renderer, protocol definitions, and React itself.

```bash
# For plugin development
pnpm add @uniview/runtime @uniview/react-renderer @uniview/protocol react
```

--------------------------------

### Plugin Host Structure Example

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet illustrates the basic structure of a PluginHost in a configuration file. It defines key properties like runtimeMode, controller, and registry, which are essential for managing plugin behavior and registration.

```json
{
  "key": "runtimeMode",
  "PluginHost": {
    "controller": {},
    "registry": {}
  }
}
```

--------------------------------

### Loading Snippet Example

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This Svelte snippet defines a custom loading UI to be displayed while a component or process is initializing. It includes a spinning animation and a status message, suitable for scenarios like worker startup or network connections.

```html
{#snippet loading()}
  <div class="flex flex-col items-center justify-center h-64 text-gray-500 gap-4">
    <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
    <p>Connecting to plugin environment...</p>
  </div>
{/snippet}
```

--------------------------------

### Install @uniview/protocol

Source: https://context7_llms

Installs the @uniview/protocol package using pnpm. This package is essential for defining the communication contract between plugins and hosts.

```bash
pnpm add @uniview/protocol
```

--------------------------------

### Install @uniview/react-renderer - Bash

Source: https://context7_llms

Installs the @uniview/react-renderer package along with React using pnpm. This package enables rendering React components into a serializable tree structure.

```bash
pnpm add @uniview/react-renderer react
```

--------------------------------

### Framework Integration - React/Vue/Other

Source: https://context7_llms

Guides on implementing a custom renderer for React, Vue, or other frameworks using the Uniview LLMs Host SDK controller.

```APIDOC
## Framework Integration - React/Vue/Other

### Description
Implement your own UI renderer for frameworks like React or Vue by utilizing the Host SDK's controller. This involves subscribing to updates, handling events, and managing the connection lifecycle.

### Method
N/A (This is a conceptual guide for implementation)

### Parameters
None

### Request Example
```typescript
// 1. Create controller and registry
const controller = createWorkerController({ pluginUrl: "/plugin.js" });
const registry = createComponentRegistry();

// 2. Subscribe to updates
controller.subscribe((tree) => {
  // Re-render your UI with the new tree
  renderTree(tree, registry);
});

// 3. Handle events
function createEventHandler(handlerId: string) {
  return (...args: unknown[]) => {
    controller.execute(handlerId, args);
  };
}

// 4. Connect on mount
await controller.connect();

// 5. Disconnect on unmount
controller.disconnect();
```

### Response
#### Success Response (200)
N/A (This is a code implementation guide)

#### Response Example
N/A
```

--------------------------------

### Bootstrap Plugin with @uniview/runtime (TypeScript)

Source: https://context7_llms

Shows the simplest way to bootstrap a plugin using the startWorkerPlugin function from @uniview/runtime. It also includes an example of how to configure initial props and error handling.

```typescript
// Simplest usage
import { startWorkerPlugin } from "@uniview/runtime";
startWorkerPlugin({ App });

// With configuration
startWorkerPlugin({
  App,
  initialProps: { theme: "dark" },
  onError: (err) => console.error(err),
});
```

--------------------------------

### Setup Worker Plugin (TypeScript)

Source: https://context7_llms

Demonstrates setting up a plugin in Worker mode on the plugin side using `@uniview/runtime`. It initializes the plugin application within a web worker for isolation. This mode is asynchronous and communicates via `postMessage`.

```typescript
// worker.ts
import { startWorkerPlugin } from "@uniview/runtime";
import App from "./App";

startWorkerPlugin({ App });
```

--------------------------------

### Basic Usage of React Renderer - TypeScript

Source: https://context7_llms

Demonstrates the basic setup for using @uniview/react-renderer. It involves creating a HandlerRegistry, a render bridge, subscribing to tree updates, and rendering a React app.

```typescript
import {
  render,
  createRenderBridge,
  serializeTree,
  HandlerRegistry
} from "@uniview/react-renderer";

// Create handler registry
const registry = new HandlerRegistry();

// Create render bridge
const bridge = createRenderBridge();

// Subscribe to tree updates
bridge.subscribe((root) => {
  if (root) {
    const tree = serializeTree(root, registry);
    console.log('Tree updated:', tree);
  }
});

// Render your React app
render(<App />, bridge);
```

--------------------------------

### Setup Main Thread Controller

Source: https://context7_llms

Initializes and connects the Main Thread controller for plugin development. This mode is suitable for local development and debugging due to its direct access and hot-reloading capabilities. It requires the '@uniview/host-sdk' and the plugin's App component.

```typescript
import { createMainController } from "@uniview/host-sdk";
import { SimpleDemo } from "@uniview/example-plugin";

const controller = createMainController({
  App: SimpleDemo,
  initialProps: { debug: true },
});

await controller.connect();
```

--------------------------------

### HTML Structure for Plugin Host Initialization

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet represents an HTML structure for initializing a plugin host. It includes a 'div' element and a closing tag, indicating the start and end of a component or section. The code suggests a dynamic rendering process in a web environment.

```html
</div>
<PluginHost>
</div>
```

--------------------------------

### Svelte Framework Integration with Uniview Host

Source: https://context7_llms

Demonstrates how to integrate Uniview components into a Svelte application using the `@uniview/host-svelte` package. It shows the setup of the component registry and the worker controller, and how to render the `PluginHost` component.

```svelte
<script>
  import { PluginHost } from '@uniview/host-svelte';
  import { createWorkerController, createComponentRegistry } from '@uniview/host-sdk';

  const registry = createComponentRegistry();
  const controller = createWorkerController({ pluginUrl: '/plugin.js' });
</script>

<PluginHost {controller} {registry} />
```

--------------------------------

### React Plugin Example

Source: https://context7_llms

This code snippet demonstrates a simple React plugin component that includes state management for a counter and a button to increment it. It utilizes the standard React useState hook.

```tsx
// App.tsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4">
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

```

--------------------------------

### Importing SimpleDemo from @uniview/example-plugin

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This JavaScript code snippet demonstrates how to import the 'SimpleDemo' component from the '@uniview/example-plugin' package. It's a standard import statement used in Svelte or similar JavaScript frameworks.

```javascript
import { SimpleDemo } from "@uniview/example-plugin";
```

--------------------------------

### Loading States UI with Plugin Initialization

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This code demonstrates how to implement a custom UI for loading states while a plugin is initializing. It's crucial for providing user feedback during delays in Worker Mode (script/worker startup) and WebSocket Mode (network latency).

```html
<p>The {#snippet loading()} block allows you to provide a custom UI while the plugin is initializing. This is especially important for:</p>
<ul>
  <li><strong>Worker Mode</strong>: Script loading and worker startup (approx. 50-200ms).</li>
  <li><strong>WebSocket Mode</strong>: Network connection latency (10-100ms+).</li>
</ul>
```

--------------------------------

### Set Up Uniview Host Controller (Svelte)

Source: https://context7_llms

Initializes a Svelte component to act as a Uniview plugin host. It sets up a component registry and a worker controller pointing to the plugin's JavaScript file.

```svelte
<script lang="ts">
  import { PluginHost } from '@uniview/host-svelte';
  import { createWorkerController, createComponentRegistry } from '@uniview/host-sdk';
  import type { Component } from 'svelte';

  // Create component registry (optional: for custom components)
  const registry = createComponentRegistry<Component>();

  // Create controller pointing to your plugin
  const controller = createWorkerController({
    pluginUrl: '/plugins/plugin.js'
  });
</script>

<div class="p-8 max-w-2xl mx-auto">
  <h1 class="text-2xl font-bold mb-8">Uniview Host Demo</h1>

  <div class="border rounded-xl shadow-sm overflow-hidden">
    <PluginHost {controller} {registry}>
      {#snippet loading()}
        <div class="p-8 text-center text-gray-500 animate-pulse">
          Loading plugin environment...
        </div>
      {/snippet}
    </PluginHost>
  </div>
</div>
```

--------------------------------

### Example React Component for a Plugin

Source: https://context7_llms

A standard React component that can be used within a @uniview/runtime plugin. It functions as expected with state management and event handling.

```tsx
// App.tsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4">
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}
```

--------------------------------

### Bootstrap Plugin with Uniview Runtime

Source: https://context7_llms

Starts a Uniview plugin worker using the provided React component. This is the entry point for the plugin's runtime environment.

```typescript
import { startWorkerPlugin } from "@uniview/runtime";
import App from "./App";

startWorkerPlugin({ App });
```

--------------------------------

### Reactive Controller Creation with $derived.by

Source: https://context7_llms

Demonstrates how to use `$derived.by` to reactively recreate a controller when a runtime mode changes. This ensures proper cleanup of the old controller and initialization of a new one with the correct configuration, including re-instantiating the registry.

```javascript
const controller = $derived.by(() => {
  // Cleanup logic for the old controller can be placed here using $effect
  return new RuntimeController(runtimeMode, registry);
});
```

--------------------------------

### Deprecated WebSocket Plugin Server (TypeScript)

Source: https://context7_llms

Provides the deprecated method for starting a WebSocket server directly within the plugin using `@uniview/runtime/ws-server`. This approach is less recommended than the Bridge architecture for server-side plugins.

```typescript
import { startWSServerPlugin } from "@uniview/runtime/ws-server";
startWSServerPlugin({ App, port: 3001 });
```

--------------------------------

### JavaScript for Plugin Host Initialization

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This JavaScript snippet appears to be part of a system for managing plugin hosts and their controllers. It defines structures for plugin host objects, including properties like 'controller' and 'registry', and likely handles the initialization or registration of these components.

```javascript
PluginHost {
  controller
  registry
}
```

--------------------------------

### Svelte 5 Toggle Custom Component Example

Source: https://context7_llms

A Svelte 5 toggle button component. It can be pressed or unpressed, supports disabled state, and offers 'default' or 'outline' variants. It accepts an optional click handler and can render child content.

```svelte
<!-- Toggle.svelte -->
<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    pressed?: boolean;
    disabled?: boolean;
    variant?: 'default' | 'outline';
    onclick?: () => void;
    children?: Snippet;
  }

  let {
    pressed = false,
    disabled = false,
    variant = 'default',
    onclick,
    children
  }: Props = $props();
</script>

<button
  class="toggle"
  class:pressed
  class:outline={variant === 'outline'}
  aria-pressed={pressed}
  {disabled}
  {onclick}
>
  {@render children?.()}
</button>
```

--------------------------------

### Importing PluginController from @uniview/host-sdk

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet demonstrates how to import the PluginController from the '@uniview/host-sdk' package. It's a common pattern for integrating external SDKs in JavaScript projects.

```javascript
import { PluginController } from "@uniview/host-sdk";
```

--------------------------------

### Create and Register Custom Components with Uniview Host SDK

Source: https://context7_llms

Demonstrates how to initialize a component registry using `createComponentRegistry` from `@uniview/host-sdk` and then register custom Svelte components like 'Button', 'Card', and 'Input' into this registry.

```typescript
import { createComponentRegistry } from "@uniview/host-sdk";
import type { Component } from "svelte";

// Create a typed registry for your framework
const registry = createComponentRegistry<Component>();

// Register components
registry.register("Button", Button);
registry.register("Card", Card);
registry.register("Input", Input);
```

--------------------------------

### connectToHostServer

Source: https://context7_llms

Connect to a Bridge server for server-side plugins.

```APIDOC
## connectToHostServer

Connect to a Bridge server for server-side plugins (Recommended).

### Method

```typescript
import { connectToHostServer } from "@uniview/runtime/ws-client";

connectToHostServer({
  App,
  serverUrl: "ws://localhost:3000", // Bridge server URL
  pluginId: "my-plugin", // Unique plugin identifier
});
```

### Description

This function is used for server-side plugins to connect to a Bridge server. It simplifies deployment and port management by establishing a WebSocket connection.

### Parameters

#### Request Body

- **App** (React.ComponentType) - Required - Your React plugin component
- **serverUrl** (string) - Required - Bridge server WebSocket URL
- **pluginId** (string) - Required - Unique identifier for this plugin
- **initialProps** (JSONValue) - Optional - Optional initial props

### Request Example

```typescript
// server-plugin.ts
import { connectToHostServer } from "@uniview/runtime/ws-client";
import App from "./App";

connectToHostServer({
  App,
  serverUrl: "ws://localhost:3000", // Bridge server URL
  pluginId: "my-plugin", // Unique plugin identifier
});
```

The plugin connects to `{serverUrl}/plugins/{pluginId}` and waits for a host to connect.
```

--------------------------------

### Svelte 5 Card Custom Component Example

Source: https://context7_llms

A Svelte 5 component for displaying cards. It supports optional title and description props, and renders any provided child content within the card body. Includes basic CSS for card styling.

```svelte
<!-- Card.svelte -->
<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    title?: string;
    description?: string;
    children?: Snippet;
  }

  let { title, description, children }: Props = $props();
</script>

<div class="card">
  {#if title}
    <h3 class="card-title">{title}</h3>
  {/if}
  {#if description}
    <p class="card-description">{description}</p>
  {/if}
  <div class="card-content">
    {@render children?.()}
  </div>
</div>
```

--------------------------------

### Serialize React onClick to UINode Handler ID

Source: https://context7_llms

This example shows how a React `onClick` event handler is transformed into a `UINode` representation. The actual function is replaced by a handler ID (`_onClickHandlerId`), which the runtime uses to look up and execute the original function via its registry.

```tsx
// In your plugin
<button onClick={() => setCount(c => c + 1)}>Click</button>

// Becomes UINode:
{
  type: "button",
  props: {
    _onClickHandlerId: "handler_abc123"
  },
  children: ["Click"]
}
```

--------------------------------

### createPluginRuntime

Source: https://context7_llms

For advanced use cases, create a runtime with a custom transport.

```APIDOC
## createPluginRuntime

For advanced use cases, create a runtime with custom transport.

### Method

```typescript
import { createPluginRuntime } from "@uniview/runtime";
import type { PluginToHostAPI } from "@uniview/protocol";

interface PluginRuntimeOptions {
  App: React.ComponentType;
  hostApi: PluginToHostAPI;
  onInitialize?: (props: JSONValue) => void;
  onUpdateProps?: (props: JSONValue) => void;
}

interface PluginRuntime {
  start(): void;
  stop(): void;
  executeHandler(handlerId: string, args: JSONValue[]): Promise<void>;
}
```

### Description

This function allows for the creation of a plugin runtime with a custom transport mechanism, providing more control over communication with the host.

### Request Example

```typescript
import { createPluginRuntime } from "@uniview/runtime";
import type { PluginToHostAPI } from "@uniview/protocol";

const runtime = createPluginRuntime({
  App: MyApp,
  hostApi: {
    updateTree: (tree) => sendToHost(tree),
    log: (level, args) => console.log(level, ...args),
  },
});

runtime.start();
```
```

--------------------------------

### Custom Svelte 5 Button Component for Uniview

Source: https://context7_llms

Provides an example of a custom Svelte 5 component (Button.svelte) designed to be registered with Uniview's component registry. It supports various props like variant, disabled state, click handlers, and children content.

```svelte
<!-- Button.svelte -->
<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    variant?: 'primary' | 'secondary' | 'outline';
    disabled?: boolean;
    onclick?: () => void;
    children?: Snippet;
  }

  let {
    variant = 'primary',
    disabled = false,
    onclick,
    children
  }: Props = $props();
</script>

<button
  class="btn btn-{variant}"
  {disabled}
  {onclick}
>
  {@render children?.()}
</button>

<style>
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
  }
  .btn-primary {
    background: #3b82f6;
    color: white;
  }
  .btn-secondary {
    background: #6b7280;
    color: white;
  }
  .btn-outline {
    border: 1px solid #d1d5db;
    background: transparent;
  }
</style>
```

--------------------------------

### Component Registry: Map Plugin Components to Framework Implementations

Source: https://context7_llms

Demonstrates the usage of the ComponentRegistry to map string types to actual component implementations within your UI framework. It shows how to register, retrieve, check for, and list components.

```typescript
import { createComponentRegistry } from "@uniview/host-sdk";

interface ComponentRegistry<T = unknown> {
  register(type: string, component: T, metadata?: ComponentMetadata): void;
  get(type: string): T | undefined;
  has(type: string): boolean;
  list(): string[];
  clear(): void;
}

const registry = createComponentRegistry<SvelteComponent>();

// Register components
registry.register("Button", Button);
registry.register("Card", Card);
registry.register("Modal", Modal);

// Check availability
if (registry.has("Button")) {
  const ButtonComponent = registry.get("Button");
}

// List all registered
console.log(registry.list()); // ['Button', 'Card', 'Modal']
```

--------------------------------

### Svelte 5 Input Custom Component Example

Source: https://context7_llms

A Svelte 5 component for input fields. It supports various input types, placeholder text, labels, disabled state, and event handlers for input and change events. It's structured within a div for group styling.

```svelte
<!-- Input.svelte -->
<script lang="ts">
  interface Props {
    id?: string;
    type?: 'text' | 'email' | 'password' | 'number';
    value?: string;
    placeholder?: string;
    label?: string;
    disabled?: boolean;
    oninput?: (e: Event) => void;
    onchange?: (e: Event) => void;
  }

  let {
    id,
    type = 'text',
    value = '',
    placeholder,
    label,
    disabled = false,
    oninput,
    onchange
  }: Props = $props();
</script>

<div class="input-group">
  {#if label}
    <label for={id}>{label}</label>
  {/if}
  <input
    {id}
    {type}
    {value}
    {placeholder}
    {disabled}
    {oninput}
    {onchange}
  />
</div>
```

--------------------------------

### Framework Adapter Structure (Conceptual)

Source: https://context7_llms

Describes the architectural separation between the core 'host-sdk' logic and thin framework-specific adapters. The 'host-sdk' contains all controller logic, while adapters like 'host-svelte' and 'host-vue' are minimal and focus solely on rendering.

```text
host-sdk (400 lines)     ← All the logic
host-svelte (150 lines)  ← Just Svelte rendering
host-vue (150 lines)     ← Just Vue rendering
```

--------------------------------

### Svelte 5 Button Custom Component Example

Source: https://context7_llms

A Svelte 5 component for a customizable button. It accepts props for variant, size, disabled state, and an optional click handler. It also supports rendering child content via Svelte snippets and includes scoped CSS for styling.

```svelte
<!-- Button.svelte -->
<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    onclick?: () => void;
    children?: Snippet;
  }

  let { 
    variant = 'primary',
    size = 'md',
    disabled = false,
    onclick,
    children
  }: Props = $props();
</script>

<button
  class="btn btn-{variant} btn-{size}"
  {disabled}
  {onclick}
>
  {@render children?.()}
</button>

<style>
  .btn {
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
  .btn-md { padding: 0.5rem 1rem; font-size: 1rem; }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }

  .btn-primary {
    background: #3b82f6;
    color: white;
  }
  .btn-primary:hover { background: #2563eb; }

  .btn-secondary {
    background: #6b7280;
    color: white;
  }
  .btn-secondary:hover { background: #4b5563; }

  .btn-danger {
    background: #ef4444;
    color: white;
  }
  .btn-danger:hover { background: #dc2626; }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>
```

--------------------------------

### Protocol Helpers for Handler IDs (TypeScript)

Source: https://context7_llms

Illustrates the use of protocol helper functions for managing handler IDs, which are used to serialize functions across RPC boundaries. Functions include `handlerIdProp` to get the property name, `isHandlerIdProp` to check if a property is a handler ID, and `extractEventName` to retrieve the original event name.

```typescript
// Protocol helpers
import {
  handlerIdProp,
  isHandlerIdProp,
  extractEventName,
} from "@uniview/protocol";

handlerIdProp("onClick"); // "_onClickHandlerId"
isHandlerIdProp("_onClickHandlerId"); // true
extractEventName("_onClickHandlerId"); // "onClick"
```

--------------------------------

### Create Main Controller in JavaScript

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet shows how to create a main controller in JavaScript, intended for use in the main thread, possibly during development. It utilizes a function named createMainController. The App is then configured with SimpleDemo.

```javascript
// Main Thread (Dev only)
controller = createMainController({
App: SimpleDemo,
});
```

--------------------------------

### Handle Unknown Components in TypeScript

Source: https://context7_llms

Illustrates a strategy for handling components that are not found in the registry, including logging a warning and providing options for rendering.

```typescript
// In ComponentRenderer logic
if (!registry.has(node.type)) {
  console.warn(`Unknown component: ${node.type}`);
  // Option 1: Render nothing
  // Option 2: Render error message
  // Option 3: Render as div with warning
}
```

--------------------------------

### Lazy Component Registration with TypeScript

Source: https://context7_llms

Illustrates how to create a component registry and register components on-demand using dynamic imports in TypeScript.

```typescript
const registry = createComponentRegistry();

// Register core components immediately
registry.register("Button", Button);
registry.register("Input", Input);

// Register others when needed
async function loadAdvancedComponents() {
  const { DataTable } = await import("$lib/components/DataTable.svelte");
  const { Chart } = await import("$lib/components/Chart.svelte");

  registry.register("DataTable", DataTable);
  registry.register("Chart", Chart);
}
```

--------------------------------

### Connect to Host Server using WebSocket Client

Source: https://context7_llms

Establish a connection to a Bridge server from a server-side plugin using the WebSocket client entry point. This is the recommended approach for server-side plugins.

```typescript
// server-plugin.ts
import { connectToHostServer } from "@uniview/runtime/ws-client";
import App from "./App";

connectToHostServer({
  App,
  serverUrl: "ws://localhost:3000", // Bridge server URL
  pluginId: "my-plugin", // Unique plugin identifier
});
```

--------------------------------

### Lifecycle Management

Source: https://context7_llms

Illustrates the lifecycle of the Uniview LLMs Host SDK controller, from creation to disconnection.

```APIDOC
## Lifecycle Management

### Description
Details the lifecycle of the Uniview LLMs Host SDK controller, outlining the sequence of operations including creation, connection, subscription, updates, execution, and disconnection.

### Method
N/A (This section describes the flow)

### Parameters
None

### Request Example
```
createController()
       │
       ▼
  connect() ──────────────┐
       │                  │
       ▼                  │
  subscribe(cb) ◄─────────┤
       │                  │
       ▼                  │
  updateProps() ◄─────────┤
       │                  │
       ▼                  │
  execute() ◄─────────────┤
       │                  │
       ▼                  │
  disconnect() ───────────┘
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

**Note:** Always call `disconnect()` when done to clean up resources and prevent memory leaks.
```

--------------------------------

### Registering Custom Components with Host SDK

Source: https://context7_llms

Demonstrates how to register a custom Svelte component (e.g., Button) with the component registry provided by the @uniview/host-sdk. This allows the PluginHost to render custom UI elements defined by plugins.

```typescript
import { createComponentRegistry } from "@uniview/host-sdk";
import Button from "$lib/components/Button.svelte";

const registry = createComponentRegistry();
registry.register("Button", Button);
```

--------------------------------

### TypeScript: Import Host SDK Controllers and Registry

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This TypeScript code imports various controller creation functions (createWorkerController, createWebSocketController, createMainController) and the createComponentRegistry function from the '@uniview/host-sdk' module. These are essential for managing different types of controllers and component registration within the host application.

```typescript
import {
  createWorkerController,
  createWebSocketController,
  createMainController,
  createComponentRegistry
} from "@uniview/host-sdk";
```

--------------------------------

### Register Component with Metadata in TypeScript

Source: https://context7_llms

Demonstrates how to register a component with additional metadata, including its description and prop details, using a component registry.

```typescript
registry.register("Button", Button, {
  description: "Primary action button",
  props: {
    variant: { type: "string", default: "primary" },
    size: { type: "string", default: "md" },
    disabled: { type: "boolean", default: false },
  },
});
```

--------------------------------

### JavaScript Error Handling and Controller Creation

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet demonstrates JavaScript code for handling errors during controller creation and returning null if an error occurs. It also includes logic for returning controller and registry objects upon successful creation.

```javascript
}
catch (err) {
  console.error("Failed to create controller:", err);
  return null;
}

return { controller, registry };
});

// 3. Cleanup Effect
$
effect(() => {
  const config = controllerConfig;
  return () =>
});

```

--------------------------------

### Svelte Host Implementation with Uniview SDK

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

A Svelte 5 component demonstrating a Universal Host pattern using @uniview/host-svelte and @uniview/host-sdk. It dynamically creates controllers for Worker, WebSocket, or Main Thread modes based on the runtimeMode state, registering custom Svelte components for UI interaction.

```svelte
<script lang="ts">
  import { browser } from "$app/environment";
  import { PluginHost } from "@uniview/host-svelte";
  import {
    createWorkerController,
    createWebSocketController,
    createMainController,
    createComponentRegistry
  } from "@uniview/host-sdk";
  import type { PluginController } from "@uniview/host-sdk";
  import type { Component } from "svelte";

  // Import your local React components for Main Thread mode (dev only)
  import { SimpleDemo } from "@uniview/example-plugin";

  // Import your custom Svelte adapters
  import PluginButton from '$lib/components/plugin/PluginButton.svelte';
  import PluginInput from '$lib/components/plugin/PluginInput.svelte';

  type RuntimeMode = 'worker' | 'main-thread' | 'node-server';

  let runtimeMode: RuntimeMode = $state('worker');

  // Configuration
  const BRIDGE_URL = 'ws://localhost:3000';
  const WORKER_URL = 'http://localhost:3000/simple-demo.worker.js';
  const PLUGIN_ID = 'simple-demo';

  // Derived state to manage controller lifecycle
  let controllerConfig = $derived.by(() => {
    if (!browser) return null;

    // 1. Create Registry
    const registry = createComponentRegistry<Component>();
    registry.register('Button', PluginButton);
    registry.register('Input', PluginInput);

    // 2. Create Controller based on mode
    let controller: PluginController;

    try {
      if (runtimeMode === 'worker') {
        controller = createWorkerController({
          pluginUrl: WORKER_URL,
        });
      } else if (runtimeMode === 'node-server') {
        controller = createWebSocketController({
          serverUrl: BRIDGE_URL,
          pluginId: PLUGIN_ID,
        });
      } else {
        // Main Thread (Dev only)
        controller = createMainController({
          App: SimpleDemo,
        });
      }
    } catch (err) {
      console.error("Failed to create controller:", err);
      return null;
    }

    return { controller, registry };
  });

  // 3. Cleanup Effect
  $effect(() => {
    const config = controllerConfig;
    return () => {

```

--------------------------------

### Register Custom Components in TypeScript

Source: https://context7_llms

Demonstrates how to register product-specific primitive components like CommandPalette, FileTree, and Terminal using the registry. This allows for custom UI elements within the Uniview environment.

```typescript
// Your product's API
registry.register("CommandPalette", CommandPalette);
registry.register("FileTree", FileTree);
registry.register("Terminal", Terminal);
```

--------------------------------

### Register Components and Initialize Controller (Svelte)

Source: https://context7_llms

This Svelte component registers custom UI components like Button, Card, and Input using a component registry. It then initializes a worker controller with a plugin URL and initial properties, demonstrating how to set up the plugin host environment.

```typescript
import { PluginHost } from '@uniview/host-svelte';
import { createWorkerController, createComponentRegistry } from '@uniview/host-sdk';
import Button from '$lib/components/Button.svelte';
import Card from '$lib/components/Card.svelte';
import Input from '$lib/components/Input.svelte';

// Register all custom components
const registry = createComponentRegistry();
registry.register('Button', Button);
registry.register('Card', Card);
registry.register('Input', Input);

// Create controller with initial props
const controller = createWorkerController({
  pluginUrl: '/plugins/dashboard.js',
  initialProps: {
    theme: 'dark',
    userId: 'user_123'
  }
});

// Update props dynamically
function setTheme(theme: string) {
  controller.updateProps({ theme });
}

// Reload plugin
function reload() {
  controller.reload();
}

```

--------------------------------

### Configure LLM Controller Lifecycle (JavaScript)

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This JavaScript code demonstrates how to manage the controller lifecycle using derived state. It includes a check to ensure the controller is only initialized in a browser environment, returning null otherwise.

```javascript
let controllerConfig = $derived.by(() => {
  if (!browser) {
    return null;
  }
});
```

--------------------------------

### Check and List Registered Components in TypeScript

Source: https://context7_llms

Shows how to check for the existence of a component, list all registered components, and retrieve a specific component from the registry using TypeScript.

```typescript
// Check if component exists
if (registry.has("Chart")) {
  // Chart is available
}

// List all registered components
const components = registry.list();
// ['Button', 'Input', 'Card', ...]

// Get component
const ButtonComponent = registry.get("Button");
```

--------------------------------

### Expose Host APIs for Plugins via RPC in TypeScript

Source: https://context7_llms

Illustrates how a host application can expose its functionalities, such as file system operations, to plugins using Remote Procedure Calls (RPC). Plugins can then consume these exposed APIs.

```typescript
// Host exposes file system API
controller.expose({
  readFile: (path) => fs.readFileSync(path),
  writeFile: (path, data) => fs.writeFileSync(path, data),
});

// Plugin uses it
const content = await hostApi.readFile("/config.json");
```

--------------------------------

### Create WebSocket Controller in JavaScript

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet demonstrates the creation of a WebSocket controller in JavaScript. It defines the controller and assigns it to a variable, likely for handling real-time communication. It requires BRIDGE_URL and PLUGIN_ID to be defined.

```javascript
controller = createWebSocketController({
  serverUrl: BRIDGE_URL,
  pluginId: PLUGIN_ID,
});
```

--------------------------------

### HTML Structure and Attributes

Source: https://huakunshen.github.io/uniview/docs/guides/advanced-host

This snippet represents the HTML structure of a webpage, including elements like 'button', 'div', and 'main'. It also shows the application of CSS classes and attributes such as 'className', 'style', and 'border', 'rounded-xl', 'bg-gray-50', 'min-h-[400px]', and 'p-6' for styling and layout.

```html
<button>
<div>
<header>
<main class="border rounded-xl bg-gray-50 min-h-[400px] p-6">

```

--------------------------------

### Implement Production-Ready Bridge Server with Elysia (Bun)

Source: https://context7_llms

This TypeScript code sets up a production-ready bridge server using Elysia on Bun. It acts as a WebSocket multiplexer, managing connections for plugins and hosts, forwarding messages between them, and handling connection lifecycle events. It requires Bun to run and uses Elysia for WebSocket handling.

```typescript
import { Elysia } from "elysia";
import { readFile } from "fs/promises";
import { join } from "path";

// In-memory connection map
// pluginId -> { pluginWs, hostWs }
const connections = new Map<string, { pluginWs?: any; hostWs?: any }>();

function normalizeMessage(message: unknown): string {
  let msgStr =
    typeof message === "string"
      ? message
      : message instanceof Buffer
        ? message.toString()
        : JSON.stringify(message);
  return msgStr;
}

const app = new Elysia()
  // Optional: Serve static worker files (if you want to host worker bundles too)
  .get("/:filename", async ({ params }) => {
    try {
      const file = await readFile(join("./dist", params.filename));
      return new Response(file, {
        headers: { "Content-Type": "application/javascript" },
      });
    } catch {
      return new Response("Not found", { status: 404 });
    }
  })

  // 1. Plugin Endpoint: /plugins/:pluginId
  .ws("/plugins/:pluginId", {
    open(ws) {
      const pluginId = ws.data.params.pluginId;
      console.log(`[Bridge] Plugin connected: ${pluginId}`);

      if (!connections.has(pluginId)) {
        connections.set(pluginId, {});
      }
      connections.get(pluginId)!.pluginWs = ws;
    },
    message(ws, message) {
      const pluginId = ws.data.params.pluginId;
      const conn = connections.get(pluginId);

      // Forward message to Host
      if (conn?.hostWs) {
        conn.hostWs.send(normalizeMessage(message));
      }
    },
    close(ws) {
      const pluginId = ws.data.params.pluginId;
      const conn = connections.get(pluginId);
      if (conn) {
        conn.pluginWs = undefined;
        if (!conn.hostWs) connections.delete(pluginId);
      }
      console.log(`[Bridge] Plugin disconnected: ${pluginId}`);
    },
  })

  // 2. Host Endpoint: /host/:pluginId
  .ws("/host/:pluginId", {
    open(ws) {
      const pluginId = ws.data.params.pluginId;
      const conn = connections.get(pluginId);

      // Require plugin to be ready first
      if (!conn?.pluginWs) {
        ws.close(1000, "Plugin not ready");
        return;
      }

      // Replace existing host connection if any
      if (conn.hostWs) {
        conn.hostWs.close(1000, "Replaced by new connection");
      }

      conn.hostWs = ws;
      console.log(`[Bridge] Host connected: ${pluginId}`);
    },
    message(ws, message) {
      const pluginId = ws.data.params.pluginId;
      const conn = connections.get(pluginId);

      // Forward message to Plugin
      if (conn?.pluginWs) {
        conn.pluginWs.send(normalizeMessage(message));
      }
    },
    close(ws) {
      const pluginId = ws.data.params.pluginId;
      const conn = connections.get(pluginId);
      if (conn) {
        conn.hostWs = undefined;
        if (!conn.pluginWs) connections.delete(pluginId);
      }
      console.log(`[Bridge] Host disconnected: ${pluginId}`);
    },
  })
  .listen(3000);

console.log(
  `🌉 Bridge server listening on ${app.server?.hostname}:${app.server?.port}`,
);

```