Customize Sidebar

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:

: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).

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

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).

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):

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
• Source: hec-ovi/agentickit
• License: MIT

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