### Install Peer Dependencies for Unify UI (Tailwind CSS, Shadcn)

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Commands to install required peer dependencies including Tailwind CSS, its Vite plugin, `tailwindcss-animate`, and initialize Tailwind CSS and Shadcn UI.

```bash
npm install -D tailwindcss@^4.0.0 @tailwindcss/vite tailwindcss-animate
npx tailwindcss init
npx shadcn@latest init
```

```bash
yarn add -D tailwindcss@^4.0.0 @tailwindcss/vite tailwindcss-animate
npx tailwindcss init
npx shadcn@latest init
```

```bash
pnpm add -D tailwindcss@^4.0.0 @tailwindcss/vite tailwindcss-animate
npx tailwindcss init
pnpm dlx shadcn@latest init
```

```bash
bun add -D tailwindcss@^4.0.0 @tailwindcss/vite tailwindcss-animate
npx tailwindcss init
bunx shadcn@latest init
```

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

### Install Unify UI and URPC Core Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Commands to install the core Unify UI, URPC, and URPC-core packages using different Node.js package managers.

```bash
npm install @unilab/ukit @unilab/urpc @unilab/urpc-core
```

```bash
yarn add @unilab/ukit @unilab/urpc @unilab/urpc-core
```

```bash
pnpm add @unilab/ukit @unilab/urpc @unilab/urpc-core
```

```bash
bun add @unilab/ukit @unilab/urpc @unilab/urpc-core
```

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

### Create a URPC Adapter Class

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Example of creating a `UserAdapter` class that implements the `Adapter` interface from `@unilab/urpc-core`, providing `findMany` and `findOne` methods for data fetching logic.

```tsx
// adapters/user.ts
import { Adapter } from "@unilab/urpc-core";

export class UserAdapter implements Adapter {
  async findMany(query: any) {
    // Your data fetching logic
    return [
      { id: "1", name: "John Doe", email: "john@example.com", role: "admin", isActive: true },
      { id: "2", name: "Jane Smith", email: "jane@example.com", role: "user", isActive: true }
    ];
  }

  async findOne(query: any) {
    // Single record fetching
    return { id: "1", name: "John Doe", email: "john@example.com", role: "admin", isActive: true };
  }
}
```

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

### Install Project Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/dev/erc20-example/README.md

Command to install the necessary project dependencies using Bun, a fast all-in-one JavaScript runtime.

```bash
bun install
```

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

### Initialize URPC with Entities and Adapters

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Demonstrates how to initialize the URPC system by importing `URPC`, defining a plugin with entities and adapters, and configuring debug mode, middlewares, and default sources for entities.

```tsx
// main.tsx or App.tsx
import { URPC } from "@unilab/urpc";
import { UserEntity } from "./entities/user";
import { UserAdapter } from "./adapters/user";

const MyPlugin = {
  entities: [UserEntity],
  adapters: [
    {
      source: "demo",
      entity: "UserEntity",
      adapter: new UserAdapter()
    }
  ]
};

URPC.init({
  enableDebug: true,
  plugins: [MyPlugin],
  middlewares: [],
  entityConfigs: {
    user: {
      defaultSource: "demo"
    }
  }
});
```

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

### Configure Vite with React and Tailwind CSS Plugins

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Example `vite.config.ts` showing how to integrate `@vitejs/plugin-react` and `@tailwindcss/vite` into a Vite project for Unify UI.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
```

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

### URPC Server Setup Examples

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

Illustrates how to set up a URPC server using the `@unilab/urpc-hono` and `@unilab/urpc-next` packages. These examples demonstrate initializing the URPC application with plugins and middleware for different server environments.

```typescript
import { URPC } from "@unilab/urpc-hono";
import { WalletPlugin } from "@unilab/uniweb3";
import { LoggingMiddleware } from "@unilab/urpc-core/middleware";

const app = URPC.init({
  plugins: [WalletPlugin],
  middlewares: [LoggingMiddleware]
});

export default {
  port: 3000,
  fetch: app.fetch,
};
```

```typescript
// app/api/[...urpc]/route.ts
import { URPC } from "@unilab/urpc-next";
import { WalletPlugin } from "@unilab/uniweb3";

const api = URPC.init({
  plugins: [WalletPlugin]
});

