{"slug": "how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model", "title": "How to Build a Website for Browsers and AI Agents From a Shared Content Model", "summary": "Walden Robotics' website, built by Monogram with Prismic and Next.js App Router, uses 19 reusable content components and publishes six discovery surfaces for AI agents and browsers from a shared content model. The platform delivers HTML to visitors and Markdown to automated clients, with HMAC-signed form fields to ensure server-side validation against tampering.", "body_md": "The [Walden Robotics website](https://monogram.io/work/walden-robotics) uses 19 reusable content components and publishes 6 discovery surfaces for automated clients. Both start with the same architectural decision: content is modeled once, then delivered in the form each client needs.\n\nWe built the platform with Prismic and the Next.js App Router. Editors assemble pages from structured components, visitors receive generated HTML, and clients that prefer structured text can request Markdown. Discovery endpoints tell automated systems where to find APIs, authorization metadata, agent documentation, and news content.\n\nThis architecture connects content modeling, delivery, and discovery. HTML and Markdown remain tied to the same records, while the discovery layer identifies the resources available to automated clients.\n\nEvery page on the Walden Robotics site is assembled from structured content in Prismic. We created 19 Slice Machine components covering hero sections, calls to action, lead forms, content blocks, navigation, announcements, and supporting layouts.\n\nA slice defines the fields editors control, while the application controls how those fields render. Editors can combine sections into new pages without changing the component code. Developers retain control over rendering, accessibility, search optimization, and visual consistency.\n\nThe platform also separates page content from shared records. Navigation, footer content, SEO defaults, and global announcements each have a single source of truth. A change to a global announcement is made once in Prismic and reflected wherever the application renders that record.\n\nThat distinction gives the content model clear ownership:\n\nThese categories can live in the same CMS, but they do not carry the same risk. Changing a headline affects presentation. Changing a validation rule affects how the application accepts input.\n\nThe site uses the Next.js App Router with static generation, caching, and automatic revalidation when content changes in Prismic. Visitors receive generated pages, while editors can publish updates without requesting a manual rebuild.\n\nDraft Mode provides a separate path for unpublished work. Authorized editors can preview a page before publication without changing how public traffic is served. Preview remains an editorial state, and the public site keeps the performance characteristics of static delivery.\n\nStatic generation makes cache freshness an explicit part of publishing. The platform connects Prismic content changes to revalidation, so editors work in the CMS while the application updates its generated output.\n\nWalden's marketing team defines forms in Prismic, including field types, validation rules, placeholder text, and success messages. The same system supports contact forms, campaign landing pages, and promotional experiences.\n\nOnce CMS data controls application behavior, the browser becomes an untrusted boundary. Browser validation improves the user experience, but a user or script can modify a request before submission. The platform signs every form field definition with HMAC before the form reaches the browser and validates the submitted data on the server.\n\nHMAC, or hash-based message authentication code, uses a secret key to produce a signature for a message. The server can recompute that signature to determine whether the field definition changed after it was issued. HMAC verifies integrity and authenticity; it does not encrypt the definition.\n\nThe form pipeline also accepts requests only from approved Basin endpoints. Honeypot fields, request timeouts, and redirect controls provide additional protection against automated abuse and malicious requests. Each control addresses a separate failure mode.\n\nThe reusable pattern is a trust boundary around behavioral configuration:\n\nEditorial flexibility expands what a marketing team can configure; server-side enforcement keeps that flexibility inside defined limits.\n\nThe same ownership principle applies to career listings. Available positions come from Rippling's public applicant tracking system, where recruiters already manage openings. The Careers section stays current without requiring marketing or engineering to copy each role into Prismic.\n\nPrismic remains authoritative for the editorial experience around those listings. Rippling remains authoritative for recruiting data. Next.js combines both sources in the rendered page, preserving the workflow of the team responsible for each type of information.\n\nThe platform supports HTTP content negotiation, allowing a client to request Markdown when structured text is preferable to HTML. News articles, CMS pages, and supporting content are also available through familiar `.md`\n\nURLs.\n\nHTTP content negotiation allows a client and server to select a representation of a resource. On Walden's platform, human visitors can receive the full website experience, while automated clients can receive Markdown generated from the same underlying content.\n\nMarkdown does not replace HTML. HTML carries document semantics, links, interface behavior, and presentation for browsers. Markdown gives clients that primarily need headings, paragraphs, and lists a direct representation of the content. Generating both from Prismic avoids a second editorial repository and keeps the representations tied to the same source records.\n\nA clean representation has limited value if software has to guess where it lives. Walden's platform publishes 6 discovery surfaces:\n\n`/.well-known/api-catalog`\n\n`/.well-known/mcp/server-card.json`\n\n`/.well-known/agent-skills/`\n\n`/.well-known/oauth-authorization-server`\n\n`sitemap.md`\n\nwith Link headers`/api/news/articles`\n\nwith an OpenAPI 3.1 descriptionDiscovery and representation solve different problems. Markdown provides content in a form an automated client can process. Catalogs, descriptions, and Link headers help that client locate the available resources and understand how to use them.\n\nThe `/.well-known/`\n\nprefix has a specific role. [RFC 8615](https://www.rfc-editor.org/info/rfc8615/) defines it as the path prefix for registered well-known locations. Walden's `/.well-known/api-catalog`\n\nendpoint follows [RFC 9727](https://www.rfc-editor.org/rfc/rfc9727.html), which defines a discoverable location and link relation for an API catalog.\n\nThe news API uses [OpenAPI 3.1](https://spec.openapis.org/oas/v3.1.0.html), a language-agnostic interface description for HTTP APIs. It allows people and software to understand a service without inspecting its source code or observing network traffic.\n\nOther resources in the list, including the MCP server card and agent skill documentation, should be described according to the implementation or convention they follow. Placing a resource under `/.well-known/`\n\ndoes not automatically make its contents an official standard.\n\nThe Walden Robotics platform establishes 4 principles that apply beyond this project:\n\nAt Monogram, we treat these as parts of the same platform architecture. Content ownership determines what the system can render, validation determines which instructions it can trust, and discovery determines which clients can use the result.\n\nUse formal standards where they exist, document the remaining surfaces precisely, and keep every representation tied to its authoritative source.", "url": "https://wpnews.pro/news/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model", "canonical_source": "https://dev.to/madebymonogram/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model-5dnc", "published_at": "2026-09-02 20:08:22+00:00", "updated_at": "2026-09-02 20:24:07.347333+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "ai-infrastructure"], "entities": ["Walden Robotics", "Monogram", "Prismic", "Next.js"], "alternates": {"html": "https://wpnews.pro/news/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model", "markdown": "https://wpnews.pro/news/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model.md", "text": "https://wpnews.pro/news/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model.txt", "jsonld": "https://wpnews.pro/news/how-to-build-a-website-for-browsers-and-ai-agents-from-a-shared-content-model.jsonld"}}