'use client' import { useTheme } from 'next-themes' import Link from 'next/link' import { useEffect, useState } from 'react' // ============================================================ // Platform Icon Components (128x128 viewBox with brand colors) // ============================================================ function SlackIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Slack icon ) } function DiscordIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Discord icon ) } function TeamsIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Teams icon ) } function TelegramIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Telegram icon ) } function WhatsAppIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( WhatsApp icon ) } function KakaoTalkIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( KakaoTalk icon ) } function LineIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( LINE icon ) } function InstagramIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Instagram icon ) } function ChannelTalkIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Channel Talk icon ) } function WebexIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( Webex icon ) } function WeChatIcon({ className, style }: { className?: string; style?: React.CSSProperties }) { return ( WeChat icon ) } // ============================================================ // Feature Icons (Lucide-style, stroke-based) // ============================================================ function ShieldIcon({ className }: { className?: string }) { return ( ) } function UserIcon({ className }: { className?: string }) { return ( ) } function TerminalIcon({ className }: { className?: string }) { return ( ) } function CpuIcon({ className }: { className?: string }) { return ( ) } function ZapIcon({ className }: { className?: string }) { return ( ) } function DatabaseIcon({ className }: { className?: string }) { return ( ) } // ============================================================ // Utility Components // ============================================================ function CopyButton({ text }: { text: string }) { const [copied, setCopied] = useState(false) return ( ) } function ThemeToggle() { const [mounted, setMounted] = useState(false) const { setTheme, resolvedTheme } = useTheme() useEffect(() => { setMounted(true) }, []) if (!mounted) { return
} return ( ) } // ============================================================ // Terminal Block Component // ============================================================ function TerminalBlock({ title, copyText, children }: { title?: string; copyText: string; children: React.ReactNode }) { return (
{title ?? 'terminal'} 
        {children}
) } // ============================================================ // Platform Terminal (cycling demo) // ============================================================ function PlatformTerminal() { const [active, setActive] = useState(0) const [paused, setPaused] = useState(false) useEffect(() => { if (paused) return const timer = setInterval(() => { setActive((prev) => (prev + 1) % TERMINAL_DEMOS.length) }, 3500) return () => clearInterval(timer) }, [paused]) const demo = TERMINAL_DEMOS[active] return (
setPaused(true)} onMouseLeave={() => setPaused(false)} >
agent-messenger 'cmd' in c) .map((c) => c.cmd) .join('\n')} />
{TERMINAL_DEMOS.map((d, i) => ( ))} 
        
          {demo.commands.map((line, i) => (
            
              {'cmd' in line ? (
                <>
                  {line.prompt}
                  {line.cmd}
                
              ) : (
                <>
                  {'  '}
                  {line.output}
                
              )}
              {i < demo.commands.length - 1 ? '\n' : ''}
            
          ))}
) } // ============================================================ // Data // ============================================================ const FEATURES = [ { icon: , title: 'Auto-Extract Auth', description: 'Reads tokens from Slack, Discord, Teams, KakaoTalk, and Channel Talk desktop apps. Telegram and WhatsApp authenticate with a one-time code — still under a minute.', }, { icon: , title: 'Act As Yourself', description: 'Extracts your user session — not a bot token. Your agent sends messages, reacts, and searches as you. Need bot mode? Bot CLIs are included too.', }, { icon: , title: 'One Interface', description: 'Same command patterns across 7 platforms: message send, message search, channel list, snapshot. Learn once.', }, { icon: , title: 'Agent-Native Output', description: 'JSON by default for LLM tool use. --pretty for human-readable. Structured output your agent can parse and act on.', }, { icon: , title: 'Token Efficient', description: 'CLI, not MCP. One skill file, one shell command per action. No server to run, no tool registration.', }, { icon: , title: 'Persistent Memory', description: 'Stores workspace IDs, channel mappings, and preferences in ~/.config so your agent never asks twice.', }, ] const TERMINAL_DEMOS = [ { platform: 'Slack', commands: [ { prompt: '$ ', cmd: 'agent-slack message search "deployment rollback"' }, { output: '✓ 7 messages found in #incidents' }, { prompt: '$ ', cmd: 'agent-slack message replies incidents 1711234567.123456' }, { output: '✓ 14 replies loaded' }, { prompt: '$ ', cmd: 'agent-slack message send incidents "Postmortem draft ready"' }, { output: '✓ Message sent to #incidents' }, ], }, { platform: 'Discord', commands: [ { prompt: '$ ', cmd: 'agent-discord snapshot' }, { output: '✓ 12 channels, 48 members, recent activity captured' }, { prompt: '$ ', cmd: 'agent-discord message search "API redesign"' }, { output: '✓ Found 8 messages' }, { prompt: '$ ', cmd: 'agent-discord message send 1098765432 "Summary posted"' }, { output: '✓ Message sent' }, ], }, { platform: 'Teams', commands: [ { prompt: '$ ', cmd: 'agent-teams channel list 19:abc' }, { output: '✓ 8 channels in Engineering team' }, { prompt: '$ ', cmd: 'agent-teams message list 19:abc 19:general --limit 5' }, { output: '✓ 5 messages loaded' }, { prompt: '$ ', cmd: 'agent-teams message send 19:abc 19:general "Standup notes"' }, { output: '✓ Message sent' }, ], }, { platform: 'Telegram', commands: [ { prompt: '$ ', cmd: 'agent-telegram chat search "engineering"' }, { output: '✓ 3 matching chats found' }, { prompt: '$ ', cmd: 'agent-telegram message list 12345 --limit 10' }, { output: '✓ 10 messages loaded' }, { prompt: '$ ', cmd: 'agent-telegram message send 12345 "CI green, merging now"' }, { output: '✓ Message sent' }, ], }, { platform: 'WhatsApp', commands: [ { prompt: '$ ', cmd: 'agent-whatsapp chat list --limit 5' }, { output: '✓ 5 recent chats loaded' }, { prompt: '$ ', cmd: 'agent-whatsapp message list 1234@s.whatsapp.net' }, { output: '✓ 10 messages loaded' }, { prompt: '$ ', cmd: 'agent-whatsapp message react 1234@s.whatsapp.net msg123 👍' }, { output: '✓ Reaction added' }, ], }, { platform: 'KakaoTalk', commands: [ { prompt: '$ ', cmd: 'agent-kakaotalk chat list' }, { output: '✓ 12 chat rooms loaded' }, { prompt: '$ ', cmd: 'agent-kakaotalk message list 9876543210 -n 10' }, { output: '✓ 10 messages loaded' }, { prompt: '$ ', cmd: 'agent-kakaotalk message send 9876543210 "Build passed, deploying now"' }, { output: '✓ Message sent' }, ], }, { platform: 'Channel Talk', commands: [ { prompt: '$ ', cmd: 'agent-channeltalk message search "billing issue"' }, { output: '✓ 4 messages found across 2 chats' }, { prompt: '$ ', cmd: 'agent-channeltalk message list user-chat 6812abc' }, { output: '✓ 15 messages loaded' }, { prompt: '$ ', cmd: 'agent-channeltalk message send user-chat 6812abc "Refund processed"' }, { output: '✓ Message sent' }, ], }, ] const PLATFORMS = [ { name: 'Slack', href: '/docs/cli/slack', Icon: SlackIcon, color: '#4A154B', glowColor: 'rgba(74,21,75,0.4)' }, { name: 'Discord', href: '/docs/cli/discord', Icon: DiscordIcon, color: '#5865F2', glowColor: 'rgba(88,101,242,0.4)', }, { name: 'Teams', href: '/docs/cli/teams', Icon: TeamsIcon, color: '#6264A7', glowColor: 'rgba(98,100,167,0.4)' }, { name: 'Webex', href: '/docs/cli/webex', Icon: WebexIcon, color: '#07C3F2', glowColor: 'rgba(7,195,242,0.4)' }, { name: 'Telegram', href: '/docs/cli/telegram', Icon: TelegramIcon, color: '#2AABEE', glowColor: 'rgba(42,171,238,0.4)', }, { name: 'WhatsApp', href: '/docs/cli/whatsapp', Icon: WhatsAppIcon, color: '#25D366', glowColor: 'rgba(37,211,102,0.4)', }, { name: 'LINE', href: '/docs/cli/line', Icon: LineIcon, color: '#06C755', glowColor: 'rgba(6,199,85,0.4)' }, { name: 'WeChat', href: '/docs/cli/wechatbot', Icon: WeChatIcon, color: '#07C160', glowColor: 'rgba(7,193,96,0.4)' }, { name: 'Instagram', href: '/docs/cli/instagram', Icon: InstagramIcon, color: '#E4405F', glowColor: 'rgba(228,64,95,0.4)', }, { name: 'KakaoTalk', href: '/docs/cli/kakaotalk', Icon: KakaoTalkIcon, color: '#FEE500', glowColor: 'rgba(254,229,0,0.4)', }, { name: 'Channel Talk', href: '/docs/cli/channeltalk', Icon: ChannelTalkIcon, color: '#3B3FE4', glowColor: 'rgba(59,63,228,0.4)', }, ] const HOW_IT_WORKS = [ { step: 1, title: 'Install', code: 'npm install -g agent-messenger', description: 'Installs agent-slack, agent-discord, agent-teams, agent-telegram, agent-whatsapp, agent-line, agent-instagram, agent-kakaotalk, agent-channeltalk, plus bot variants.', }, { step: 2, title: 'Run', code: 'agent-slack snapshot --pretty', description: 'Slack, Discord, Teams, KakaoTalk, and Channel Talk tokens are read from your desktop app automatically. Telegram and WhatsApp authenticate with a one-time code.', }, { step: 3, title: 'Teach Your Agent', code: 'npx skills add agent-messenger/agent-messenger', description: 'Install Agent Skills via Skills CLI, Claude Code, OpenCode, or SkillPad — your agent learns every command and starts messaging on its own.', }, ] const USE_CASES = [ 'Read the #incident-api-outage thread in Slack and write a postmortem draft', 'Post the deployment changelog to #releases in Slack and #announcements in Discord', 'Search the Teams #design channel for the latest discussion about the new onboarding flow', 'Check my unread Slack messages right now and draft replies for anything urgent', 'Look up who reacted to my last message in #general on Discord and what they said after', "Summarize today's WhatsApp group chat and send the summary to #standup in Slack", ] const CAPABILITIES: { feature: string slack: boolean discord: boolean teams: boolean webex: boolean telegram: boolean whatsapp: boolean line: boolean wechat: boolean instagram: boolean kakaotalk: boolean channeltalk: boolean }[] = [ { feature: 'Zero-config credentials', slack: true, discord: true, teams: true, webex: true, telegram: false, whatsapp: false, line: false, wechat: false, instagram: false, kakaotalk: true, channeltalk: true, }, { feature: 'Send & list messages', slack: true, discord: true, teams: true, webex: true, telegram: true, whatsapp: true, line: true, wechat: false, instagram: true, kakaotalk: true, channeltalk: true, }, { feature: 'Search messages', slack: true, discord: true, teams: false, webex: false, telegram: false, whatsapp: true, line: false, wechat: false, instagram: true, kakaotalk: false, channeltalk: true, }, { feature: 'Threads', slack: true, discord: true, teams: false, webex: false, telegram: false, whatsapp: false, line: false, wechat: false, instagram: false, kakaotalk: false, channeltalk: false, }, { feature: 'Reactions', slack: true, discord: true, teams: true, webex: false, telegram: false, whatsapp: true, line: false, wechat: false, instagram: false, kakaotalk: false, channeltalk: false, }, { feature: 'File upload & download', slack: true, discord: true, teams: true, webex: false, telegram: false, whatsapp: false, line: false, wechat: false, instagram: false, kakaotalk: false, channeltalk: false, }, { feature: 'Workspace snapshot', slack: true, discord: true, teams: true, webex: true, telegram: false, whatsapp: false, line: false, wechat: false, instagram: false, kakaotalk: false, channeltalk: true, }, { feature: 'Multi-account', slack: true, discord: true, teams: true, webex: false, telegram: true, whatsapp: true, line: true, wechat: true, instagram: true, kakaotalk: false, channeltalk: true, }, { feature: 'Bot CLI available', slack: true, discord: true, teams: false, webex: false, telegram: false, whatsapp: true, line: false, wechat: true, instagram: false, kakaotalk: false, channeltalk: true, }, { feature: 'Real-time events (SDK)', slack: true, discord: false, teams: false, webex: false, telegram: false, whatsapp: false, line: true, wechat: false, instagram: true, kakaotalk: false, channeltalk: false, }, ] const PLATFORM_COLUMNS = [ 'Slack', 'Discord', 'Teams', 'Webex', 'Telegram', 'WhatsApp', 'LINE', 'WeChat', 'Instagram', 'KakaoTalk', 'Ch. Talk', ] as const const PLATFORM_KEYS = [ 'slack', 'discord', 'teams', 'webex', 'telegram', 'whatsapp', 'line', 'wechat', 'instagram', 'kakaotalk', 'channeltalk', ] as const // ============================================================ // Page Component // ============================================================ export default function Home() { return (
{/* ================================================================ AMBIENT GLOW BACKGROUND ================================================================ */}
{/* ================================================================ 1. HEADER / NAV (Glass) ================================================================ */} {/* ================================================================ 2. HERO (Gradient text + glass CTAs) ================================================================ */}
{/* Badge */}
open source
{/* Headline with gradient text */}

