diff --git a/docusaurus.config.js b/docusaurus.config.js index 49f9ef9..0837aea 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -130,6 +130,7 @@ const config = { { from: "/vc", to: "/" }, { from: "/partner", to: "/" }, { from: "/wopee-commander", to: "/" }, + { from: "/guides/wopee-mcp", to: "/mcp" }, { from: "/blog/top-5-applitools-alternatives-for-visual-testing--2024", to: "/blog/applitools-alternatives", @@ -205,6 +206,7 @@ const config = { items: [ { to: "/ai-testing-agents", label: "AI Agents for Software Testing" }, { to: "/visual-testing", label: "Visual Regression Testing" }, + { to: "/mcp", label: "MCP Server" }, { to: "blog/playwright-bot-ai-powered-test-automation", label: "Playwright AI Bot (preview)", @@ -243,6 +245,10 @@ const config = { label: "Visual Regression Testing", to: "/visual-testing", }, + { + label: "MCP Server", + to: "/mcp", + }, { label: "Playwright AI Agent", to: "blog/playwright-bot-ai-powered-test-automation", diff --git a/src/components/home-page/HomeTrustedBy.tsx b/src/components/home-page/HomeTrustedBy.tsx index 41b7be4..6b88c70 100644 --- a/src/components/home-page/HomeTrustedBy.tsx +++ b/src/components/home-page/HomeTrustedBy.tsx @@ -1,69 +1,57 @@ import React from "react"; +const customers = [ + { name: "Multitude", logo: "/img/customers/multitude-logo-wordmark.svg", invertDark: true, size: "w-[80px] sm:w-[100px]" }, + { name: "Generali", logo: "/img/customers/generali-logo-small.svg", invertDark: true, size: "w-[145px] sm:w-[180px]" }, + { name: "SYNOT", logo: "/img/customers/synot-logo-2.png", invertDark: true, size: "w-[135px] sm:w-[170px]" }, + { name: "Inventi", logo: "/img/customers/inventi-logo.png", invertDark: true, size: "w-[120px] sm:w-[145px]" }, + { name: "Tesena", logo: "/img/investors/tesena-logo.png", invertDark: true, size: "w-[130px] sm:w-[165px]" }, + { name: "Nice Project", logo: "/img/customers/niceproject-logo.svg", invertDark: true, size: "w-[140px] sm:w-[180px]" }, + { name: "Flashscore", logo: "/img/customers/flash-score-logo.png", invertDark: true, size: "w-[160px] sm:w-[200px]" }, + { name: "Principal", logo: "/img/customers/principal-logo-gray.svg", noFilter: true, size: "w-[140px] sm:w-[180px]" }, + { name: "Accenture", logo: "/img/customers/accenture-logo-gray.svg", noFilter: true, size: "w-[120px] sm:w-[145px]" }, +]; + +const techPartners = [ + { name: "GitHub", logo: "/img/partners/github-logo.png", size: "w-[100px] sm:w-[120px]" }, + { name: "Anthropic", logo: "/img/partners/anthropic-logo.svg", size: "w-[130px] sm:w-[160px]" }, + { name: "OpenAI", logo: "/img/partners/openai-logo.svg", size: "w-[100px] sm:w-[120px]" }, + { name: "Microsoft", logo: "/img/partners/microsoft-logo.svg", size: "w-[115px] sm:w-[140px]" }, + { name: "Amazon Web Services", logo: "/img/partners/aws-logo.svg", size: "w-[85px] sm:w-[105px]" }, + { name: "Google Cloud", logo: "/img/partners/google-cloud-logo.png", size: "w-[125px] sm:w-[155px]" }, +]; + const HomeTrustedBy = () => { return ( -
-
-
- multitude - - livesport +
+

+ Trusted by leading engineering teams +

+
+ {customers.map((customer) => ( inventi - SYNOT TECH -
- -
-

Trusted by

-

- top engineering teams -

-
+ ))}
-
-
-

Backed by

-

- strong partners -

-
- -
- tesena - - nation1 +

+ Powered by world class AI and cloud partners +

+
+ {techPartners.map((partner) => ( startup yard -
+ ))}
); diff --git a/src/components/landing-page/home/sections/PartnerBrands.tsx b/src/components/landing-page/home/sections/PartnerBrands.tsx index 4184ecf..e454a1e 100644 --- a/src/components/landing-page/home/sections/PartnerBrands.tsx +++ b/src/components/landing-page/home/sections/PartnerBrands.tsx @@ -1,52 +1,55 @@ -import PartnersCarouselCard from "@site/src/components/demo/PartnersCarouselCard"; import React from "react"; -const partners = [ - { - name: "Multitude", - logo: "/img/customers/multitude-logo-2.png", - classes: "grayscale dark:invert", - }, - { - name: "Flash Score", - logo: "/img/customers/flash-score-logo.png", - classes: "grayscale dark:invert", - }, - // { - // name: "Kedros", - // logo: "/img/customers/kedros-logo-2.png", - // classes: "grayscale rounded-lg", - // }, - { - name: "Inventi", - logo: "/img/customers/inventi-logo-2.png", - classes: "grayscale dark:invert", - }, +const customers = [ + { name: "Multitude", logo: "/img/customers/multitude-logo-wordmark.svg", invertDark: true, size: "w-[80px] sm:w-[100px]" }, + { name: "Generali", logo: "/img/customers/generali-logo-small.svg", invertDark: true, size: "w-[145px] sm:w-[180px]" }, + { name: "SYNOT", logo: "/img/customers/synot-logo-2.png", invertDark: true, size: "w-[135px] sm:w-[170px]" }, + { name: "Inventi", logo: "/img/customers/inventi-logo.png", invertDark: true, size: "w-[120px] sm:w-[145px]" }, + { name: "Tesena", logo: "/img/investors/tesena-logo.png", invertDark: true, size: "w-[130px] sm:w-[165px]" }, + { name: "Nice Project", logo: "/img/customers/niceproject-logo.svg", invertDark: true, size: "w-[140px] sm:w-[180px]" }, + { name: "Flashscore", logo: "/img/customers/flash-score-logo.png", invertDark: true, size: "w-[160px] sm:w-[200px]" }, + { name: "Principal", logo: "/img/customers/principal-logo-gray.svg", noFilter: true, size: "w-[140px] sm:w-[180px]" }, + { name: "Accenture", logo: "/img/customers/accenture-logo-gray.svg", noFilter: true, size: "w-[120px] sm:w-[145px]" }, +]; + +const techPartners = [ + { name: "GitHub", logo: "/img/partners/github-logo.png", size: "w-[100px] sm:w-[120px]" }, + { name: "Anthropic", logo: "/img/partners/anthropic-logo.svg", size: "w-[130px] sm:w-[160px]" }, + { name: "OpenAI", logo: "/img/partners/openai-logo.svg", size: "w-[100px] sm:w-[120px]" }, + { name: "Microsoft", logo: "/img/partners/microsoft-logo.svg", size: "w-[115px] sm:w-[140px]" }, + { name: "Amazon Web Services", logo: "/img/partners/aws-logo.svg", size: "w-[85px] sm:w-[105px]" }, + { name: "Google Cloud", logo: "/img/partners/google-cloud-logo.png", size: "w-[125px] sm:w-[155px]" }, ]; const PartnerBrands = () => { return ( -
-
-

- Join{" "} - - top engineering teams - {" "} - and start your free trial -

-

- Empower your team with fast, scalable visual testing. Trusted by - industry leaders to maintain the visual integrity of their apps. -

+
+

+ Trusted by leading engineering teams +

+ +
+ {customers.map((customer) => ( + {customer.name} + ))}
-
- {partners.map((partner) => ( - + Powered by world class AI and cloud partners +

+ +
+ {techPartners.map((partner) => ( + {partner.name} ))}
diff --git a/src/components/landing-page/home/sections/TestimonialCarousel.tsx b/src/components/landing-page/home/sections/TestimonialCarousel.tsx index 8770562..c1dcb46 100644 --- a/src/components/landing-page/home/sections/TestimonialCarousel.tsx +++ b/src/components/landing-page/home/sections/TestimonialCarousel.tsx @@ -1,5 +1,3 @@ -import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js"; -import Icon from "@mdi/react"; import React, { useState, useEffect } from "react"; const testimonials = [ @@ -43,41 +41,30 @@ const Testimonial = ({ activeItemIndex === itemIndex ? "block md:opacity-100" : "hidden md:opacity-0" - } md:absolute md:top-1/2 md:-translate-y-1/2 md:left-0 md:w-full transition-opacity duration-500 flex flex-col lg:flex-row gap-5 lg:gap-10 items-center`} + } md:absolute md:inset-0 transition-opacity duration-500 flex items-center justify-center px-4`} > -
-

- +

+

+ “ {quote} - + ”

-

+

{about}

-
- -
-
- -
-
{name}
- {position} +
+ {name} +
+

{name}

+

{position}

-
- -
- -
+
{alt} @@ -139,7 +126,7 @@ const TestimonialCarousel = () => {

-
+
{testimonials.map((testimonial, index) => ( + + - - diff --git a/src/pages/mcp/index.tsx b/src/pages/mcp/index.tsx new file mode 100644 index 0000000..a8e017f --- /dev/null +++ b/src/pages/mcp/index.tsx @@ -0,0 +1,577 @@ +import { + mdiEyeCheckOutline, + mdiTestTube, + mdiCogSync, + mdiChartLine, + mdiLightningBolt, + mdiPuzzle, + mdiGithub, + mdiNpm, +} from "@mdi/js"; +import Icon from "@mdi/react"; +import React, { useState, useEffect } from "react"; +import Link from "@docusaurus/Link"; + +import Layout from "@theme/Layout"; +import ButtonPrimary from "@site/src/components/buttons/ButtonPrimary"; +import TestimonialCarousel from "@site/src/components/landing-page/home/sections/TestimonialCarousel"; +import ButtonPrimaryInverted from "@site/src/components/buttons/ButtonPrimaryInverted"; + +const CAPABILITIES = [ + { + icon: mdiLightningBolt, + title: "Generate Test Content", + tool: "wopee_generate_artifact", + description: + "Generate user stories, test cases, test steps, and Playwright code from your app context.", + }, + { + icon: mdiTestTube, + title: "Dispatch Testing Agent", + tool: "wopee_dispatch_agent", + description: + "One prompt launches an AI agent that explores your app, tests interactions, and reports back.", + }, + { + icon: mdiEyeCheckOutline, + title: "Analyze & Create Suites", + tool: "wopee_dispatch_analysis", + description: + "Create a new suite and auto-analyze it with custom variables and instructions.", + }, + { + icon: mdiChartLine, + title: "Fetch Test Data", + tool: "wopee_fetch_artifact", + description: + "Get generated artifacts — user stories, test cases, screenshots, and reports — right in your conversation.", + }, + { + icon: mdiCogSync, + title: "Refine Tests", + tool: "wopee_update_artifact", + description: + "Update test cases, user stories, and steps through conversation. Iterate on the fly.", + }, + { + icon: mdiPuzzle, + title: "Suite Management", + tool: "wopee_create_blank_suite", + description: + "Create and browse test suites without opening the dashboard.", + }, +]; + +const COMPATIBLE_TOOLS = [ + { + name: "Claude Code", + description: "CLI agent by Anthropic", + icon: "CC", + gradient: "from-orange-500 to-amber-500", + }, + { + name: "Claude Desktop", + description: "AI agent by Anthropic", + icon: "CD", + gradient: "from-orange-400 to-yellow-500", + }, + { + name: "Cursor", + description: "AI-first code editor", + icon: "Cu", + gradient: "from-blue-500 to-indigo-500", + }, + { + name: "VS Code", + description: "With Copilot or extensions", + icon: "VS", + gradient: "from-sky-500 to-blue-600", + }, + { + name: "Windsurf", + description: "AI-powered IDE", + icon: "Ws", + gradient: "from-teal-400 to-emerald-500", + }, +]; + +const STEPS = [ + { + step: "1", + title: "Install", + subtitle: "One npm package, instant setup", + code: "npm install -g wopee-mcp\n# or run directly\nnpx wopee-mcp", + description: + "Run instantly with npx — the server starts in seconds. No global install needed.", + }, + { + step: "2", + title: "Connect", + subtitle: "Works with any MCP client", + code: '// Add to your MCP config:\n{\n "wopee": {\n "command": "npx",\n "args": ["-y", "wopee-mcp"],\n "env": {\n "WOPEE_API_KEY": "your-key",\n "WOPEE_PROJECT_UUID": "your-id"\n }\n }\n}', + description: + "Two values from your Wopee.io dashboard. Paste into your AI tool's MCP config — that's all you need.", + }, + { + step: "3", + title: "Test", + subtitle: "Natural language, real results", + code: '"Generate stories for login and test them"\n\n wopee_generate_artifact 3 user stories created\n wopee_dispatch_agent running 5 test cases...\n\n 4 passed | 1 issue found', + description: + "Ask your AI to test any flow. It generates stories, dispatches agents, and explains findings — all in natural language.", + }, +]; + +const TERMINAL_LINES = [ + { type: "user", text: "Create user stories for the checkout flow and test them", delay: 0 }, + { type: "tool", name: "wopee_generate_artifact", text: "3 user stories with test cases", delay: 1200 }, + { type: "tool", name: "wopee_dispatch_agent", text: "running 8 test cases...", delay: 2200 }, + { type: "claude", text: "7 of 8 test cases passed. Found 1 issue: the promo code field accepts empty submissions. Full report and traces attached.", delay: 3800 }, + { type: "user", text: "Update the test case to validate non-empty input.", delay: 6000 }, + { type: "tool", name: "wopee_update_artifact", text: "test case updated", delay: 7200 }, +]; + +const TerminalAnimation = () => { + const [visibleLines, setVisibleLines] = useState(0); + + useEffect(() => { + const timers = TERMINAL_LINES.map((line, index) => + setTimeout(() => setVisibleLines(index + 1), line.delay) + ); + return () => timers.forEach(clearTimeout); + }, []); + + return ( +
+ {TERMINAL_LINES.slice(0, visibleLines).map((line, i) => { + if (line.type === "user") { + return ( +
0 ? "mt-4" : ""} mb-3 animate-[fadeIn_0.3s_ease-in]`}> + You:{" "} + {line.text} +
+ ); + } + if (line.type === "tool") { + const isFirst = i === 0 || TERMINAL_LINES[i - 1]?.type !== "tool"; + const isLast = i === TERMINAL_LINES.length - 1 || TERMINAL_LINES[i + 1]?.type !== "tool"; + return ( +
+ {line.name}{" "} + {line.text} +
+ ); + } + if (line.type === "claude") { + return ( +
+ Claude:{" "} + {line.text} +
+ ); + } + return null; + })} + {visibleLines < TERMINAL_LINES.length && ( + + )} +
+ ); +}; + +const HeroSection = () => ( +
+
+
+ + MCP Server + + + Available on npm + +
+ +

+ + Autonomous testing + +
+ {" "}in your AI coding agent +

+ +

+ Connect to Wopee.io and dispatch testing agents, generate tests, + and manage suites — without leaving your editor. +

+ +
+
+ + No credit card required +
+ + + View on GitHub + + → + + +
+ +
+ npm package + • + 7 MCP tools + • + Node.js 18+ +
+
+ +
+
+
+
+
+
+
+
+ + AI Agent + Wopee.io MCP + +
+ mcp connected +
+ + + Read the docs → + +
+
+); + +const ProblemSection = () => ( +
+

+ Your AI can code. But who tests the output? +

+
+
+
✗
+

+ Your CI catches technical errors but{" "} + misses broken user flows +

+
+
+
✗
+

+ Writing test scripts manually{" "} + slows down every release +

+
+
+
✗
+

+ You leave your editor to{" "} + open a separate testing dashboard +

+
+
+
✗
+

+ Testing dozens of user flows manually{" "} + doesn't scale +

+
+
+
+

+ Wopee.io MCP bridges the gap. Test from where you code. +

+
+
+); + +const CapabilitiesSection = () => ( +
+
+

+ Complete testing workflow +

+

+ From generating tests to dispatching autonomous agents — all through conversation +

+
+ +
+ {CAPABILITIES.map((cap) => ( +
+
+ +
+

{cap.title}

+ + {cap.tool} + +

{cap.description}

+
+ ))} +
+ +
+ + + Read the docs → + +
+
+); + +const HowItWorksSection = () => ( +
+
+

+ Up and running in{" "} + + 3 minutes + +

+

+ Install the npm package, add it to your MCP config, and start testing +

+
+ +
+ {STEPS.map((step, index) => ( +
+
+
+
+
+
+
+
+
+ + {index === 0 + ? "terminal" + : index === 1 + ? "mcp-config.json" + : "conversation"} + +
+ 
+                {step.code}
+
+
+
+ +
+
+ + {step.step} + +

{step.title}

+
+

+ {step.subtitle} +

+

{step.description}

+
+
+ ))} +
+
+); + +const CompatibleToolsSection = () => ( +
+
+

+ Plug into the AI tools you already use +

+

+ The{" "} + + Model Context Protocol (MCP) + {" "} + is the open standard that lets AI agents use external tools. + Any MCP-compatible client works with Wopee.io. +

+
+ +
+ {COMPATIBLE_TOOLS.map((tool) => ( +
+
+ {tool.icon} +
+
+

{tool.name}

+

{tool.description}

+
+
+ ))} +
+
+
+
+

Any MCP client

+

Open standard

+
+
+
+ +
+ +
+
+); + +const OpenSourceSection = () => ( +
+
+
+
+ +
+

+ Available on GitHub and npm +

+

+ The Wopee.io MCP server is published on npm and the source code is + available on GitHub. Install in seconds, inspect the code, and + contribute if you'd like. +

+
+ + + Star on GitHub + + + + npm + +
+
+
+
+ {[ + ["wopee_dispatch_agent", "Launch autonomous agent"], + ["wopee_dispatch_analysis", "Analyze test results"], + ["wopee_fetch_artifact", "Get screenshots & reports"], + ["wopee_generate_artifact", "Generate test content"], + ["wopee_update_artifact", "Refine tests"], + ["wopee_create_blank_suite", "Create test suite"], + ["wopee_fetch_analysis_suites", "List all suites"], + ].map(([tool, desc]) => ( +
+ {tool} + — {desc} +
+ ))} +
+
+
+
+); + +const McpPage = () => { + return ( + + + + + + + + +
+
+
+

+ Bring autonomous testing to your AI workflow +

+

+ Set up in minutes, start testing immediately. +

+
+
+
+ +

No credit card required

+
+
+ +
+
+
+
+ + ); +}; +export default McpPage; diff --git a/static/img/customers/accenture-logo-gray.svg b/static/img/customers/accenture-logo-gray.svg new file mode 100644 index 0000000..b8b716f --- /dev/null +++ b/static/img/customers/accenture-logo-gray.svg @@ -0,0 +1 @@ + diff --git a/static/img/customers/accenture-logo.svg b/static/img/customers/accenture-logo.svg new file mode 100644 index 0000000..a4baf78 --- /dev/null +++ b/static/img/customers/accenture-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/customers/generali-logo-small.svg b/static/img/customers/generali-logo-small.svg new file mode 100644 index 0000000..29b0132 --- /dev/null +++ b/static/img/customers/generali-logo-small.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/customers/multitude-logo-wordmark.svg b/static/img/customers/multitude-logo-wordmark.svg new file mode 100644 index 0000000..ab1ae56 --- /dev/null +++ b/static/img/customers/multitude-logo-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/customers/niceproject-logo.svg b/static/img/customers/niceproject-logo.svg new file mode 100644 index 0000000..1d492ed --- /dev/null +++ b/static/img/customers/niceproject-logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/customers/principal-logo-gray.svg b/static/img/customers/principal-logo-gray.svg new file mode 100644 index 0000000..3542d98 --- /dev/null +++ b/static/img/customers/principal-logo-gray.svg @@ -0,0 +1,39 @@ + + + + diff --git a/static/img/customers/principal-logo.svg b/static/img/customers/principal-logo.svg new file mode 100644 index 0000000..ba8a82c --- /dev/null +++ b/static/img/customers/principal-logo.svg @@ -0,0 +1,39 @@ + + + + diff --git a/static/img/partners/anthropic-logo.svg b/static/img/partners/anthropic-logo.svg new file mode 100644 index 0000000..cbcc39e --- /dev/null +++ b/static/img/partners/anthropic-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/partners/aws-logo.svg b/static/img/partners/aws-logo.svg new file mode 100644 index 0000000..cd27e72 --- /dev/null +++ b/static/img/partners/aws-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/partners/github-logo.png b/static/img/partners/github-logo.png new file mode 100755 index 0000000..1471f31 Binary files /dev/null and b/static/img/partners/github-logo.png differ diff --git a/static/img/partners/google-cloud-logo.png b/static/img/partners/google-cloud-logo.png new file mode 100644 index 0000000..82654d2 Binary files /dev/null and b/static/img/partners/google-cloud-logo.png differ diff --git a/static/img/partners/google-cloud-logo.svg b/static/img/partners/google-cloud-logo.svg new file mode 100644 index 0000000..b8fbe9f --- /dev/null +++ b/static/img/partners/google-cloud-logo.svg @@ -0,0 +1,11 @@ + + + + + Error 404 (Not Found)!!1 + + +

404. That’s an error. +

The requested URL /devrel-devsite/prod/v0e0f589edd85502a40d78d7d0825db8ea5ef3b99058d2a037c4baf28c47810e6/cloud/images/cloud-logo.svg was not found on this server. That’s all we know. diff --git a/static/img/partners/microsoft-logo.svg b/static/img/partners/microsoft-logo.svg new file mode 100644 index 0000000..6d169a8 --- /dev/null +++ b/static/img/partners/microsoft-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/partners/openai-logo.svg b/static/img/partners/openai-logo.svg new file mode 100644 index 0000000..859d7af --- /dev/null +++ b/static/img/partners/openai-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file