# Customize Sidebar

> |

- **Type:** Skill
- **Install:** `agentstack add skill-hec-ovi-agentickit-customize-sidebar`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [hec-ovi](https://agentstack.voostack.com/s/hec-ovi)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [hec-ovi](https://github.com/hec-ovi)
- **Source:** https://github.com/hec-ovi/agentickit/tree/main/.pilot/skills/customize-sidebar

## Install

```sh
agentstack add skill-hec-ovi-agentickit-customize-sidebar
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Customize Sidebar

## Contract

By the end of this skill the consumer has:

- A `` styled to match their app (CSS variables overridden on
  a parent scope).
- Labels localized or branded via the `labels` prop.
- (Optionally) suggestion chips pinned to common prompts.
- (Optionally) position / width / greeting customized.
- A clear decision about whether to keep using the bundled sidebar or
  build a custom one from `PilotChatContext`.

## Iron Law: don't copy-paste the sidebar source, override via CSS variables

The sidebar is ~350 lines split across four sibling files
(`packages/agentickit/src/components/pilot-sidebar*.tsx` + the styles
file). It uses CSS variables scoped with `--pilot-*`. See the exported
`pilotSidebarStyles` injection path in `pilot-sidebar.tsx` line 41 +
132-134. **Overriding via CSS variables on any parent is idempotent and
survives package upgrades. Patching the bundled styles via `!important`
or a fork is a maintenance landmine.**

## Phases

### Phase 1: inventory what the consumer wants to change

- **Colors / radius / shadow**: CSS variables, Phase 2.
- **Label text / placeholder / buttons**: `labels` prop, Phase 3.
- **Position (left/right) or width**: props, Phase 4.
- **Suggestion chips** on empty state: `suggestions` prop, Phase 5.
- **Fundamentally different layout** (bottom-anchored, inline, modal):
  build a custom UI from `PilotChatContext`, Phase 6.

### Phase 2: theme with CSS variables

Anywhere in the app's global CSS:

```css
:root {
  --pilot-bg: #fff;
  --pilot-fg: #0a0a0a;
  --pilot-accent: #7c3aed;          /* send button, toggle pill, focus */
  --pilot-user-bubble-bg: #ede9fe;
  --pilot-radius: 12px;
  --pilot-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
```

Dark mode works automatically via `prefers-color-scheme: dark` (see
`pilot-sidebar.tsx` line 257 in the header docstring). Consumers who want
to force light or dark mode set the variables on an ancestor with
`data-theme` or similar.

### Phase 3: override labels

All six labels are optional; omitted keys use the built-in English
defaults (see `DEFAULT_LABELS` in `pilot-sidebar.tsx` lines 91-98).

```tsx

```

The `openButton` and `closeButton` labels are important: they're used as
the `aria-label` on the toggle and close controls (lines 221-224, 258-260).
Localize them for accessibility.

### Phase 4: position and width

```tsx

```

`width` accepts a number (rendered as px) or any CSS length string
(`"32rem"`, `"50vw"`, `"clamp(320px, 30vw, 540px)"`). See lines 213-214.

`position` renders `data-position="left|right"` on the outer ``
(line 246). The bundled styles mirror the slide-in and toggle based on
that attribute.

### Phase 5: suggestion chips

Only shown when `messages.length === 0` (empty state). Clicking a chip
calls `sendMessage(chipText)` and focuses the composer (lines 189-195,
280-294).

```tsx

```

Four to six chips is the practical maximum before they wrap awkwardly.
Omit the prop entirely to hide the row.

### Phase 6: build a custom UI from `PilotChatContext`

Drop the bundled sidebar when:

- The app needs a bottom-anchored bar (ChatGPT-style), modal, inline
  thread, or slash-command input surface.
- The design system is strongly opinionated and CSS-variable theming
  isn't enough.

The chat surface reads from `PilotChatContext` (exported from
`packages/agentickit/src/context.ts`):

```tsx
import { useContext } from "react";
import { PilotChatContext } from "@hec-ovi/agentickit";   // still under 

function MyComposer() {
  const chat = useContext(PilotChatContext);
  if (!chat) return null;
  return (
     {
      e.preventDefault();
      const text = new FormData(e.currentTarget).get("q");
      if (typeof text === "string" && text.trim()) chat.sendMessage(text.trim());
    }}>
      
      Send
    
  );
}
```

`PilotChatContextValue` shape (from `context.ts` / `pilot-provider.tsx`
lines 434-445):

- `messages: UIMessage[]`
- `status: "idle" | "submitted" | "streaming" | "ready" | "error"`
- `error: Error | undefined`
- `isLoading: boolean` (derived: `status === "submitted" | "streaming"`)
- `sendMessage(text: string): Promise`
- `stop(): void`

Render `messages` however the design calls for. The parts array is
documented in the AI SDK's `UIMessage` type. For tool parts, check
`part.type === "tool-"` and `part.state === "output-available"`.

## Anti-Patterns

- `!important` overrides in a global stylesheet "because the sidebar's
  styles are too specific". The sidebar styles are low-specificity by
  design; if you need `!important`, you're probably targeting the wrong
  selector.
- Passing unstyled JSX into `greeting` that doesn't match the surrounding
  empty-state chrome. The `greeting` slot replaces the default empty
  text but keeps the parent `.pilot-empty` container.
- Building a custom UI that still renders `` hidden via
  `display: none`. Two copies of the message list re-render on every
  token. Pick one UI.
- Forgetting to wrap the sidebar (bundled or custom) in a ``
  provider. The chat context is a tree context; no provider, no chat.

## Output Format

After customization, report:

- The CSS variables overridden (if any).
- The labels / position / width / suggestions overridden (if any).
- Whether the consumer kept `` or built a custom UI from
  `PilotChatContext`.

## Tools Used

- Edit the consumer's global CSS to override `--pilot-*` variables.
- Edit the component that renders `` to pass props.
- Read `packages/agentickit/src/components/pilot-sidebar.tsx` to verify
  the prop shape and available labels.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [hec-ovi](https://github.com/hec-ovi)
- **Source:** [hec-ovi/agentickit](https://github.com/hec-ovi/agentickit)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-hec-ovi-agentickit-customize-sidebar
- Seller: https://agentstack.voostack.com/s/hec-ovi
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.