← ClaudeAtlas

iblai-vibe-agent-chatlisted

Add the in-process Chat SDK component (full agent surface — message stream, canvas, file attach, voice, prompts) to a Next.js app
iblai/vibe · ★ 15 · AI & Automation · score 76
Install: claude install-skill iblai/vibe
# /iblai-vibe-agent-chat Add the full ibl.ai agent chat surface — message stream, conversation starters, canvas, file attach, voice input, voice call, screen sharing, prompt gallery — to your Next.js app. Uses the `Chat` React component from `@iblai/iblai-js/web-containers/next`, which renders **in-process** (not in an iframe) and shares the host app's Redux store, providers, and auth session. ![Welcome state](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/skills/iblai-vibe-agent-chat/iblai-vibe-agent-chat-1-welcome.png) ![Message sent](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/skills/iblai-vibe-agent-chat/iblai-vibe-agent-chat-2-message-sent.png) > **Template (legacy `<mentor-ai>` widget):** a full-screen `<mentor-ai>` > web-component ChatWidget (distinct from the in-process `Chat` component > this skill documents) — bundled as > [`assets/chat-widget.tsx.j2`](assets/chat-widget.tsx.j2) + > [`assets/iblai-web-mentor.d.ts`](assets/iblai-web-mentor.d.ts). See > [`/iblai-vibe-scaffold`](../iblai-vibe-scaffold/SKILL.md) for the `{{ }}` contract. > **What you get:** the SDK's `Chat` component wired directly into your > app (in-process, not an iframe). Full feature surface, intercept > actions, shared auth/store with the rest of your app, themeable with > your Tailwind config. Do NOT add custom styles, colors, or CSS overrides to the SDK `Chat` component. It ships with its own styling. Keep the component as-is. Do NOT implement dark mode unless