Merge pull request #497 from mistralai/feat/vibe-code-web-slack-integration

feat: vibe code web slack integration

Author: grebett

src/app/(docs)/(products)/vibe/code/vibe-code-web/slack-integration/page.mdx

@@ -0,0 +1,131 @@
+---
+title: "Vibe Code Web for Slack: Quickstart"
+sidebar_position: 1
+---
+
+import { SectionTab } from '@/components/layout/section-tab';
+
+# Vibe Code Web for Slack: Quickstart
+
+Use this guide after the Vibe Code Web Slack app has been installed and connected to your Vibe account and GitHub repositories.
+
+<SectionTab as="h1" sectionId="what-you-can-do">What you can do from Slack</SectionTab>
+
+Vibe Code Web lets you start a remote coding session from the context already in a Slack thread. The agent uses the thread context, works in an isolated cloud sandbox, and creates a linked Vibe Code Web session. The coding agent can create a pull request for review.
+
+Use Slack when the coding task starts from:
+
+- an incident or on-call thread
+- a CI or alert notification
+- a customer or support escalation
+- a product or engineering discussion
+- a code review discussion summarized in Slack
+- a small implementation decision already agreed in-thread
+
+<SectionTab as="h1" sectionId="start-first-session">Start your first session</SectionTab>
+
+1. **Find a Slack thread with enough context for the coding task.** Good context includes:
+    - the repository or project name
+    - the bug, failing test, or desired behavior
+    - links to logs, PRs, issues, or screenshots
+    - constraints, such as *"keep the API unchanged"* or *"only touch docs"*
+2. **Mention the Vibe Code app in the thread.**
+    ```text
+    @MistralVibe investigate the issue described in this thread and open a PR if there is a clear fix.
+    ```
+3. **If Vibe needs more information, answer in the thread.** Common clarification questions:
+    - Which repository should I use?
+    - Which branch should I target?
+    - Should I open a PR or only investigate?
+    - Is this safe to change, or should I produce a summary first?
+4. **Open the Vibe Code Web session link posted by the app.** Use the web session to inspect progress, command output, steer the agent, and review the resulting GitHub branch or pull request.
+5. **Review the final code in GitHub.** GitHub remains the source of truth for code review, required checks, comments, approvals, and merge decisions.
+
+<SectionTab as="h1" sectionId="good-first-prompts">Good first prompts</SectionTab>
+
+Use prompts that are scoped, actionable, and likely to end in a branch or pull request.
+
+| Use case | Slack prompt |
+| --- | --- |
+| **Investigate a failing test** | `@MistralVibe investigate the failing test in this thread. If the fix is clear, open a PR with the smallest safe change.` |
+| **Fix a customer-reported bug** | `@MistralVibe use the customer report above to find the likely bug. Open a PR if you can reproduce or identify a clear fix.` |
+| **Address an alert** | `@MistralVibe investigate this alert and check whether there is a code or config fix. Start with a summary, then open a PR only if the change is low risk.` |
+| **Apply an agreed product change** | `@MistralVibe implement the copy/config change we agreed on above and open a PR.` |
+| **Add missing test coverage** | `@MistralVibe add a regression test for the edge case described in this thread. Keep the implementation unchanged unless the test exposes a bug.` |
+| **Update docs** | `@MistralVibe update the docs based on the behavior described above. Open a PR with the doc-only change.` |
+| **Small refactor** | `@MistralVibe refactor the helper discussed above. Keep behavior unchanged and run the relevant tests before opening a PR.` |
+
+<SectionTab as="h1" sectionId="prompt-template">Prompt template</SectionTab>
+
+For best results, include the repo, the desired outcome, and the review boundary.
+
+```text
+@MistralVibe [task]
+
+Repo/project: [repo name]
+Goal: [what should change]
+Constraints: [what not to change]
+Validation: [test/check to run if known]
+Output: open a PR / investigate only / summarize first
+```
+
+Example:
+
+```text
+@MistralVibe fix the settings persistence bug described above.
+
+Repo/project: web-app
+Goal: the alerts toggle should still be enabled after refresh.
+Constraints: do not change the API shape.
+Validation: run the settings tests if available.
+Output: open a PR if the fix is clear; otherwise summarize what you found.
+```
+
+<SectionTab as="h1" sectionId="what-happens-next">What happens next</SectionTab>
+
+After you mention Vibe Code:
+
+1. The app reads the Slack thread context.
+2. It maps the request to a Vibe Code Web project and GitHub repository.
+3. If the repository is ambiguous, it asks you to choose.
+4. It creates a Vibe Code Web session and posts a link back to Slack.
+5. The agent works remotely in a managed sandbox.
+6. The result is a GitHub branch or pull request, when a code change is appropriate.
+
+<SectionTab as="h1" sectionId="slack-vs-web-vs-cli">When to use Slack vs Web vs CLI</SectionTab>
+
+| Start from | Use when |
+| --- | --- |
+| **Slack** | The context already lives in a Slack thread: incidents, support reports, alerts, or team decisions. |
+| **Vibe Code Web** | You know the repository and want to start a remote task directly. |
+| **Vibe CLI** | You are already working locally, or the task depends on local files, services, secrets, or environment setup. |
+
+<SectionTab as="h1" sectionId="best-practices">Best practices</SectionTab>
+
+- Start with small, scoped tasks.
+- Name the repository or project when possible.
+- Say whether you want a pull request or an investigation summary.
+- Include the failing test, error message, stack trace, or expected behavior.
+- Avoid asking for broad rewrites from Slack.
+- Do not paste secrets into Slack or into the agent prompt.
+- Review the resulting branch or pull request in GitHub before merging.
+
+<SectionTab as="h1" sectionId="good-tasks">Good Slack tasks</SectionTab>
+
+Good Slack-started tasks usually:
+
+- have enough thread context
+- are tied to a known repo or project
+- can run in an isolated sandbox
+- can be validated with tests, build output, or code inspection
+- end in a GitHub branch, pull request, or investigation summary
+
+<SectionTab as="h1" sectionId="less-ideal-tasks">Less ideal Slack tasks</SectionTab>
+
+Avoid Slack-triggered sessions for:
+
+- broad architecture changes without a clear owner
+- tasks requiring local-only services, secrets, hardware, or private networks
+- vague prompts like *"fix this"* without logs or expected behavior
+- cross-owner GitHub work unless the project and repo mapping is clear
+- changes that should be manually designed before implementation

src/lib/content/index.ts

@@ -516,7 +516,7 @@ function isDynamicRoute(path: string): boolean {
 }
 
 function shouldHideCategory(dirName: string): boolean {
-  const HIDDEN_DIRS = new Set(['model-cards']);
+  const HIDDEN_DIRS = new Set(['model-cards', 'vibe']);
   return HIDDEN_DIRS.has(dirName);
 }