export const { GET, POST, PATCH, DELETE } = api;
```

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

### Run Next.js Development Server

Source: https://github.com/unify-procotol/unify/blob/main/examples/nextjs-app-router/README.md

Instructions on how to start the Next.js development server using various package managers. This command launches the application locally, typically accessible at http://localhost:3000, and enables hot-reloading for development.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Start Development Server

Source: https://github.com/unify-procotol/unify/blob/main/dev/erc20-example/README.md

Command to start the development server for the Mimo trading pair plugin. The server will be accessible locally.

```bash
bun run dev
```

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

### Install Project Dependencies for React Todo Demo

Source: https://github.com/unify-procotol/unify/blob/main/examples/react-todo/README.md

Instructions to install the necessary project dependencies using various package managers like npm, yarn, pnpm, or bun.

```bash
npm install
```

```bash
yarn install
```

```bash
pnpm install
```

```bash
bun install
```

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

### Run Next.js Development Server

Source: https://github.com/unify-procotol/unify/blob/main/examples/nextjs-pages-router/README.md

Commands to start the Next.js development server using various package managers (npm, yarn, pnpm, bun). The server typically runs on http://localhost:3000 and supports hot-reloading for development.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

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

### Start React Todo Development Server

Source: https://github.com/unify-procotol/unify/blob/main/examples/react-todo/README.md

Command to launch the development server for the React Todo application, typically accessible at http://localhost:3000.

```bash
npm run dev
```

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

### Initialize URPC Project with CLI

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/basic-usage.mdx

Use the URPC CLI tool to quickly scaffold a new project, install dependencies, and start the development server. This provides a streamlined setup experience.

```bash
npx @unilab/urpc-cli create my-project
```

```bash
yarn create @unilab/urpc-cli my-project
```

```bash
bunx @unilab/urpc-cli create my-project
```

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

### Define a URPC Entity Class

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Example of defining a `UserEntity` class that implements the `Entity` interface from `@unilab/urpc-core`, specifying its name and fields with types and requirements.

```tsx
// entities/user.ts
import { Entity } from "@unilab/urpc-core";

export class UserEntity implements Entity {
  name = "UserEntity";
  fields = [
    { name: "id", type: "string", required: true },
    { name: "name", type: "string", required: true },
    { name: "email", type: "string", required: true },
    { name: "role", type: "string" },
    { name: "isActive", type: "boolean" }
  ];
}
```

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

### Import Unify UI Styles and Tailwind CSS in Main CSS

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Defines the main CSS file structure, including Tailwind CSS directives and importing Unify UI styles from `node_modules` using `@source`.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import Unify UI styles from node_modules */
@source '../../node_modules/@unilab/ukit/**/*.{js,ts,jsx,tsx}';
```

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

### Install Unipost Frontend Development Environment and Components

Source: https://github.com/unify-procotol/unify/blob/main/dev/unipost/frontend-requirements.md

This set of commands guides the user through initializing a new Next.js project with TypeScript and Tailwind CSS, then integrating shadcn/ui and adding core UI components required for the Unipost frontend application. It ensures the development environment is set up correctly with necessary dependencies.

```bash
# 创建项目
npx create-next-app@latest unipost-frontend --typescript --tailwind --app

# 安装 shadcn/ui
npx shadcn-ui@latest init

# 安装必要组件
npx shadcn-ui@latest add button card input label select table badge
```

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

### Display User Data in a Table with UniRender

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Demonstrates how to use the `UniRender` component to display user data in a table layout. It configures columns with custom labels and renders for roles and active status, including conditional styling. It also enables edit and delete actions.

```tsx
import { UniRender } from "@unilab/ukit";

// Table view of all users
function UserTable() {
  return (
    <UniRender
      entity="user"
      source="demo"
      layout="table"
      config={{
        name: { label: "Full Name" },
        email: { label: "Email Address" },
        role: { 
          label: "Role",
          render: (value) => (
            <span className={`px-2 py-1 rounded text-xs ${
              value === 'admin' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'
            }`}>
              {value}
            </span>
          )
        },
        isActive: {
          label: "Status",
          render: (value) => (
            <span className={`px-2 py-1 rounded text-xs ${
              value ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
            }`}>
              {value ? 'Active' : 'Inactive'}
            </span>
          )
        }
      }}
      generalConfig={{
        showActions: true,
        actions: {
          edit: true,
          delete: true
        }
      }}
    />
  );
}
```

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

### Configure URPC for React Todo Application

Source: https://github.com/unify-procotol/unify/blob/main/examples/react-todo/README.md

Example TypeScript configuration for URPC, including plugin registration, middleware setup, entity-specific configurations, and global adapters.

```typescript
URPC.init({
  plugins: [TodoPlugin],
  middlewares: [Logging()],
  entityConfigs: {
    todo: {
      defaultSource: "mock"
    }
  },
  globalAdapters: [MockAdapter]
});
```

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

### Initialize URPC with Memory Adapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/memory.mdx

This example demonstrates the basic setup of URPC, initializing it with a custom plugin, configuring the 'user' entity to use 'memory' as its default source, and registering the `MemoryAdapter` globally.

```typescript
import { URPC } from "@unilab/urpc";
import { MemoryAdapter } from "@unilab/urpc-adapters";
import { UserEntity } from "./entities/user";

const MyPlugin = {
  entities: [UserEntity],
};

URPC.init({
  plugins: [MyPlugin],
  entityConfigs: {
    user: {
      defaultSource: "memory",
    },
  },
  globalAdapters: [MemoryAdapter],
});
```

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

### Install @unilab/ukit and Peer Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/packages/ukit/README.md

This snippet provides the necessary commands to install the @unilab/ukit library and its peer dependencies, including Tailwind CSS and shadcn/ui initialization. It ensures the environment is set up for development with the library.

