How do I install the Chat Bubble skill?

Run npx skillmds@latest add reaviz/chat-bubble in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Chat Bubble skill do?

ChatBubble It is listed under Coding & Dev Tools on SkillMD.

Is Chat Bubble safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chat Bubble?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chat Bubble free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chat Bubble?

reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chat Bubble by reaviz — Agent Skill

Name: Chat Bubble
Author: reaviz

File contents

ChatBubble

Floating chat bubble launcher — renders a clickable trigger and toggles a popover containing the chat UI. Built on reablocks ConnectedOverlay (Floating UI under the hood).

Import

import { ChatBubble } from 'reachat';
import type { Placement, Modifiers } from 'reablocks';

Props

Prop	Type	Default	Description
`bubbleContent`	`ReactNode`	—	Content rendered inside the trigger element (the always-visible bubble)
`children`	`ReactNode`	—	Content rendered inside the floating popover when open
`position`	`Placement`	`'right-end'`	Floating UI placement (e.g. `'top'`, `'bottom-start'`, `'left-end'`)
`modifiers`	`Modifiers`	`[offset({ mainAxis: 0, crossAxis: -40 })]`	Floating UI middleware overrides
`className`	`string`	—	Class for the trigger wrapper

Click the trigger to open / close. The component manages its own isOpen state.

Usage

<ChatBubble
  bubbleContent={
    <button className="rounded-full p-3 bg-primary text-white shadow-lg">
      <ChatIcon />
    </button>
  }
  position="top-end"
>
  <Chat
    sessions={sessions}
    activeSessionId={activeId}
    viewType="companion"
   
  >
    <SessionMessagePanel>
      <SessionMessages />
      <ChatInput />
    </SessionMessagePanel>
  </Chat>
</ChatBubble>

For a floating chat bubble experience, pair ChatBubble with viewType="companion" so the chat surface fits within the popover.

Frequently asked questions

Chat Bubble