# Add Channel Slack Block Kit Embed

> Switch Slack channel to Block Kit Embed rich display with colored left-border attachments. Triggers on "add slack embed", "enable slack embed", "slack block kit embed", "rich slack embed", "slack embed 表示".

- Skill: `yukihirop/add-channel-slack-block-kit-embed` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yukihirop/add-channel-slack-block-kit-embed`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yukihirop/add-channel-slack-block-kit-embed/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: yukihirop (https://skillmd.com/u/yukihirop)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yukihirop/add-channel-slack-block-kit-embed

---


# Switch to Slack Block Kit Embed Display

## Step 0: Language selection

Before proceeding with any other steps in this skill, ask the user which language to continue in using `AskUserQuestion`. Keep this initial prompt in English because the preferred language is not yet known.

- Question: `Which language should I continue in?`
- Options: `English`, `日本語 (Japanese)`

Use the selected language for all subsequent user-facing messages and for every further `AskUserQuestion` prompt in this skill. Do not translate code, file paths, shell commands, or file contents.

Switch Slack rendering to the Block Kit **Embed** variant, which wraps Block Kit blocks in Slack `attachments` with a `color` field. This renders a colored vertical bar on the left of each message — matching the look of the Discord Embed display mode.

**Note:** Block Kit Embed is the **default** that ships with `deploy/templates/host/entry.template.ts`. Use this skill only if a previous customization downgraded the import (e.g. to `@nagi/channel-slack` or `@nagi/channel-slack-block-kit`) and you want to restore the default rich display.

**Before (plain Block Kit):** Formatted blocks without a colored side bar.
**After (Embed):** Same Block Kit content, but each message has a colored left border — blurple for agent replies, per-tool colors for tool notifications, gray for thinking / 💰 cost footer.

## Prerequisites

Slack must already be configured (either `@nagi/channel-slack` or `@nagi/channel-slack-block-kit`). If not, run `/add-channel-slack` first.

## Steps

### 1. Check current state

Read `deploy/{ASSISTANT_NAME}/host/entry.ts` and check which Slack import is used:

```typescript
// Plain text
const { createSlackFactory } = await import("@nagi/channel-slack");

// Block Kit (no colored bar)
const { createSlackFactory } = await import("@nagi/channel-slack-block-kit");

// Block Kit Embed (colored left bar — default; this skill)
const { createSlackFactory } = await import("@nagi/channel-slack-block-kit-embed");
```

If already using `@nagi/channel-slack-block-kit-embed`, tell the user it's already enabled (this is the shipped default).

### 2. Switch import

In `deploy/{ASSISTANT_NAME}/host/entry.ts`, replace the Slack import:

```typescript
// Before
const { createSlackFactory } = await import("@nagi/channel-slack-block-kit");

// After
const { createSlackFactory } = await import("@nagi/channel-slack-block-kit-embed");
```

No other changes needed — the factory function, config, and registration are identical.

### 3. Verify

```bash
pnpm exec tsc --noEmit
```

TypeScript must compile without errors.

### 4. Restart nagi

```bash
launchctl kickstart -k gui/$(id -u)/com.nagi.{ASSISTANT_NAME}
sleep 2
launchctl list | grep com.nagi.{ASSISTANT_NAME}
```

### 5. Test

Tell user:

> Send a message in Slack (e.g. `@ai こんばんは`).
> The agent reply should now appear with a **blurple left border**, and the cost footer (`💰 ...`) should appear right after with a **gray left border**. Tool notifications during the response get per-tool colors (Bash blue, Read green, etc.).

## Reverting

To switch back to plain Block Kit (no colored bar):

```typescript
const { createSlackFactory } = await import("@nagi/channel-slack-block-kit");
```

Or all the way back to plain text:

```typescript
const { createSlackFactory } = await import("@nagi/channel-slack");
```

Then restart nagi.