Your agent messages as you — not as a bot

{/* Subtitle */}

One CLI for Slack, Discord, Teams, Webex, Telegram, WhatsApp, LINE, WeChat, Instagram, KakaoTalk, and Channel Talk. Credentials extracted from desktop apps or authenticated in seconds — no API keys, no admin approval.

{/* CTAs with glass treatment in dark mode */}
Get Started View on GitHub
{/* ================================================================ 3. TRUST / PLATFORM BAR (Platform pills with brand glow) ================================================================ */}

Works with the platforms your team already uses

{PLATFORMS.map((p) => ( {/* Brand glow on hover */}
{p.name} ))}
{/* ================================================================ 4. WHY AGENT MESSENGER? (Glass cards) ================================================================ */}

Why Agent Messenger?

You shouldn't need a bot token to send a message

{/* The Problem */}
Problem

Every platform gates API access behind OAuth apps that need admin approval — days of waiting just to send a message. And even then, your agent is a{' '} bot, not you. Different name, different permissions, different context.

{/* The Solution */}
Solution

Agent Messenger reads session tokens from your Slack, Discord, Teams, or KakaoTalk desktop app — zero config. Telegram, WhatsApp, LINE, and Instagram authenticate with a one-time code or credentials. Either way, your agent operates as you — same name, same permissions, same context.

