+
+
+
+
+ {/* Category filter */}
+ + Copy, paste, and ask +
++ These prompts work out of the box with any MCP-compatible AI client + connected to Parseable. +
+
+ {PROMPT_CATEGORIES.map((cat) => (
+
+ ))}
+
+
+ {/* Grid */}
+
+ {filtered.map((prompt, i) => (
+
+
+
+ ))}
+ + {prompt.text} +
+ +
+ ),
+ Cursor: (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ),
+ "VS Code": (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ),
+ "Claude Desktop": (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ),
+ Windsurf: (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ),
+ "Slack Bot": (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ),
+};
+
+const CLIENTS = ["Claude Code", "Cursor", "VS Code", "Claude Desktop", "ChatGPT", "Windsurf", "Slack Bot"] as const;
+type Client = (typeof CLIENTS)[number];
+
+const HOSTED_URL = `${window.location.origin}/mcp`;
+
+const MANUAL_JSON: Record
+ {label && (
+
+ );
+}
+
+function SectionLabel({ children }: { children: ReactNode }) {
+ return (
+
+
+ {label}
+
+
+
+ )}
+
+ {content}
+
+ + {children} +
+ ); +} + +function InstallButton({ href, icon, label }: { href: string; icon: ReactNode; label: string; iconColor?: string }) { + return ( + + {icon} + {label} + + ); +} + +export function QuickSetup() { + const [active, setActive] = useState
+
+
+ {/* Tabs */}
+
+
+
+
+ {/* Tab content */}
+
+ {CLIENTS.map((client) => (
+
+ ))}
+
+
+
+ {active === "Claude Code" && (
+ <>
+
+
+
+ CLI
+
+
+ Manual configuration · {manual.file}
+
+
+ )}
+
+ {active === "Cursor" && (
+ <>
+
+ One click install
+
+
+ CLI
+
+
+ Manual configuration · {manual.file}
+
+
+ )}
+
+ {active === "VS Code" && (
+ <>
+
+ One click install
+
+
+
+
+ CLI
+
+
+ Manual configuration · {manual.file}
+
+
+ )}
+
+ {active === "Claude Desktop" && (
+ -
+ {[
+ <>Open Claude Desktop → Settings → Developer,
+ <>Click Edit Config to open
- + + {i + 1} + + {step} + + ))} +
claude_desktop_config.json,
+ <>Add the parseable entry under mcpServers using the URL {HOSTED_URL},
+ <>Save and restart Claude Desktop,
+ <>Look for the hammer icon in chat — Parseable tools appear there,
+ ].map((step, i) => (
+ -
+ {[
+ <>Open ChatGPT Desktop → Settings → Beta Features,
+ <>Enable Model Context Protocol (MCP),
+ <>Go to Settings → Connectors → Add MCP Server,
+ <>Set the URL to
- + + {i + 1} + + {step} + + ))} +
{HOSTED_URL} and authenticate,
+ <>Restart ChatGPT and look for the tools icon in chat,
+ ].map((step, i) => (
+
+ CLI
+
+
+ Manual configuration · {manual.file}
+
+
+ )}
+
+ {active === "Slack Bot" && (
+ -
+ {[
+ <>Go to parseable.com/slack and click Add to Slack,
+ <>Authorize the Parseable app in your workspace,
+ <>In any channel, type
- + {i + 1} + {step} + + ))} +
/parseable connect to link your Parseable instance,
+ <>Ask anything — @parseable show errors from api-gateway in the last 30 minutes,
+ <>Invite the bot to alert channels to get automatic root cause analysis on every firing alert,
+ ].map((step, i) => (
+
+
+
+ {/* Left: text */}
+
+
+
+
+ {/* Right: mock Slack thread */}
+ + Your entire observability stack, accessible from Slack +
++ Ask anything about your infrastructure directly in Slack. Query + logs, metrics, traces, and alerts in plain English — the Parseable + bot responds with real data from your stack, right in the thread. +
+-
+ {[
+ "Ask questions in plain English, get answers from your observability data",
+ "Works inside any channel — alert threads, incidents, on-call channels",
+ "Integrates with PagerDuty, Grafana, and custom webhooks",
+ "Respects your team's RBAC permissions",
+ ].map((item) => (
+
- + + {item} + + ))} +
+ {/* Slack header bar */}
+
+
+
+ {/* Messages */}
+
+
+
+
+
+
+ # alerts-production
+
+
+ {/* Alert */}
+
+
+
+ {/* User question */}
+
+
+
+
+
+
+
+ PagerDuty
+
+
+ 9:14 AM
+
+
+
+ 🔴 P1 alert: Error
+ rate on{" "}
+
+ api-gateway
+ {" "}
+ exceeded 5% for 3 min
+
+
+ {/* Bot response */}
+
+
+ SK
+
+
+
+
+
+
+ Shivam
+
+
+ 9:15 AM
+
+
+ + @parseable show me the errors from api-gateway in the last + 10 minutes +
+
+
+
+ 
+
+
+
+
+
+
+ Parseable
+
+
+ App
+
+
+ 9:15 AM
+
+
+
+
+ + Found{" "} + + 847 errors + {" "} + in the last 10 min — 94% from one route: +
+
+
+ POST /v2/ingest → 503 Service Unavailable{"\n"}upstream:
+ kafka-broker-3 (connection refused){"\n"}first seen:
+ 09:11:42 UTC
+
+
+ + Likely cause:{" "} + + kafka-broker-3 is unreachable + +
+
+ {/* Section header */}
+
+
+
+
+ {/* Mock conversation */}
+ + Debug production without opening a tab +
++ Ask a question in plain English. The MCP server translates it to + SQL, queries Parseable, and returns structured results — right in + your AI client. +
+
+ {/* User message */}
+
+
+
+
+ {/* Tool call chip */}
+
+ Why is the payment service throwing errors? Show me recent logs.
+
+
+
+
+ {/* Result table */}
+
+
+ query_sql
+ ·
+
+ SELECT * FROM logs WHERE service = 'payment-service'
+ AND level = 'ERROR' LIMIT 50
+
+
+
+
+
+ {/* Agent response */}
+
+
+ Result · 5 rows
+
+
+ 32ms
+
+
+
+
+
+
+
+ | + Timestamp + | ++ Service + | ++ Level + | ++ Message + | +
|---|---|---|---|
| + {row.ts} + | ++ {row.svc} + | ++ + {row.level} + + | ++ {row.msg} + | +
+
+
+
+
+ The payment service is experiencing repeated Stripe API timeouts
+ — 4 of the 5 recent errors are
+
+ charge_stripe: timeout after 5000ms
+
+ with one connection refused.
+
+ The api-gateway is also logging upstream timeouts to + payment-service:3001, suggesting the service is either + overloaded or its Stripe connection is degraded. I can check + latency trends or recent deploys if you'd like. +
+
+ {/* Header */}
+
+
+
+
+ {/* Tab toggle */}
+ + Two ways to connect +
++ Use the hosted MCP server for the fastest path, or run the + open-source server locally when you need full control. +
+
+
+
+ {/* Content */}
+
+ {(["hosted", "local"] as const).map((tab) => (
+
+ ))}
+
+
+ {/* Left: info card */}
+
+
+ {activeTab === "hosted" ? (
+ <>
+
+ Recommended
+
+
+
+ {/* Right: numbered steps */}
+
+
+ + Hosted MCP +
++ Parseable runs the MCP server for you. Connect using OAuth — + no infrastructure to manage. +
+-
+ {[
+ "OAuth 2.0 — same login as Parseable",
+ "No local dependencies, nothing to install",
+ "Managed by Parseable, always up to date",
+ "Works with Parseable Cloud accounts",
+ ].map((item) => (
+
- + + {item} + + ))} +
+
+ + Local MCP +
++ Run the Parseable MCP server on your own machine. Full + control over credentials and config. +
+-
+ {[
+ "Open source under Apache 2.0",
+ "Runs entirely inside your environment",
+ "Works with self-hosted Parseable instances",
+ "Full control over credentials and config",
+ ].map((item) => (
+
- + + {item} + + ))} +
+ {activeTab === "hosted" ? (
+ <>
+
+
+
+
+
+
+
+ + 1. Add the Parseable MCP server +
+ +
+ {`claude mcp add --transport http parseable ${HOSTED_URL}`}
+
+
+
+
+
+
+
+ + 2. Authenticate +
+
+ /mcp
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+ + Endpoint URL +
+ +
+ {HOSTED_URL}
+
+
+
+
+
+
+
+ + 1. Install +
+ +
+ npx -y @parseablehq/mcp
+
+
+
+
+
+
+
+ + 2. Configure +
+ +
+ {localConfig}
+
+
+
+
+ )}
+
+
+
+
+ + 3. Connect +
+ +
+
+ claude mcp add --transport http parseable
+ https://your-instance.parseable.com/mcp
+
+
+
- {/* Nav */}
-