```bash
npm install @unilab/ukit
npm install -D tailwindcss@^4.0.0 @tailwindcss/vite tailwindcss-animate
npx tailwindcss init
pnpm dlx shadcn@latest init
```

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

### Configure Dark Mode and Custom Theme Colors with CSS

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Provides CSS for enabling dark mode support and overriding default theme colors. It uses CSS variables within `@layer base` to define primary colors for the light theme and specific background/foreground colors for the dark theme.

```css
/* Optional: Custom theme overrides */
@layer base {
  :root {
    /* Override any color you want - others use defaults */
    --primary: 142 76% 36%;        /* Custom green */
    --primary-foreground: 0 0% 98%;
    /* No need to define all colors! */
  }

  .dark {
    /* Add dark mode overrides if needed */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}
```

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

### Example: Using URPC Global Utility Functions

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

This example demonstrates how to initialize the URPC client and then use the global `repo` function to create a wallet repository and fetch a wallet by address.

```typescript
import { repo, URPC } from "@unilab/urpc";
import { WalletEntity } from "@unilab/uniweb3/entities";

// Initialize client first
URPC.init({ baseUrl: "http://localhost:3000" });

// Use the convenience function
const walletRepo = repo<WalletEntity>({
  entity: "wallet",
  source: "solana",
});
const wallet = await walletRepo.findOne({
  where: { address: "11111111111111111111111111111112" }
});
```

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

### Create a Form for User Editing with UniRender

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Illustrates using `UniRender` with a 'form' layout to edit a specific user identified by an ID. It defines basic form fields for name, email, and role, and includes a query to fetch the specific user.

```tsx
import { UniRender } from "@unilab/ukit";

// Form view for editing specific user
function UserForm() {
  return (
    <UniRender
      entity="user"
      source="demo"
      layout="form"
      query={{
        where: { id: "1" }
      }}
      config={{
        name: { label: "Full Name" },
        email: { label: "Email Address" },
        role: { label: "Role" }
      }}
    />
  );
}
```

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

### Install URPC Core Package

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/middleware/logging.mdx

Instructions to install the `@unilab/urpc-core` package, which provides the logging middleware, using a package manager.

```package-install
@unilab/urpc-core
```

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

### Build React Todo Production Version

Source: https://github.com/unify-procotol/unify/blob/main/examples/react-todo/README.md

Command to build the optimized production-ready version of the React Todo application.

```bash
npm run build
```

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

### Install URPC Mock Adapter Package

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/mock.mdx

This command installs the `@unilab/urpc-adapters` package, which includes the Mock Adapter, using npm. This is the first step to integrate the Mock Adapter into a URPC project.

```bash
npm install @unilab/urpc-adapters
```

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

### URPC CLI Local Development Setup

Source: https://github.com/unify-procotol/unify/blob/main/packages/urpc-cli/README.md

A sequence of commands to set up the URPC CLI project for local development. This includes cloning the repository, installing project dependencies, building the source code, linking the CLI for local testing, and finally testing the linked CLI.

```bash
git clone https://github.com/unify-procotol/unify.git
cd unify/packages/urpc-cli
```

```bash
npm install
```

```bash
npm run build
```

```bash
npm link
```

```bash
urpc-cli create test-project
```

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

### Run Mimo Trading Pair Price Demo Client

Source: https://github.com/unify-procotol/unify/blob/main/dev/erc20-example/README.md

Command to execute the client-side demonstration for fetching Mimo trading pair prices, showcasing the plugin's functionality.

```bash
bun run client
```

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

### Deploy Both Projects Simultaneously

Source: https://github.com/unify-procotol/unify/blob/main/docs/DEPLOY.md

Demonstrates methods for deploying both the documentation site and Storybook concurrently. This includes a one-click deployment script and manual sequential deployment commands.

```bash
./deploy-all.sh
```

```bash
# Deploy documentation site
pnpm run cf:deploy

# Deploy Storybook
pnpm run storybook:cf:deploy
```

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

### Example: Using URPC Static Repository Methods

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

This example demonstrates how to use the static `URPC.repo` method to create a repository for a `WalletEntity`, specifying the entity name and source.

```typescript
import { URPC } from "@unilab/urpc";
import { WalletEntity } from "@unilab/uniweb3/entities";

const walletRepo = URPC.repo<WalletEntity>({
  entity: "wallet",
  source: "evm",
});
```

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

### Complete URPC Mock Adapter Usage Example

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/mock.mdx

This comprehensive TypeScript example demonstrates the full lifecycle of using the URPC Mock Adapter. It includes initializing URPC, creating multiple user records, and then querying all users, showcasing how to set up and interact with the in-memory data store for development and testing purposes.

