From c20d121a1f663be13e7364b1190a3343f3505d2f Mon Sep 17 00:00:00 2001 From: Caio Pizzol <97641911+caio-pizzol@users.noreply.github.com> Date: Thu, 13 Aug 2026 10:38:38 -0300 Subject: [PATCH 1/2] feat(web): add CLI page --- apps/web/scripts/prerender.ts | 31 ++++++- apps/web/src/components/Navbar.tsx | 15 +++- apps/web/src/data/seo.ts | 10 ++- apps/web/src/main.tsx | 2 + apps/web/src/pages/Cli.tsx | 125 +++++++++++++++++++++++++++++ apps/web/src/pages/Home.tsx | 6 +- apps/web/src/pages/Mcp.tsx | 56 ++++++++++--- 7 files changed, 223 insertions(+), 22 deletions(-) create mode 100644 apps/web/src/pages/Cli.tsx diff --git a/apps/web/scripts/prerender.ts b/apps/web/scripts/prerender.ts index 4cc98dc..e583be8 100644 --- a/apps/web/scripts/prerender.ts +++ b/apps/web/scripts/prerender.ts @@ -122,6 +122,25 @@ function homePageHtml(): string {

The OOXML spec, explained by people who actually implemented it.

Live previews, implementation notes, and what the spec doesn't tell you.

Browse Reference +Get the CLI +${navHtml()} +`; +} + +function cliPageHtml(): string { + return `
+

OOXML reference from your terminal

+

Search the ECMA-376 specification and inspect OOXML schemas without leaving your terminal.

+

Install

+

Node.js 20 or later is required.

+
npm install --global @ooxml-dev/cli
+

Try it

+
ooxml login
+ooxml search "paragraph spacing"
+ooxml element w:p
+

The CLI uses the free, hosted ooxml.dev service. You may need to create an account and sign in. Sign-in is only used to control usage.

+

Use it with a coding agent

+
npx skills add superdoc/ooxml-dev --skill research-ooxml -g -y
${navHtml()}
`; } @@ -129,7 +148,8 @@ ${navHtml()} function mcpPageHtml(): string { return `

OOXML reference for AI assistants

-

Connect your MCP-compatible client and get both natural-language search across the ECMA-376 spec and deterministic schema lookup over the parsed XSDs.

+

Latest MCP (2026-07-28) · Stateless

+

Connect an MCP client to search spec prose, inspect XSD schemas, look up OPC package metadata, and query preset shape guides.

Prose search

+

Package metadata

+ +

Preset shapes

+

What is MCP?

-

The Model Context Protocol (MCP) is an open standard that lets AI assistants connect to external data sources and tools. Works with Claude Code, Codex CLI, Cursor, and any MCP-compatible client.

+

The Model Context Protocol (MCP) is an open standard that lets AI assistants connect to external data sources and tools. This server works with Claude Code, Codex CLI, Cursor, and other clients that support Streamable HTTP.

${navHtml()}
`; } @@ -223,7 +247,7 @@ function buildHead(path: string): string { }, }; meta.push(``); - } else if (path === "/mcp" || path === "/spec") { + } else if (path === "/cli" || path === "/mcp" || path === "/spec") { const jsonLd = { "@context": "https://schema.org", "@type": "WebPage", @@ -252,6 +276,7 @@ function buildHead(path: string): string { function getContentHtml(path: string): string { if (path === "/") return homePageHtml(); + if (path === "/cli") return cliPageHtml(); if (path === "/mcp") return mcpPageHtml(); if (path === "/spec") return specPageHtml(); diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx index ed1691e..81646ee 100644 --- a/apps/web/src/components/Navbar.tsx +++ b/apps/web/src/components/Navbar.tsx @@ -14,6 +14,7 @@ export function Navbar({ sticky = false, maxWidth = false, onSearchClick }: Navb const location = useLocation(); const isDocsActive = location.pathname.startsWith("/docs"); const isSpecActive = location.pathname === "/spec"; + const isCliActive = location.pathname === "/cli"; const isMcpActive = location.pathname === "/mcp"; const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -34,9 +35,12 @@ export function Navbar({ sticky = false, maxWidth = false, onSearchClick }: Navb Reference + + Spec +
- - Spec + + CLI new @@ -84,9 +88,12 @@ export function Navbar({ sticky = false, maxWidth = false, onSearchClick }: Navb setMobileMenuOpen(false)}> Reference + setMobileMenuOpen(false)}> + Spec +
- setMobileMenuOpen(false)}> - Spec + setMobileMenuOpen(false)}> + CLI new diff --git a/apps/web/src/data/seo.ts b/apps/web/src/data/seo.ts index 28ef7a2..8dcb9a2 100644 --- a/apps/web/src/data/seo.ts +++ b/apps/web/src/data/seo.ts @@ -16,7 +16,13 @@ const staticPages: Record = { "/mcp": { title: "ECMA-376 MCP Server — Search the OOXML Spec with AI | ooxml.dev", description: - "Search 18,000+ OOXML spec chunks with natural language. Works with Claude Code, Cursor, and any MCP-compatible client.", + "Search OOXML spec prose, inspect XSD schemas, look up OPC package metadata, and query preset shapes from an MCP client.", + type: "website", + }, + "/cli": { + title: "OOXML CLI — Search ECMA-376 from Your Terminal | ooxml.dev", + description: + "Search the ECMA-376 specification and inspect OOXML schemas from your terminal or a coding agent.", type: "website", }, "/spec": { @@ -54,7 +60,7 @@ export function getSeoMeta(path: string): SeoMeta { } export function getAllPaths(): string[] { - const paths = ["/", "/mcp", "/spec", "/docs"]; + const paths = ["/", "/cli", "/mcp", "/spec", "/docs"]; for (const slug of Object.keys(docs)) { if (slug === "index") continue; paths.push(`/docs/${slug}`); diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx index 8d6e5dd..88e097f 100644 --- a/apps/web/src/main.tsx +++ b/apps/web/src/main.tsx @@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client"; import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom"; import { DocsLayout } from "./pages/docs/Layout"; import { DocsPage } from "./pages/docs/Page"; +import { Cli } from "./pages/Cli"; import { Home } from "./pages/Home"; import { Mcp } from "./pages/Mcp"; import { NotFound } from "./pages/NotFound"; @@ -14,6 +15,7 @@ const router = createBrowserRouter([ element: , children: [ { path: "/", element: }, + { path: "/cli", element: }, { path: "/mcp", element: }, { path: "/spec", element: }, { diff --git a/apps/web/src/pages/Cli.tsx b/apps/web/src/pages/Cli.tsx new file mode 100644 index 0000000..308f603 --- /dev/null +++ b/apps/web/src/pages/Cli.tsx @@ -0,0 +1,125 @@ +import { useState } from "react"; +import { Footer } from "../components/Footer"; +import { Navbar } from "../components/Navbar"; +import { getSeoMeta } from "../data/seo"; +import { useDocumentTitle } from "../hooks/useDocumentTitle"; + +const INSTALL_COMMAND = "npm install --global @ooxml-dev/cli"; +const EXAMPLE_COMMANDS = `ooxml login +ooxml search "paragraph spacing" +ooxml element w:p`; +const SKILL_COMMAND = "npx skills add superdoc/ooxml-dev --skill research-ooxml -g -y"; + +export function Cli() { + useDocumentTitle(getSeoMeta("/cli").title); + + return ( +
+ + +
+
+
+ OOXML CLI +
+

OOXML reference from your terminal

+

+ Search the ECMA-376 specification and inspect OOXML schemas without leaving your + terminal. +

+
+ +
+

Install

+

+ Node.js 20 or later is required. +

+ +
+ +
+

Try it

+

+ Sign in, then search the spec or inspect an OOXML element. +

+ +
+ +
+ The CLI uses the free, hosted ooxml.dev service. You may need to create an account and + sign in. Sign-in is only used to control usage. +
+ +
+

Use it with a coding agent

+

+ Install the CLI first, then add the research-ooxml skill. It shows coding + agents how to combine spec search with schema evidence. +

+ +
+ + +
+ +
+
+ ); +} + +function CommandBlock({ + command, + label, + multiline = false, +}: { + command: string; + label: string; + multiline?: boolean; +}) { + const [copied, setCopied] = useState(false); + + const copy = () => { + navigator.clipboard.writeText(command); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
+ {multiline ? ( + 
+					{command}
+
+ ) : ( + + {command} + + )} + +
+ ); +} diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx index ec99512..a7827ba 100644 --- a/apps/web/src/pages/Home.tsx +++ b/apps/web/src/pages/Home.tsx @@ -35,13 +35,13 @@ export function Home() { NEW - OOXML MCP — deterministic schema lookup for elements, attributes, types, enums + Use the OOXML reference from your terminal - Connect → + Get the CLI →
diff --git a/apps/web/src/pages/Mcp.tsx b/apps/web/src/pages/Mcp.tsx index 5712e28..821ec8f 100644 --- a/apps/web/src/pages/Mcp.tsx +++ b/apps/web/src/pages/Mcp.tsx @@ -4,7 +4,7 @@ import { Navbar } from "../components/Navbar"; import { getSeoMeta } from "../data/seo"; import { useDocumentTitle } from "../hooks/useDocumentTitle"; -const MCP_ENDPOINT = `${import.meta.env.VITE_API_URL}/mcp`; +const MCP_ENDPOINT = `${import.meta.env.VITE_API_URL ?? "https://api.ooxml.dev"}/mcp`; const CLAUDE_COMMAND = `claude mcp add --transport http ooxml ${MCP_ENDPOINT}`; const CODEX_COMMAND = `codex mcp add ooxml --url ${MCP_ENDPOINT}`; const CODEX_TOML = `[mcp_servers.ooxml] @@ -65,6 +65,14 @@ const PACKAGE_TOOLS = [ }, ]; +const PRESET_SHAPE_TOOLS = [ + { + name: "ooxml_preset_shape", + description: + "Look up the ordered adjustment-guide names for a DrawingML preset shape from Part 1 Annex D.", + }, +]; + const EXAMPLE_QUERIES = [ "How do I add borders to a table cell?", "How does numbering work in WordprocessingML?", @@ -99,17 +107,26 @@ export function Mcp() {
{/* Header */}
-
- ⚡ MCP Server +
+
+ ⚡ MCP Server +
+
+ Latest MCP (2026-07-28) · Stateless +

OOXML reference for AI assistants

- Three tool families: prose search across 18,000+ spec chunks, deterministic schema - lookup over the parsed XSDs, and curated OPC package metadata. Ask in natural language, - or query the structure directly. + Search spec prose, inspect XSD schemas, look up OPC package metadata, and query preset + shape guides from your AI assistant.

+
+ The hosted service is free. You may need to create an account and sign in when you + connect. Sign-in is only used to control usage. +
+ {/* Endpoint */}

Endpoint

@@ -214,7 +231,7 @@ export function Mcp() { {activeTab === "other" && ( <>

- Use the endpoint URL with any MCP-compatible client: + Use the endpoint URL with an MCP client that supports Streamable HTTP:

@@ -292,6 +309,26 @@ export function Mcp() {
+ {/* Preset shape tools */} +
+

Preset shapes

+

+ Adjustment guides extracted from ECMA-376 Fourth Edition, Part 1 Annex D. +

+
+ {PRESET_SHAPE_TOOLS.map((tool) => ( +
+
+ + {tool.name} + +

{tool.description}

+
+
+ ))} +
+
+ {/* Example Queries */}

Example Queries

@@ -325,9 +362,8 @@ export function Mcp() { tools.

- By connecting to this MCP server, your AI assistant gains prose search across the - ECMA-376 specification, deterministic schema lookup over the parsed XSDs, and curated - OPC package metadata—making it much easier to work with Office Open XML. + Connect this server to search the ECMA-376 specification, inspect XSD schemas, look up + OPC package metadata, and query preset shape guides.

From 819ebd2e21ff4f2ddb95cbc40cffdbc947b4a291 Mon Sep 17 00:00:00 2001 From: Caio Pizzol <97641911+caio-pizzol@users.noreply.github.com> Date: Thu, 13 Aug 2026 10:53:02 -0300 Subject: [PATCH 2/2] fix(web): handle clipboard errors --- apps/web/src/pages/Cli.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/apps/web/src/pages/Cli.tsx b/apps/web/src/pages/Cli.tsx index 308f603..20bc99e 100644 --- a/apps/web/src/pages/Cli.tsx +++ b/apps/web/src/pages/Cli.tsx @@ -93,12 +93,17 @@ function CommandBlock({ label: string; multiline?: boolean; }) { - const [copied, setCopied] = useState(false); + const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "failed">("idle"); - const copy = () => { - navigator.clipboard.writeText(command); - setCopied(true); - setTimeout(() => setCopied(false), 2000); + const copy = async () => { + try { + if (!navigator.clipboard?.writeText) throw new Error("Clipboard API unavailable"); + await navigator.clipboard.writeText(command); + setCopyStatus("copied"); + } catch { + setCopyStatus("failed"); + } + setTimeout(() => setCopyStatus("idle"), 2000); }; return ( @@ -117,8 +122,9 @@ function CommandBlock({ onClick={copy} className="shrink-0 text-xs font-medium text-white hover:text-[var(--color-syntax-value)]" aria-label={`Copy ${label}`} + aria-live="polite" > - {copied ? "Copied" : "Copy"} + {copyStatus === "copied" ? "Copied" : copyStatus === "failed" ? "Copy failed" : "Copy"}
);