iblai-invite

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/iblai-invite

Add user invitation features -- a dialog to invite new users to a tenant by email/username and a dialog showing pending invitations with status tracking.

AI Assistant: Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it.

When building custom UI around SDK components, use the ibl.ai brand:
Primary:
#0058cc
, Gradient:
linear-gradient(135deg, #00b0ef, #0058cc)
Button:
bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
Font: System sans-serif stack, Style: shadcn/ui new-york variant

Use shadcn components for custom UI -- they share the same Tailwind theme and render in ibl.ai brand colors automatically.
You MUST run
/iblai-test
before telling the user the work is ready.
After all work is complete, start a dev server (
pnpm dev
) so the user can see the result at http://localhost:3000.
iblai.env
is NOT a
.env.local
replacement — it only holds the 3 shorthand variables (
DOMAIN
,
PLATFORM
,
TOKEN
). Next.js still reads its runtime env vars from
.env.local
.
Use
pnpm
as the default package manager. Fall back to
npm
if pnpm is not installed. The generated app should live in the current directory, not in a subdirectory.

添加用户邀请功能——包含一个通过邮箱/用户名向租户邀请新用户的对话框，以及一个展示待处理邀请并支持状态追踪的对话框。

AI Assistant: 请勿为 ibl.ai SDK 组件添加自定义样式、颜色或 CSS 覆盖。它们自带默认样式，请保持组件原样。除非用户明确要求，否则不要实现深色模式。

在 SDK 组件之外构建自定义 UI 时，请遵循 ibl.ai 品牌规范：
主色:
#0058cc
, 渐变色:
linear-gradient(135deg, #00b0ef, #0058cc)
按钮:
bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
字体: 系统无衬线字体栈, 样式: shadcn/ui new-york 变体

自定义 UI 请使用 shadcn 组件——它们共用同一套 Tailwind 主题，会自动适配 ibl.ai 品牌色。
告知用户工作已完成前，你必须先运行
/iblai-test
。
所有工作完成后，启动开发服务器（
pnpm dev
），用户即可在 http://localhost:3000 查看效果。
iblai.env
不能替代
.env.local
——它仅存储3个简写变量（
DOMAIN
、
PLATFORM
、
TOKEN
）。Next.js 仍会从
.env.local
读取运行时环境变量。
默认使用
pnpm
作为包管理器，若未安装 pnpm 则回退到
npm
。生成的应用需放在当前目录下，不要放在子目录中。

Prerequisites

前置条件

Auth must be set up first (
```
/iblai-auth
```
)
MCP and skills must be set up:
```
iblai add mcp
```
User must have admin privileges on the tenant to send invitations

需先完成 Auth 配置（
```
/iblai-auth
```
）
需完成 MCP 和 skill 配置：运行
```
iblai add mcp
```
用户需拥有租户的管理员权限才能发送邀请

Step 0: Check for CLI Updates

步骤0：检查 CLI 更新

Before running any

iblai

command, ensure the CLI is up to date. Run

iblai --version

to check the current version, then upgrade directly:

pip:
```
pip install --upgrade iblai-app-cli
```
npm:
```
npm install -g @iblai/cli@latest
```

This is safe to run even if already at the latest version.

运行任何

iblai

命令前，请先确保 CLI 是最新版本。运行

iblai --version

查看当前版本，然后直接升级：

pip:
```
pip install --upgrade iblai-app-cli
```
npm:
```
npm install -g @iblai/cli@latest
```

即使当前已经是最新版本，运行该命令也是安全的。

Step 1: Check Environment

步骤1：检查环境

Before proceeding, check for a

iblai.env

in the project root. Look for

PLATFORM

DOMAIN

, and

TOKEN

variables. If the file does not exist or is missing these variables, tell the user: "You need an

iblai.env

with your platform configuration. Download the template and fill in your values:

curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env

继续操作前，请检查项目根目录是否存在

iblai.env

文件，确认包含

PLATFORM

、

DOMAIN

和

TOKEN

变量。如果文件不存在或缺少这些变量，请告知用户： "你需要一个包含平台配置的

iblai.env

文件。下载模板并填写你的配置值：

curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env

Step 2: Add the Components

步骤2：添加组件

There is no dedicated CLI generator for invite dialogs. Import the components directly from the SDK:

typescript

import { InviteUserDialog, InvitedUsersDialog } from "@iblai/iblai-js/web-containers";

邀请对话框没有专属的 CLI 生成器，直接从 SDK 导入组件即可：

typescript

import { InviteUserDialog, InvitedUsersDialog } from "@iblai/iblai-js/web-containers";

Step 3: Use MCP Tools for Customization

步骤3：使用 MCP 工具自定义

get_component_info("InviteUserDialog")
get_component_info("InvitedUsersDialog")

get_component_info("InviteUserDialog")
get_component_info("InvitedUsersDialog")

<InviteUserDialog>

Props

<InviteUserDialog>

属性

Dialog to invite a user to the current tenant by email or username.

Prop	Type	Description
`isOpen`	`boolean`	Whether the dialog is visible
`onClose`	`() => void`	Close callback
`org`	`string`	Tenant/org key

用于通过邮箱或用户名向当前租户邀请用户的对话框。

Prop	类型	描述
`isOpen`	`boolean`	对话框是否可见
`onClose`	`() => void`	关闭回调函数
`org`	`string`	租户/组织 key

<InvitedUsersDialog>

Props

<InvitedUsersDialog>

属性

Dialog showing pending invitations with their status (accepted, pending, expired).

Prop	Type	Description
`isOpen`	`boolean`	Whether the dialog is visible
`onClose`	`() => void`	Close callback
`org`	`string`	Tenant/org key

展示待处理邀请及其状态（已接受、待处理、已过期）的对话框。

Prop	类型	描述
`isOpen`	`boolean`	对话框是否可见
`onClose`	`() => void`	关闭回调函数
`org`	`string`	租户/组织 key

Example Usage

使用示例

Add invite buttons to an admin settings page or account page:

tsx

"use client";
import { useState } from "react";
import { InviteUserDialog, InvitedUsersDialog } from "@iblai/iblai-js/web-containers";
import { Button } from "@/components/ui/button";
import { resolveAppTenant } from "@/lib/iblai/tenant";

export function InviteSection() {
  const [showInvite, setShowInvite] = useState(false);
  const [showPending, setShowPending] = useState(false);
  const tenant = resolveAppTenant();

  return (
    <div className="flex gap-2">
      <Button onClick={() => setShowInvite(true)}>Invite User</Button>
      <Button variant="outline" onClick={() => setShowPending(true)}>
        View Pending
      </Button>
      <InviteUserDialog
        isOpen={showInvite}
        onClose={() => setShowInvite(false)}
        org={tenant}
      />
      <InvitedUsersDialog
        isOpen={showPending}
        onClose={() => setShowPending(false)}
        org={tenant}
      />
    </div>
  );
}

在管理设置页面或账户页面添加邀请按钮：

tsx

"use client";
import { useState } from "react";
import { InviteUserDialog, InvitedUsersDialog } from "@iblai/iblai-js/web-containers";
import { Button } from "@/components/ui/button";
import { resolveAppTenant } from "@/lib/iblai/tenant";

export function InviteSection() {
  const [showInvite, setShowInvite] = useState(false);
  const [showPending, setShowPending] = useState(false);
  const tenant = resolveAppTenant();

  return (
    <div className="flex gap-2">
      <Button onClick={() => setShowInvite(true)}>Invite User</Button>
      <Button variant="outline" onClick={() => setShowPending(true)}>
        View Pending
      </Button>
      <InviteUserDialog
        isOpen={showInvite}
        onClose={() => setShowInvite(false)}
        org={tenant}
      />
      <InvitedUsersDialog
        isOpen={showPending}
        onClose={() => setShowPending(false)}
        org={tenant}
      />
    </div>
  );
}

Step 4: Verify

步骤4：验证

Run

/iblai-test

before telling the user the work is ready:

```
pnpm build
```
-- must pass with zero errors

Start dev server and verify dialogs open correctly:

bash

pnpm dev &
npx playwright screenshot http://localhost:3000 /tmp/invite.png

告知用户工作已完成前请运行

/iblai-test

：

```
pnpm build
```
-- 必须零错误通过

启动开发服务器，验证对话框可正常打开：

bash

pnpm dev &
npx playwright screenshot http://localhost:3000 /tmp/invite.png

Important Notes

重要注意事项

Import:
```
@iblai/iblai-js/web-containers
```
-- framework-agnostic
Admin only: Invitation features require admin privileges on the tenant
Redux store: Must include
```
mentorReducer
```
and
```
mentorMiddleware
```
initializeDataLayer()
: 5 args (v1.2+)
@reduxjs/toolkit
: Deduplicated via webpack aliases in
```
next.config.ts
```
Brand guidelines: BRAND.md

导入路径:
```
@iblai/iblai-js/web-containers
```
-- 不绑定特定框架
仅管理员可用: 邀请功能需要用户拥有租户的管理员权限
Redux store: 必须包含
```
mentorReducer
```
和
```
mentorMiddleware
```
initializeDataLayer()
: 需传入5个参数（v1.2及以上版本）
@reduxjs/toolkit
: 通过
```
next.config.ts
```
中的 webpack 别名去重
品牌规范: BRAND.md

iblai-invite

Original

Translation

/iblai-invite

/iblai-invite

Prerequisites

前置条件

Step 0: Check for CLI Updates

步骤0：检查 CLI 更新

Step 1: Check Environment

步骤1：检查环境

Step 2: Add the Components

步骤2：添加组件

Step 3: Use MCP Tools for Customization

步骤3：使用 MCP 工具自定义

`<InviteUserDialog>`
Props

`<InviteUserDialog>`
属性

`<InvitedUsersDialog>`
Props

`<InvitedUsersDialog>`
属性

Example Usage

使用示例

Step 4: Verify

步骤4：验证

Important Notes

重要注意事项