```typescript
import { UserEntity } from "./entities/user";
import { repo, URPC } from "@unilab/urpc";
import { Plugin } from "@unilab/urpc-core";
import { Logging } from "@unilab/urpc-core/middleware";
import { MockAdapter } from "@unilab/urpc-adapters";

const MyPlugin: Plugin = {
  entities: [UserEntity],
};

URPC.init({
  plugins: [MyPlugin],
  middlewares: [Logging()],
  entityConfigs: {
    user: {
      defaultSource: "mock",
    },
  },
  globalAdapters: [MockAdapter],
});

async function demo() {
  // Create first user
  await repo<UserEntity>({
    entity: "user",
  }).create({
    data: {
      id: "1",
      name: "John Doe",
      email: "john.doe@example.com",
      avatar: "https://example.com/avatar.png",
    },
  });

  // Create second user
  await repo<UserEntity>({
    entity: "user",
  }).create({
    data: {
      id: "2",
      name: "Jane Doe",
      email: "jane.doe@example.com",
      avatar: "https://example.com/avatar.png",
    },
  });

  // Query all users
  const users = await repo({
    entity: "user",
  }).findMany();

  console.log("Users:", users);
}

demo();
```

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

### Install URPC Adapters Package

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/index.mdx

Instructions for installing the `@unilab/urpc-adapters` package using npm. This package provides various data storage solutions for the URPC framework.

```bash
npm install @unilab/urpc-adapters
```

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

### Install URPC Memory Adapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/memory.mdx

This snippet shows how to install the `@unilab/urpc-adapters` package using npm, which includes the Memory Adapter.

```bash
npm install @unilab/urpc-adapters
```

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

### IndexedDB Example UI Styling

Source: https://github.com/unify-procotol/unify/blob/main/dev/urpc/indexeddb.html

CSS rules defining the visual appearance of the IndexedDB adapter example application, including general page layout, container styling, button aesthetics, output display, and input group formatting.

```CSS
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
button { background: #007acc; color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 4px; cursor: pointer; }
button:hover { background: #005c99; }
.output { background: #f8f8f8; border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 4px; white-space: pre-wrap; font-family: monospace; max-height: 300px; overflow-y: auto; }
.input-group { margin: 10px 0; }
.input-group label { display: inline-block; width: 100px; font-weight: bold; }
.input-group input { padding: 5px; border: 1px solid #ddd; border-radius: 4px; width: 200px; }
```

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

### Display Filtered Admin Users in Cards with UniRender

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/getting-started.mdx

Shows how to render a filtered list of active admin users in a card layout using `UniRender`. It includes query parameters for filtering by role and active status, limiting results, and ordering by name, along with custom rendering for the role field.

```tsx
import { UniRender } from "@unilab/ukit";

// Card view with filtering
function AdminUsers() {
  return (
    <UniRender
      entity="user"
      source="demo"
      layout="card"
      query={{
        where: { role: "admin", isActive: true },
        limit: 10,
        orderBy: { name: "asc" }
      }}
      config={{
        name: { label: "Name" },
        email: { label: "Email" },
        role: { 
          label: "Role",
          render: (value) => (
            <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-xs">
              {value}
            </span>
          )
        }
      }}
    />
  );
}
```

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

### Initializing URPC Library

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/index.mdx

Provides the basic setup for the `@unilab/urpc` library, including enabling debug mode, registering plugins and middlewares, and configuring entity-specific defaults like `defaultSource` for data handling.

```tsx
import { URPC } from "@unilab/urpc";

URPC.init({
  enableDebug: true,
  plugins: [YourPlugin],
  middlewares: [],
  entityConfigs: {
    user: {
      defaultSource: "demo",
    },
  },
});
```

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

### Documentation Site Deployment Commands

Source: https://github.com/unify-procotol/unify/blob/main/docs/DEPLOY.md

Provides a set of commands for building, previewing, and deploying the documentation site to Cloudflare Pages. These commands manage the lifecycle of the documentation project.

```APIDOC
pnpm run build
  - Description: Builds the Next.js application for the documentation site.
pnpm run pages:build
  - Description: Builds the documentation site specifically for Cloudflare Pages deployment.
pnpm run preview
  - Description: Runs a local preview server for the documentation site.
pnpm run deploy
  - Description: Deploys the documentation site to Cloudflare Pages using the default project name.
pnpm run cf:deploy
  - Description: Deploys the documentation site to Cloudflare Pages, allowing for a specified project name.
```

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

### IndexedDB Example User Interface HTML

Source: https://github.com/unify-procotol/unify/blob/main/dev/urpc/indexeddb.html

HTML structure for the user interface of an IndexedDB adapter example, providing input fields for user details (ID, Name, Email, Avatar) and interactive buttons to trigger various database operations like create, find, update, delete, list, and clear.

```HTML
ID: <input type="text" id="userId"><br>
Name: <input type="text" id="userName"><br>
Email: <input type="text" id="userEmail"><br>
Avatar: <input type="text" id="userAvatar"><br>

<button id="createUser">Create User</button>
<button id="findUser">Find User</button>
<button id="updateUser">Update User</button>
<button id="deleteUser">Delete User</button>
<button id="listUsers">List All Users</button>
<button id="clearDb">Clear Database</button>

<div class="output" id="output">Waiting for operation...</div>
```

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

### Test Specific Trading Pair Price

Source: https://github.com/unify-procotol/unify/blob/main/dev/erc20-example/README.md

