Add the agent Privacy tab (PII detection and filtering with redact/mask/block actions, entity-type selection, and AI-response filtering) to your Next.js app
15 stars
0 votes
0 copies
1 view
Added September 2, 2026
developmentbashnextjsgit
Works with
cli
mcp
Security analysis
C67/100
criticalExfiltrates credentials via HTTP — exact pattern from Snyk ToxicSkills study
mediumInstalls packages at runtime which could introduce malicious dependencies
Installs into .claude/skills of the current project.
Are you the author of Iblai Vibe Agent Privacy?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/iblai-iblai-vibe-agent-privacy)
---
name: iblai-vibe-agent-privacy
description: Add the agent Privacy tab (PII detection and filtering with redact/mask/block actions, entity-type selection, and AI-response filtering) to your Next.js app
globs:
alwaysApply: false
metadata:
kind: ui
---
# /iblai-vibe-agent-privacy
Add the agent **Privacy tab** -- detect and filter personally
identifiable information (PII) from chat messages. A master "Enable
Privacy Router" toggle reveals the action taken when PII is detected
(**Redact**, **Mask**, or **Block**), an optional block message, a set
of entity-type chips (Person, Email, Phone, SSN, Credit Card, Location,
Date/Time, Passport, Driver's License, IP Address, IBAN, Medical
License, Bank Number), and an "Also filter AI responses" toggle. This is
one tab in the wider agent-settings family. All tabs share the same
`AgentSettingsProvider` wrapper.




> **Common setup (brand, conventions, env files, verification):** see [docs/skill-setup.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/docs/skill-setup.md).
## Prerequisites
- Auth must be set up first (`/iblai-vibe-auth`)
- MCP server + skills configured (`@iblai/mcp` in `.mcp.json`)
- `AgentSettingsProvider` must wrap the route (see `/iblai-vibe-agent-setting`
Step 2 if not already set up)
- Ask the user for a real `mentorId` (agent UUID). Do NOT invent one.
## Step 1: Check Environment
Before proceeding, check for an `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`"
## Step 2: Mount `AgentPrivacyTab`
```tsx
// app/(app)/agents/[mentorId]/privacy/page.tsx
"use client";
import { AgentPrivacyTab } from "@iblai/iblai-js/web-containers/next";
export default function AgentPrivacyPage() {
return (
<div className="flex h-full flex-col bg-white">
<AgentPrivacyTab />
</div>
);
}
```
The tab reads `tenantKey`, `mentorId`, and `username` from the nearest
`<AgentSettingsProvider>`. The master **Enable Privacy Router** toggle
gates every dependent control — action, block message, entity types, and
the AI-response filter only render when the router is on. The default
action is **Redact**; the **Block Message** field only appears when the
action is **Block**.
### With identity overrides
When the tab is not rendered inside an `<AgentSettingsProvider>`, pass
identity explicitly:
```tsx
<AgentPrivacyTab
tenantKey="my-tenant"
mentorId="00000000-0000-0000-0000-000000000000"
username="learner@example.com"
/>;
```
### With RBAC and gated mutations
```tsx
<AgentPrivacyTab
enableRBAC
executeGatedAction={(fn) => withConfirm(fn)}
/>;
```
`enableRBAC` honors field-level permissions from agent settings (each
field — `enable_privacy_router`, `privacy_action`, `privacy_response`,
`privacy_entities`, `enable_privacy_output_filter` — can be
independently disabled). `executeGatedAction` wraps every save so the
host app can interpose a confirmation or upgrade gate.
## Step 3: Customize Labels (Optional)
```tsx
import { AgentPrivacyTab } from "@iblai/iblai-js/web-containers/next";
<AgentPrivacyTab
labels={{
header: { title: "Data privacy", description: "Filter PII from chats." },
}}
/>;
```
## Step 4: Use MCP Tools for Customization
```
get_component_info("AgentPrivacyTab")
get_component_info("AgentSettingsProvider")
```
## `<AgentPrivacyTab>` Props
Import from `@iblai/iblai-js/web-containers/next`.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `labels` | `DeepPartial<PrivacyTabLabels>` | No | Override user-visible strings (header, field labels, tooltips, action descriptions, entity labels, toasts) |
| `tenantKey` | `string` | No | Identity override. Defaults to the nearest `<AgentSettingsProvider>` |
| `mentorId` | `string` | No | Agent UUID override. Defaults to the provider |
| `username` | `string` | No | Username override. Defaults to the provider |
| `enableRBAC` | `boolean` | No | Honor per-field permissions from agent settings. Defaults to the provider value or `false` |
| `executeGatedAction` | `(fn: () => unknown) => unknown` | No | Wrap each save mutation (e.g. confirmation/upgrade gate). Defaults to the provider value |
## Related Exports
From `@iblai/iblai-js/web-containers/next`:
- `AGENT_PRIVACY_TAB_LABELS` -- the default agent-facing label bundle.
- `PrivacyTabLabels` -- type for the full label bundle.
The privacy action and entity-type vocabularies are owned by the data
layer (`@iblai/data-layer`): `PRIVACY_ACTIONS`, `PRIVACY_ENTITY_TYPES`,
and the `PrivacyAction` / `PrivacyEntityType` types.
## Step 5: Verify
Run `/iblai-vibe-ops-test` before telling the user the work is ready:
1. `pnpm build` -- must pass with zero errors
2. `pnpm test` -- vitest must pass
3. Start dev server and touch test:
```bash
pnpm dev &
npx playwright screenshot http://localhost:3000/agents/<id>/privacy /tmp/agent-privacy.png
```
## Important Notes
- **Redux store**: Must include `mentorReducer` and `mentorMiddleware`
- **`initializeDataLayer()`**: 5 args (v1.2+)
- **`@reduxjs/toolkit`**: Deduplicated via webpack aliases in `next.config.ts`
- **Peer deps**: `sonner` and `@iblai/iblai-web-mentor` must be installed
(`pnpm add sonner @iblai/iblai-web-mentor`)
- **Shared provider**: `AgentSettingsProvider` must wrap the route at a
layout level. See `/iblai-vibe-agent-setting` Step 2 for the full snippet.
- **JSON settings endpoint**: Privacy fields are persisted via the JSON
`/settings/` mutation (not the multipart variant) so array fields like
`privacy_entities` round-trip cleanly. The tab refetches agent
settings after each save because that mutation does not invalidate the
settings cache tag.
- **Action descriptions**: Redact replaces PII with its type
(`Email [EMAIL_ADDRESS]`); Mask hides it behind asterisks
(`Email ***********`); Block rejects the message and shows your block
message. Empty entity types means "use defaults".
- **Brand guidelines**: [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md)