Credentials are stored locally in ~/.config/agent-messenger/ with restricted permissions. Nothing is sent to third-party servers.

{/* ================================================================ 5. FEATURES GRID (Glass cards with hover glow) ================================================================ */}

Features

Built for agents, not humans

{FEATURES.map((f) => (
{f.icon}

{f.title}

{f.description}

))}
{/* ================================================================ 6. HOW IT WORKS (Vertical timeline with glass nodes + cards) ================================================================ */}

How It Works

Running in under a minute

{/* Vertical Timeline */}
{/* Gradient Timeline Line */}
{HOW_IT_WORKS.map((step) => (
{/* Numbered Node */}
{String(step.step).padStart(2, '0')}
{/* Content Card */}

{step.title}

{step.description}

{step.code}
))}
{/* ================================================================ 7. USE CASES (Quote blocks with glass background) ================================================================ */}

Use Cases

What agents build with this

{USE_CASES.map((uc) => (

“{uc}”

))}
{/* ================================================================ 8. WHY CLI, NOT MCP? (Glass comparison cards) ================================================================ */}

Philosophy

Why CLI, not MCP?

{/* MCP */}
MCP
    {[ 'Requires a running server process per integration', 'Registers all tools upfront — larger context window footprint', 'Additional protocol layer between agent and action', ].map((point) => (
  • ✕ {point}
    • ))}
{/* CLI */}
Agent Skills + CLI
    {[ 'Agent learns one skill, calls one CLI command', 'Minimal token footprint — only the tool it needs', 'Structured JSON output, compact session references', ].map((point) => (
  • ✓ {point}
    • ))}
{/* ================================================================ 9. PLATFORM FEATURE MATRIX (Glass table) ================================================================ */}

Compatibility

Platform capabilities

{PLATFORM_COLUMNS.map((col) => ( ))} {CAPABILITIES.map((row, i) => ( {PLATFORM_KEYS.map((key) => ( ))} ))}
Feature {col}
{row.feature} {row[key] ? ( ✓ ) : ( — )}

Slack goes deepest — scheduled messages, ephemeral sends, file downloads, real-time events SDK, activity feed, drafts, saved items, reminders, pins, and bookmarks.

{/* ================================================================ 10. INSTALL CTA (Glass card with glow) ================================================================ */}
{/* Subtle CTA glow behind */}

Install once. Message everywhere.

$ npm install -g agent-messenger
Read the Docs View on GitHub
{/* ================================================================ 11. FOOTER (Glass top border) ================================================================ */}
) }