Command to test fetching the price for a single, specified trading pair, such as iotx/usdt, directly from the command line.

```bash
bun run test-pair iotx/usdt
```

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

### Install URPC IndexedDB Adapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/indexeddb.mdx

Command to install the IndexedDB Adapter package, which is part of the `@unilab/urpc-adapters` monorepo, using npm.

```bash
npm install @unilab/urpc-adapters
```

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

### Storybook Deployment Commands

Source: https://github.com/unify-procotol/unify/blob/main/docs/DEPLOY.md

Provides a set of commands for building, previewing, and deploying the Storybook instance to Cloudflare Pages. These commands manage the lifecycle of the Storybook project.

```APIDOC
pnpm run storybook:build
  - Description: Builds the Storybook application.
pnpm run storybook:preview
  - Description: Runs a local preview server for Storybook.
pnpm run storybook:deploy
  - Description: Deploys the Storybook instance to Cloudflare Pages using the default project name.
pnpm run storybook:cf:deploy
  - Description: Deploys the Storybook instance to Cloudflare Pages, allowing for a specified project name.
```

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

### Run Hono Server and URPC Client

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/integrations/hono.mdx

These commands demonstrate how to start the Hono server and run the URPC client using Bun, allowing you to test the integrated API.

```bash
bun run dev
# or
bun run server.ts
```

```bash
bun run client
# or  
bun run client.ts
```

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

### Complete URPC Example: Fetching and Creating Entities with Relations in TypeScript

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/relations.mdx

Provides a comprehensive example demonstrating client initialization, fetching users with their posts using `repo.findMany` and `joinRepo` for optimized relation handling, and creating a new user entity using `repo.create`. This snippet showcases a full workflow for interacting with the URPC library.

```typescript
import { UserEntity } from "./entities/user";
import { PostEntity } from "./entities/post";
import { repo, URPC, joinRepo } from "@unilab/urpc";

URPC.init({
  baseUrl: "http://localhost:3000",
  timeout: 10000,
});

const fetchUser = async () => {
  const data = await repo<UserEntity>({
    entity: "user",
    source: "demo",
  }).findMany({
    where: {
      id: "2",
    },
    include: {
      posts: (userList) => {
        const ids = userList.map((user) => user.id);
        
        // If you don't set the where parameter, you must use joinRepo, but in other cases you can use repo directly.
        return joinRepo<PostEntity, UserEntity>({
          entity: "post",
          source: "demo",
          localField: "id",
          foreignField: "userId",
        }).findMany({
          where: {
            userId: {
              $in: ids,
            },
          },
        });
      },
    },
  });
};

const createUser = async () => {
  const data = await repo<UserEntity>({
    entity: "user",
    source: "demo",
  }).create({
    data: {
      name: "John Doe",
      email: "john.doe@example.com",
      avatar: "https://example.com/avatar.jpg",
    },
  });
};

// Execute the functions
fetchUser();
createUser();
```

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

### Install URPC and UniWeb3 Dependencies for Next.js

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/plugins/uniweb3.mdx

Command to install the necessary `@unilab/urpc` and `@unilab/uniweb3` packages, along with their Next.js specific integrations, for a Web3 project.

```bash
npm install @unilab/urpc-next @unilab/urpc @unilab/urpc-core @unilab/uniweb3
```

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

### Install UniWeb3 Plugin Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/plugins/uniweb3.mdx

Installs the necessary packages for integrating UniWeb3 with different environments, including Hono, Next.js Pages Router, or standalone browser/Node.js applications.

```shell
npm install @unilab/urpc-hono @unilab/urpc @unilab/uniweb3
```

```shell
npm install @unilab/urpc-next @unilab/urpc @unilab/urpc-core @unilab/uniweb3 next react react-dom
```

```shell
npm install @unilab/urpc @unilab/urpc-core @unilab/uniweb3
```

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

### Install URPC CLI Globally or via npx

Source: https://github.com/unify-procotol/unify/blob/main/packages/urpc-cli/README.md

Instructions for installing the URPC CLI tool either globally using npm for persistent access or by using npx for a one-time execution without requiring a global installation.

```bash
npm install -g @unify/urpc-cli
```

```bash
npx @unify/urpc-cli create my-project
```

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

### Install Core URPC Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/basic-usage.mdx

Manually install the necessary URPC packages for Hono integration, core functionalities, and general URPC utilities. These packages form the foundation for building URPC applications.

```bash
@unilab/urpc-hono @unilab/urpc @unilab/urpc-core
```

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

### Create New URPC Project

Source: https://github.com/unify-procotol/unify/blob/main/packages/urpc-cli/README.md

Commands to initiate the creation of a new URPC project. Users can either run the `urpc-cli` command directly if installed globally, or use `npx` to execute it without prior installation.

```bash
urpc-cli create my-awesome-project
```

```bash
npx @unify/urpc-cli create my-awesome-project
```

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

### Run Next.js Development Server

Source: https://github.com/unify-procotol/unify/blob/main/docs/README.md

These commands initiate the development server for a Next.js application, allowing you to view the project locally. They are standard package manager commands for starting a development environment.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

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

