diff --git a/apps/web-roo-code/src/app/slack/page.tsx b/apps/web-roo-code/src/app/slack/page.tsx new file mode 100644 index 0000000000..84437d995b --- /dev/null +++ b/apps/web-roo-code/src/app/slack/page.tsx @@ -0,0 +1,69 @@ +import type { Metadata } from "next" + +import { StructuredData } from "@/components/structured-data" +import { SEO } from "@/lib/seo" +import { ogImageUrl } from "@/lib/og" + +import { SlackHeroSection } from "./slack-hero-section" +import { SlackValuePropsSection } from "./slack-value-props-section" +import { ThreadToFeatureWorkflow } from "./thread-to-feature-workflow" +import { SlackOnboardingSteps } from "./slack-onboarding-steps" +import { SlackCTASection } from "./slack-cta-section" + +const TITLE = "Roo Code for Slack" +const DESCRIPTION = + "Summon agents to explain code, plan new features, or execute coding tasks without leaving Slack. Your AI team in your team's workspace." +const OG_DESCRIPTION = "@Roomote: Your AI Team in Slack" +const PATH = "/slack" + +export const metadata: Metadata = { + title: TITLE, + description: DESCRIPTION, + alternates: { + canonical: `${SEO.url}${PATH}`, + }, + openGraph: { + title: TITLE, + description: DESCRIPTION, + url: `${SEO.url}${PATH}`, + siteName: SEO.name, + images: [ + { + url: ogImageUrl(TITLE, OG_DESCRIPTION), + width: 1200, + height: 630, + alt: TITLE, + }, + ], + locale: SEO.locale, + type: "website", + }, + twitter: { + card: SEO.twitterCard, + title: TITLE, + description: DESCRIPTION, + images: [ogImageUrl(TITLE, OG_DESCRIPTION)], + }, + keywords: [ + ...SEO.keywords, + "Slack integration", + "team collaboration", + "Slack bot", + "AI Slack assistant", + "@Roomote", + "Slack agents", + ], +} + +export default function SlackPage() { + return ( + <> + + + + + + + + ) +} diff --git a/apps/web-roo-code/src/app/slack/slack-cta-section.tsx b/apps/web-roo-code/src/app/slack/slack-cta-section.tsx new file mode 100644 index 0000000000..617c71f2bf --- /dev/null +++ b/apps/web-roo-code/src/app/slack/slack-cta-section.tsx @@ -0,0 +1,36 @@ +import { ArrowRight } from "lucide-react" + +import { Button } from "@/components/ui" +import { EXTERNAL_LINKS } from "@/lib/constants" + +export function SlackCTASection() { + return ( +
+
+
+

+ Bring your AI team into Slack +

+

+ Start collaborating with agents where your team already works. Free to try. +

+ +
+
+
+ ) +} diff --git a/apps/web-roo-code/src/app/slack/slack-hero-section.tsx b/apps/web-roo-code/src/app/slack/slack-hero-section.tsx new file mode 100644 index 0000000000..a698d52f28 --- /dev/null +++ b/apps/web-roo-code/src/app/slack/slack-hero-section.tsx @@ -0,0 +1,52 @@ +import { ArrowRight, ExternalLink } from "lucide-react" + +import { Button } from "@/components/ui" +import { AnimatedBackground } from "@/components/homepage" +import { EXTERNAL_LINKS } from "@/lib/constants" + +export function SlackHeroSection() { + return ( +
+ +
+
+

+ @Roomote: Your AI Team in Slack +

+

+ Summon agents to explain code, plan new features, or execute coding tasks without leaving Slack. +

+

+ Mention @Roomote in any channel. Pick an agent and a repo. Get answers, plans, or a PR in the + thread. +

+ +
+
+
+ ) +} diff --git a/apps/web-roo-code/src/app/slack/slack-onboarding-steps.tsx b/apps/web-roo-code/src/app/slack/slack-onboarding-steps.tsx new file mode 100644 index 0000000000..8fe0de52b2 --- /dev/null +++ b/apps/web-roo-code/src/app/slack/slack-onboarding-steps.tsx @@ -0,0 +1,76 @@ +import { Settings, Link2, Hash, LucideIcon } from "lucide-react" + +interface OnboardingStep { + step: number + icon: LucideIcon + title: string + description: string +} + +const onboardingSteps: OnboardingStep[] = [ + { + step: 1, + icon: Settings, + title: "Connect your Slack workspace", + description: "Go to your personal or org settings in the top right user menu", + }, + { + step: 2, + icon: Link2, + title: "Authorize the integration", + description: "Click on 'Connect' and follow the OAuth process", + }, + { + step: 3, + icon: Hash, + title: "Add @Roomote to channels", + description: "Add the @Roomote bot to the channels where you want it to be available", + }, +] + +export function SlackOnboardingSteps() { + return ( +
+
+
+
+
+ +
+
+

Get started in 3 steps

+

+ Connect your Slack workspace and start collaborating with agents in minutes. +

+
+
+ +
+
    + {onboardingSteps.map((step) => { + const Icon = step.icon + return ( +
  • +
    +
    + + {step.step} + +
    + +
    +

    {step.title}

    +
    + {step.description} +
    +
    • + ) + })} +
+
+
+
+ ) +} diff --git a/apps/web-roo-code/src/app/slack/slack-value-props-section.tsx b/apps/web-roo-code/src/app/slack/slack-value-props-section.tsx new file mode 100644 index 0000000000..3e9dbaf1bd --- /dev/null +++ b/apps/web-roo-code/src/app/slack/slack-value-props-section.tsx @@ -0,0 +1,86 @@ +import { MessageSquare, Brain, GitBranch, Users, GraduationCap, Share2, Shield, LucideIcon } from "lucide-react" + +interface ValueProp { + icon: LucideIcon + title: string + description: string +} + +const valueProps: ValueProp[] = [ + { + icon: MessageSquare, + title: "From discussion to shipped feature", + description: + "Your team discusses a feature in Slack. @Roomote turns the discussion into a plan. Then builds it. All without leaving the conversation.", + }, + { + icon: Brain, + title: "The agent knows the thread", + description: + "@Roomote reads the conversation before responding. Ask 'why is this happening?' after a team discussion and it understands.", + }, + { + icon: GitBranch, + title: "Chain agents for complex work", + description: + "Start with a Planner to spec it out. Then call the Coder to build it. Multi-step workflows, one Slack thread.", + }, + { + icon: Users, + title: "Non-technical team members can investigate", + description: + "PMs, CSMs, and support can ask @Roomote to explain code or investigate issues. Engineering gets pulled in only when truly needed.", + }, + { + icon: GraduationCap, + title: "Team learning, built in", + description: "Public channel mentions show everyone how to leverage agents. Learn by watching.", + }, + { + icon: Share2, + title: "One platform, multiple surfaces", + description: + "The same agents that work in your IDE and review your PRs are available in Slack. Different surfaces, same quality.", + }, + { + icon: Shield, + title: "Safe by design", + description: "Agents never touch main/master directly. They produce branches and PRs. Humans approve.", + }, +] + +export function SlackValuePropsSection() { + return ( +
+
+
+
+
+
+

+ Why teams love working with @Roomote +

+

+ Collaboration where it already happens, with AI that understands context. +

+
+
+ {valueProps.map((prop, index) => { + const Icon = prop.icon + return ( +
+
+ +
+

{prop.title}

+

{prop.description}

+
+ ) + })} +
+
+
+ ) +} diff --git a/apps/web-roo-code/src/app/slack/thread-to-feature-workflow.tsx b/apps/web-roo-code/src/app/slack/thread-to-feature-workflow.tsx new file mode 100644 index 0000000000..dee11b660e --- /dev/null +++ b/apps/web-roo-code/src/app/slack/thread-to-feature-workflow.tsx @@ -0,0 +1,237 @@ +"use client" + +import { Map, MessageCircle, Code, GitPullRequest, Eye, CornerDownRight } from "lucide-react" + +interface SlackMessage { + user: string + role: string + avatar: string + message: string + isBot?: boolean + reactions?: string[] +} + +interface WorkflowStep { + step: number + title: string + description: string + result: string + messages: SlackMessage[] +} + +const workflowSteps: WorkflowStep[] = [ + { + step: 1, + title: "Turn the discussion into a plan", + description: "Capture complex discussions and transform them into structured specs", + result: "Planner agent reads the thread and returns a structured spec", + messages: [ + { + user: "Sarah", + role: "PM", + avatar: "S", + message: "This is getting complex. Let's not lose this.", + }, + { + user: "Sarah", + role: "PM", + avatar: "S", + message: + "@Roomote plan out a dark mode feature based on our discussion. Include the toggle, persistence, and system preference detection.", + }, + { + user: "Roomote", + role: "Planner Agent", + avatar: "R", + message: "I'll analyze the thread and create a structured plan...", + isBot: true, + reactions: ["👀"], + }, + ], + }, + { + step: 2, + title: "Refine the plan in the thread", + description: "Collaborate with your team to review and improve the spec", + result: "The team iterates on the plan without leaving the conversation", + messages: [ + { + user: "Alex", + role: "Designer", + avatar: "A", + message: "Can we add a system preference auto-detect option?", + }, + { + user: "Sarah", + role: "PM", + avatar: "S", + message: "@Roomote update the plan to include auto-detect from system preferences", + }, + { + user: "Roomote", + role: "Planner Agent", + avatar: "R", + message: "Updated the plan. Added system preference detection as the default behavior...", + isBot: true, + }, + ], + }, + { + step: 3, + title: "Build the plan", + description: "Hand off the refined spec to the Coder agent", + result: "Coder agent creates a branch and opens a PR", + messages: [ + { + user: "Mike", + role: "Engineer", + avatar: "M", + message: "This looks good. Let's build it.", + }, + { + user: "Mike", + role: "Engineer", + avatar: "M", + message: "@Roomote implement this plan in the frontend-web repo.", + }, + { + user: "Roomote", + role: "Coder Agent", + avatar: "R", + message: "Building the dark mode feature. I'll create a PR when ready...", + isBot: true, + reactions: ["👀"], + }, + ], + }, + { + step: 4, + title: "Review and ship", + description: "Review the PR and merge when ready", + result: "Human oversight at every step. Agents produce artifacts; humans decide what ships.", + messages: [ + { + user: "Roomote", + role: "Coder Agent", + avatar: "R", + message: "PR ready for review: feat: Add dark mode with system preference detection #247", + isBot: true, + }, + { + user: "Mike", + role: "Engineer", + avatar: "M", + message: "Reviewing now. LGTM! Merging.", + }, + ], + }, +] + +function SlackMessageComponent({ message }: { message: SlackMessage }) { + return ( +
+
+ {message.avatar} +
+
+
+ + {message.user} + + {message.role} +
+

{message.message}

+ {message.reactions && message.reactions.length > 0 && ( +
+ {message.reactions.map((reaction, i) => ( + + {reaction} + + ))} +
+ )} +
+
+ ) +} + +function WorkflowStepCard({ step }: { step: WorkflowStep }) { + const stepIcons = [Map, MessageCircle, Code, GitPullRequest] + const Icon = stepIcons[step.step - 1] || Map + + return ( +
+ {/* Step Header */} +
+
+
+ {step.step} +
+ +
+

{step.title}

+

{step.description}

+
+ + {/* Slack Thread Mockup */} +
+
+ {step.messages.map((message, i) => ( + + ))} +
+
+ + {/* Result */} +
+
+ + {step.result} +
+
+
+ ) +} + +export function ThreadToFeatureWorkflow() { + return ( +
+
+
+
+ + Featured Workflow +
+

+ From Discussion to Shipped Feature +

+

+ The complete workflow that makes Slack the ideal surface for agent collaboration. Discussion + → spec → code → PR, all in one thread. +

+
+ +
+ {workflowSteps.map((step) => ( + + ))} +
+ +
+

+ No context switch required. Everyone sees the + workflow in public channels. Multi-agent handoffs from Planner to Coder. Human oversight at + every step. +

+
+
+
+ ) +} diff --git a/apps/web-roo-code/src/components/chromes/nav-bar.tsx b/apps/web-roo-code/src/components/chromes/nav-bar.tsx index ba19700494..023114c2d3 100644 --- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx +++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx @@ -13,7 +13,7 @@ import { EXTERNAL_LINKS } from "@/lib/constants" import { useLogoSrc } from "@/lib/hooks/use-logo-src" import { ScrollButton } from "@/components/ui" import ThemeToggle from "@/components/chromes/theme-toggle" -import { Brain, ChevronDown, Cloud, Puzzle, X } from "lucide-react" +import { Brain, ChevronDown, Cloud, Puzzle, Slack, X } from "lucide-react" interface NavBarProps { stars: string | null @@ -54,6 +54,12 @@ export function NavBar({ stars, downloads }: NavBarProps) { Roo Code Cloud + + + Roo Code for Slack + @@ -190,6 +196,12 @@ export function NavBar({ stars, downloads }: NavBarProps) { onClick={() => setIsMenuOpen(false)}> Roo Code Cloud + setIsMenuOpen(false)}> + Roo Code for Slack +