From 973cbc27af3073454c131f6846687d06b1330f74 Mon Sep 17 00:00:00 2001 From: Roo Code Date: Tue, 20 Jan 2026 23:48:14 +0000 Subject: [PATCH 1/3] feat(web): add Slack integration marketing page at /slack - Create new /slack marketing page with SEO metadata - Add SlackHeroSection with @Roomote branding and dual CTAs - Add SlackValuePropsSection with 7 key value propositions - Add ThreadToFeatureWorkflow demonstrating the flagship workflow - Add SlackOnboardingSteps with 3-step setup guide - Add SlackCTASection for conversion - Update navigation to include Slack in Product dropdown (desktop + mobile) - Add SLACK_INTEGRATION_DOCS constant for documentation link Page follows existing patterns from /extension and /cloud pages. --- apps/web-roo-code/src/app/slack/page.tsx | 69 +++++ .../src/app/slack/slack-cta-section.tsx | 36 +++ .../src/app/slack/slack-hero-section.tsx | 52 ++++ .../src/app/slack/slack-onboarding-steps.tsx | 76 ++++++ .../app/slack/slack-value-props-section.tsx | 86 +++++++ .../app/slack/thread-to-feature-workflow.tsx | 237 ++++++++++++++++++ .../src/components/chromes/nav-bar.tsx | 14 +- apps/web-roo-code/src/lib/constants.ts | 1 + 8 files changed, 570 insertions(+), 1 deletion(-) create mode 100644 apps/web-roo-code/src/app/slack/page.tsx create mode 100644 apps/web-roo-code/src/app/slack/slack-cta-section.tsx create mode 100644 apps/web-roo-code/src/app/slack/slack-hero-section.tsx create mode 100644 apps/web-roo-code/src/app/slack/slack-onboarding-steps.tsx create mode 100644 apps/web-roo-code/src/app/slack/slack-value-props-section.tsx create mode 100644 apps/web-roo-code/src/app/slack/thread-to-feature-workflow.tsx 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 00000000000..84437d995b0 --- /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 00000000000..617c71f2bf6 --- /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 00000000000..a698d52f285 --- /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 00000000000..8fe0de52b2a --- /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 00000000000..3e9dbaf1bde --- /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 00000000000..dee11b660e8 --- /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 ba197004948..023114c2d3f 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 + Date: Wed, 21 Jan 2026 00:24:16 +0000 Subject: [PATCH 2/3] fix(web): consolidate hero sub-copy into single statement --- apps/web-roo-code/src/app/slack/slack-hero-section.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 index a698d52f285..7111cb01761 100644 --- a/apps/web-roo-code/src/app/slack/slack-hero-section.tsx +++ b/apps/web-roo-code/src/app/slack/slack-hero-section.tsx @@ -13,13 +13,9 @@ export function SlackHeroSection() {

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

-
    +
      {onboardingSteps.map((step) => { const Icon = step.icon return ( @@ -64,6 +80,18 @@ export function SlackOnboardingSteps() {

      {step.title}

      {step.description} + {step.link && ( + <> + {" "} + + {step.link.text} + + + )}
      ) 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 index 3e9dbaf1bde..ea2849b2da6 100644 --- 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 @@ -1,4 +1,4 @@ -import { MessageSquare, Brain, GitBranch, Users, GraduationCap, Share2, Shield, LucideIcon } from "lucide-react" +import { MessageSquare, Brain, GitBranch, Users, GraduationCap, Shield, LucideIcon } from "lucide-react" interface ValueProp { icon: LucideIcon @@ -9,43 +9,37 @@ interface ValueProp { const valueProps: ValueProp[] = [ { icon: MessageSquare, - title: "From discussion to shipped feature", + title: "Discussion to 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", + title: "Full thread context.", 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", + title: "Chain agents together.", 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", + title: "Anyone can contribute.", description: - "PMs, CSMs, and support can ask @Roomote to explain code or investigate issues. Engineering gets pulled in only when truly needed.", + "PMs, CSMs, and Sales can ask @Roomote to explain code, prototype features, or build internal tools. No engineering bottleneck.", }, { icon: GraduationCap, - title: "Team learning, built in", + 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.", + title: "Safe by design.", + description: "Agents never touch main/master directly. They produce branches and PRs. You approve.", }, ] @@ -61,7 +55,7 @@ export function SlackValuePropsSection() { Why teams love working with @Roomote

      - Collaboration where it already happens, with AI that understands context. + AI agents that understand context, chain together for complex work, and keep you in control.

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 index dee11b660e8..c38d3af22b5 100644 --- 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 @@ -108,7 +108,7 @@ const workflowSteps: WorkflowStep[] = [ 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.", + result: "You stay in control. Agents produce artifacts; you decide what ships.", messages: [ { user: "Roomote", @@ -140,7 +140,8 @@ function SlackMessageComponent({ message }: { message: SlackMessage }) {
- + {message.user} {message.role} @@ -227,7 +228,7 @@ export function ThreadToFeatureWorkflow() {

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

diff --git a/apps/web-roo-code/src/lib/constants.ts b/apps/web-roo-code/src/lib/constants.ts index 2cf71a36331..55c6ce24d54 100644 --- a/apps/web-roo-code/src/lib/constants.ts +++ b/apps/web-roo-code/src/lib/constants.ts @@ -28,6 +28,7 @@ export const EXTERNAL_LINKS = { CLOUD_APP_SIGNUP: "https://app.roocode.com/sign-up", CLOUD_APP_SIGNUP_HOME: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup", CLOUD_APP_SIGNUP_PRO: "https://app.roocode.com/sign-up?redirect_url=/cloud-agents/setup", + CLOUD_APP_TEAM_TRIAL: "https://app.roocode.com/checkout/team", SUPPORT: "mailto:support@roocode.com", SLACK_INTEGRATION_DOCS: "https://docs.roocode.com/roo-code-cloud/slack-integration", }