### Example: URPC Next.js App Router Initialization

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

This example shows how to initialize URPC API handlers for the Next.js App Router by importing `URPC` and registering plugins, then exporting the generated HTTP methods.

```typescript
// app/api/[...urpc]/route.ts
import { URPC } from "@unilab/urpc-next";
import { WalletPlugin } from "@unilab/uniweb3";

const api = URPC.init({
  plugins: [WalletPlugin]
});

export const { GET, POST, PATCH, DELETE } = api;
```

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

### Install URPC and Hono Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/integrations/hono.mdx

This command installs the necessary npm packages for integrating URPC with Hono, including core URPC libraries, Hono itself, and the Hono Node.js server adapter.

```bash
npm install @unilab/urpc-hono @unilab/urpc @unilab/urpc-core @unilab/urpc-adapters hono @hono/node-server
```

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

### Install Project Dependencies

Source: https://github.com/unify-procotol/unify/blob/main/examples/urpc-agent/README.md

Instructions for installing project dependencies using popular Node.js package managers like npm, yarn, or pnpm.

```bash
npm install
```

```bash
yarn install
```

```bash
pnpm install
```

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

### Cloudflare CLI Login

Source: https://github.com/unify-procotol/unify/blob/main/docs/DEPLOY.md

Logs into the Cloudflare account using the Wrangler CLI tool. This is a prerequisite step before deploying to Cloudflare Pages.

```bash
npx wrangler login
```

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

### Run URPC Development Server

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/basic-usage.mdx

Commands to start the URPC server using either Bun or Node.js. These are common methods for launching a local development server to test and interact with the URPC application.

```bash
bun run server.ts
```

```bash
node server.js
```

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

### Advanced URPC Configuration with Multiple Adapters

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/memory.mdx

This example illustrates an advanced `URPC.init` configuration, demonstrating how to integrate multiple plugins, middlewares, and configure different default sources for various entities (e.g., 'memory' for 'user' and 'evm' for 'wallet').

```typescript
URPC.init({
  plugins: [MyPlugin, WalletPlugin],
  middlewares: [Logging()],
  entityConfigs: {
    user: {
      defaultSource: "memory",
    },
    wallet: {
      defaultSource: "evm", // Different adapter for wallet
    },
  },
  globalAdapters: [MemoryAdapter],
});
```

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

### UniRender Layout Examples

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/ukit/index.mdx

Illustrates how to use the UniRender component with different built-in layouts (Table, Card, Form, Grid) and apply specific query parameters to filter and order data for each layout type.

```tsx
// All users in a table
<UniRender
  entity="user"
  source="demo"
  layout="table"
  query={{
    where: { isActive: true },
    orderBy: { createdAt: "desc" }
  }}
/>
```

```tsx
// Products in card layout
<UniRender
  entity="product"
  source="demo"
  layout="card"
  query={{
    where: { category: "electronics" },
    limit: 12
  }}
/>
```

```tsx
// Edit specific user (auto-uses findOne)
<UniRender
  entity="user"
  source="demo"
  layout="form"
  query={{
    where: { id: "user-123" }
  }}
/>
```

```tsx
// Gallery items in grid
<UniRender
  entity="gallery"
  source="demo"
  layout="grid"
  query={{
    where: { published: true },
    orderBy: { likes: "desc" }
  }}
/>
```

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

### Initialize URPC with IndexedDB Adapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/indexeddb.mdx

Demonstrates how to import and initialize the URPC framework with the IndexedDB Adapter. This setup includes defining entities, middleware, and configuring a default source for specific entities.

```typescript
import { URPC } from "@unilab/urpc";
import { IndexedDBAdapter } from "@unilab/urpc-adapters";
import { UserEntity } from "./entities/user";
import { Logging } from "@unilab/urpc-core/middleware";

const MyPlugin = {
  entities: [UserEntity],
};

URPC.init({
  plugins: [MyPlugin],
  middlewares: [Logging()],
  entityConfigs: {
    user: {
      defaultSource: "indexeddb",
    },
  },
  globalAdapters: [IndexedDBAdapter],
});
```

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

### Server-Side URPC Repository Usage

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/basic-usage.mdx

Demonstrates how to interact with the URPC repository on the server, allowing data retrieval for entities like `WalletEntity`. This example shows querying a specific wallet address and network from an EVM source.

```typescript
import { URPC } from "@unilab/urpc-hono";

await URPC.repo<WalletEntity>({
  entity: "WalletEntity",
  source: "evm"
}).findOne({
  where: {
    address: "0x...",
    network: "ethereum"
  }
});
```

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

### Initialize Unify Protocol Project

Source: https://github.com/unify-procotol/unify/blob/main/README.md

This command uses the `urpc-cli` to create a new Unify Protocol project. It sets up the necessary directory structure and initial configuration, providing a quick start for development.

```bash
npx urpc-cli create my-project
```

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

### Initialize URPC with UniWeb3 Plugin on Server

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/plugins/uniweb3.mdx

Demonstrates how to register the UniWeb3 plugin within your URPC server setup for Hono or Next.js Pages Router, enabling blockchain functionalities.

```typescript
import { URPC } from "@unilab/urpc-hono";
import { WalletPlugin } from "@unilab/uniweb3";
import { Logging } from "@unilab/urpc-core/middleware";

// Register Web3 plugin
const app = URPC.init({
  plugins: [WalletPlugin],
  middlewares: [Logging()]
});

export default {
  port: 3000,
  fetch: app.fetch
};
```

```typescript
// pages/api/[...urpc].ts
import { URPC } from "@unilab/urpc-next/pages-router";
import { WalletPlugin } from "@unilab/uniweb3";
import { Logging } from "@unilab/urpc-core/middleware";

const handler = URPC.init({
  plugins: [WalletPlugin],
  middlewares: [Logging()]
});

export default handler;
```

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

### Implementing Global Middleware for URPC Operations

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

This example illustrates how to add global middleware to URPC operations using `useGlobalMiddleware`. It provides two common use cases: a logging middleware to track operation start and completion, and a caching middleware to store and retrieve results for `findMany` operations.

```typescript
import { useGlobalMiddleware } from "@unilab/urpc-core";

// Add logging middleware
useGlobalMiddleware(async (context, next) => {
  console.log(`${context.operation} started:`, context.args);
  const result = await next();
  console.log(`${context.operation} completed:`, result);
  return result;
}, {
  name: "logger",
  position: "around",
  priority: 1
});

// Add caching middleware
useGlobalMiddleware(async (context, next) => {
  if (context.operation === "findMany") {
    const cacheKey = JSON.stringify(context.args);
    const cached = cache.get(cacheKey);
    if (cached) return cached;
    
    const result = await next();
    cache.set(cacheKey, result);
    return result;
  }
  return next();
}, {
  name: "cache",
  position: "around",
  priority: 2
});
```

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

### Development and Production Build Commands for @unilab/ukit

Source: https://github.com/unify-procotol/unify/blob/main/packages/ukit/README.md

These commands facilitate the development and build processes for the @unilab/ukit package using Vite. They allow developers to run the project in watch mode for development, build it for production, and preview the production build.

```bash
# Development (watch mode)
npm run dev

# Build for production
npm run build

# Preview build
npm run preview
```

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

### Install URPC Core Package

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/middleware/hook.mdx

This command installs the `@unilab/urpc-core` package, which provides the necessary components for implementing Hook Middleware in your URPC application.

```Shell
npm install @unilab/urpc-core
```

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

### Initialize URPC Server with Plugins and Middleware

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/basic-usage.mdx

Set up a URPC server using `@unilab/urpc-hono`, integrating a `WalletPlugin` and `Logging` middleware. This demonstrates how to configure the server with custom functionalities and request processing layers.

```typescript
// server.ts
import { URPC } from "@unilab/urpc-hono";
import { WalletPlugin } from "@unilab/uniweb3";
import { Logging } from "@unilab/urpc-core/middleware";

const app = URPC.init({
  plugins: [WalletPlugin],
  middlewares: [Logging()]
});

export default {
  port: 3000,
  fetch: app.fetch
};
```

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

### Install Additional Dependencies for Next.js Pages Router

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/integrations/next.mdx

Installs `hono` and `@hono/node-server`, which are specifically required for handling API routes when using the Next.js Pages Router with URPC.

```shell
npm install @hono/node-server hono
```

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

### Install Core URPC Dependencies for Next.js

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/integrations/next.mdx

Installs the primary URPC packages required for Next.js integration, including the Next.js specific adapter, core URPC library, and web3 utilities.

```shell
npm install @unilab/urpc-next @unilab/urpc @unilab/urpc-core @unilab/uniweb3
```

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

### URPC Client Class and Methods (@unilab/urpc)

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

Documentation for the main client class in the `@unilab/urpc` library, used for interacting with URPC APIs. It covers the constructor for client configuration, the `createRepositoryProxy` instance method for entity-specific data access with relation loading, and the static `init` method for global client initialization.

```APIDOC
constructor(config: ClientConfig)
  - Initializes the URPC client with configuration options.
  - Parameters:
    - `config`: Client configuration options.

createRepositoryProxy<T extends Record<string, any>>(entity: string, source: string): Repository<T>
  - Creates a repository proxy for a specific entity and data source.
  - Parameters:
    - `entity`: Name of the entity.
    - `source`: Data source identifier.
  - Returns: Repository instance with client-side relation loading support.

static init(config: ClientConfig): void
  - Initializes the global client instance.
  - Parameters:
    - `config`: Client configuration options.
  - Example:
    import { URPC } from "@unilab/urpc";

    URPC.init({
      baseUrl: "http://localhost:3000",
      timeout: 10000,
      headers: {
        Authorization: "Bearer token",
      },
    });
```

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

### Create Next.js Project for Web3 App

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/plugins/uniweb3.mdx

Command to initialize a new Next.js project with TypeScript, Tailwind CSS, and a source directory structure, preparing it for Web3 application development.

```bash
npx create-next-app@latest my-web3-app --typescript --tailwind --src-dir
cd my-web3-app
```

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

### Example: URPC Next.js Pages Router Initialization

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/options.mdx

This example demonstrates how to initialize the URPC API handler for the Next.js Pages Router by importing `URPC` and exporting the initialized handler as the default export for an API route.

```typescript
// pages/api/[...urpc].ts
import { URPC } from "@unilab/urpc-next";
import { WalletPlugin } from "@unilab/uniweb3";

export default URPC.init({
  plugins: [WalletPlugin]
});
```

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

### Install Project Dependencies with Bun

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/reference/contributing.mdx

This command uses the Bun package manager to install all required dependencies for the URPC monorepo. It's a crucial step after cloning the repository to ensure all packages are properly set up for development and building.

```bash
bun install
```

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

### Create Data with Memory Adapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/memory.mdx

This snippet shows how to create a new record (user) using the `repo` function, explicitly specifying the `MemoryAdapter` as the source. It demonstrates the basic data creation process for an entity.

```typescript
import { repo } from "@unilab/urpc";

const newUser = await repo({
  entity: UserEntity,
  source: "memory",
}).create({
  data: {
    id: "1",
    name: "John Doe",
    email: "john@example.com",
  },
});
console.log("Created user:", newUser);
```

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

### Configure URPC Mock Adapter for Entities and Globally

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/mock.mdx

These TypeScript snippets demonstrate how to configure the URPC Mock Adapter. The first example shows setting `defaultSource: "mock"` for specific entities like 'user' and 'post'. The second example illustrates adding `MockAdapter` to the `globalAdapters` array to apply it across all entities, providing flexible configuration options.

```typescript
URPC.init({
  entityConfigs: {
    user: {
      defaultSource: "mock",
    },
    post: {
      defaultSource: "mock",
    },
  },
  globalAdapters: [MockAdapter],
});
```

```typescript
URPC.init({
  globalAdapters: [MockAdapter],
});
```

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

### Configure Hono Server with URPC and MockAdapter

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/integrations/hono.mdx

This TypeScript snippet demonstrates setting up a Hono server with URPC, initializing it with entities, configuring default sources using `MockAdapter`, and populating initial sample data.

```typescript
import { URPC } from "@unilab/urpc-hono";
import { UserEntity } from "./entities/user";
import { PostEntity } from "./entities/post";
import { Plugin } from "@unilab/urpc-core";
import { MockAdapter } from "@unilab/urpc-adapters";

const MyPlugin: Plugin = {
  entities: [UserEntity, PostEntity],
};

const app = URPC.init({
  plugins: [MyPlugin],
  entityConfigs: {
    user: {
      defaultSource: "mock",
    },
    post: {
      defaultSource: "mock",
    },
  },
  globalAdapters: [MockAdapter],
});

// Initialize sample data
await URPC.repo<UserEntity>({
  entity: "UserEntity",
  source: "mock",
}).create({
  data: {
    id: "1",
    name: "John Doe",
    email: "john.doe@example.com",
    avatar: "https://example.com/avatar.png",
  },
});

await URPC.repo<PostEntity>({
  entity: "PostEntity",
  source: "mock",
}).create({
  data: {
    id: "1",
    title: "Post 1",
    content: "Content 1",
    userId: "1",
  },
});

export default {
  port: 3000,
  timeout: 30000,
  fetch: app.fetch,
};
```

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

### Initialize URPC with Global Adapters and Create Entity

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/adapters/index.mdx

This TypeScript example demonstrates how to initialize the URPC framework by importing global adapters (Memory, Mock, IndexedDB) and defining a plugin with entities. It shows how to configure a default source for an entity and then use the URPC repository to create a new entity instance with specified data.

```typescript
import { URPC } from "@unilab/urpc";
import { MemoryAdapter, MockAdapter, IndexedDBAdapter } from "@unilab/urpc-adapters";
import { UserEntity } from "./entities/user";

const MyPlugin = {
  entities: [UserEntity],
};

URPC.init({
  plugins: [MyPlugin],
  entityConfigs: {
    user: {
      defaultSource: "memory", // Choose your adapter
    },
  },
  globalAdapters: [MemoryAdapter, MockAdapter, IndexedDBAdapter],
});

// Use the repository
const user = await repo({
  entity: UserEntity,
}).create({
  data: {
    id: "1",
    name: "John Doe",
    email: "john@example.com",
  },
});
```

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

### Query EVM Wallet Balance

Source: https://github.com/unify-procotol/unify/blob/main/docs/content/docs/urpc/plugins/uniweb3.mdx

Retrieves the balance for a specified address on an EVM-compatible network using the UniWeb3 WalletEntity. This example queries the Ethereum mainnet.

```typescript
// Get balance for a specific address on Ethereum mainnet
const evmWallet = await repo<WalletEntity>({
  entity: "wallet",
  source: "evm"
}).findOne({
  where: {
    address: "0x...",
    network: "ethereum"
  }
});

console.log("EVM Wallet:", evmWallet);
```