This project started as an experiment: could we quickly prototype a headless, content-rich news site using Arc XP’s View API as our backend and AI-assisted code editors to minimize manual effort? Astro served as our frontend framework of choice, but the real focus was testing how far we could go using modern content APIs, automation, and a vibe-driven, exploratory approach to development. All this while keeping things lightweight and maintainable. Along the way, we explored how far AI-assisted development tools can take us when building with a modern static site generator and a powerful public content delivery API.
We also captured the full process in a long-form video, and this post walks through the key steps and decisions we made—complete with timestamps, context, and screenshots to help you follow along or revisit later.
Here are key chapters from the video. You can also click the “watch on the video” links in each section that jumps to the specific chapter.
🧠 Planning (How We’ll Build)
▶️ Watch how we plan in the video
To kick things off, we outlined the basic blueprint for what we were trying to build: a headless, editorial-style site driven entirely by dynamic content. We started by reviewing Arc XP’s sample mobile app to understand the data structure and existing taxonomy. From there, we decided to replicate the same content flow—homepage, collections, articles, and video pages—except in a browser-based experience.
 |  |
The content would be powered by the View API, Arc XP’s public delivery API optimized for performance and structured storytelling. On the frontend, we chose Astro for its component-first model, static generation capabilities, and growing momentum in the content-heavy site space. Its hybrid rendering approach gave us flexibility to scale from static to dynamic as needed.
We also decided early on to use Windsurf, an AI-powered IDE based on VSCode, to accelerate development. It let us chat with the codebase, scaffold layout components, and generate boilerplate scripts, making the build feel more conversational and fluid.
We mapped out how different content types (collections, navigation, and articles) would flow through the site using View API endpoints. Planning these surfaces ahead of time helped us stay grounded while giving our AI tooling the right scaffolding to plug into.
🚀 Getting Started (Windsurf, Astro, Tailwind)
▶️ Watch how we set things up in the video
We scaffolded the project using Astro’s CLI with a minimal starter template. From the first command, it was clear that Astro’s developer experience is designed to be fast and frictionless.
With the project running locally in seconds, we jumped into Windsurf, an AI-first code editor based on VSCode, which we used to interact with code more conversationally.
Tailwind was our choice for styling. We installed it early to speed up iteration on layout and visual hierarchy. The AI agent helped generate the initial layout—including header, footer, and placeholder sections—and responded well to iterative feedback. We hit a few bumps with PostCSS plugins, but AI quickly patched the misconfigurations and moved on.
🔐 Generating Delivery API Keys for View API
▶️ Watch how we generate Delivery API keys and assign to View API usage
This step focused on authentication. To fetch content from the View API, we needed to create delivery API keys. These are provisioned via Arc XP’s Developer Center using a short-lived admin token. We walked through generating that token, then used Windsurf to write a set of utility scripts that created, assigned, and verified the keys. We had some hiccups and had to give guidance to AI editor to use correct API endpoints and use correct request/response fields from these endpoints along the way.
Most of these scripts were AI-generated and refined through iteration. The agent created a proper folder structure and persisted metadata across scripts. Once the keys were ready, we discarded the admin token for security, leaving us with a clean, usable View API key.
🗺️ Getting Site Navigation from View API
▶️ Watch how we make our first View API call to pull site navigation
Next, we pulled in site-level navigation using the View API’s site hierarchy endpoint. After choosing the appropriate mobile navigation ID, the API returned a JSON tree that included top-level menu items like Top Stories, Politics, and Sports. These were transformed into a simplified menu component.
We also split navigation into its own Astro component to keep layout concerns clean. We let the AI generate the fetch logic and integration, only stepping in to correct gaps like missing nav_title usage or deep-nesting issues. At the end we created dynamic site navigation coming from View API:
📰 Get Stories from View API
▶️ Watch how we get stories by collection in View API
With navigation in place, we were able to fetch stories from View API by collection ID. Then we implemented a helper method, getStoriesByCollectionId, to pull content dynamically. These collections — such as “Top Stories” and “Tech” — provides both metadata and story content. Each story is rendered through a reusable component, and collection metadata is used to label the section appropriately.
🗂️ Implementing Collections on Homepage
▶️ Watch how we implement all collections on the homepage
I now render multiple collections on the homepage using the dynamic data fetched earlier. Each section (Tech, Politics, Sports) is wrapped in a reusable Section component that takes a title and a list of stories. The AI editor helps abstract the layout into smaller blocks, which makes the project more scalable. We also ensure that edge cases, such as empty collections, are handled without breaking the UI. This is where our homepage started to come together:
▶️ Implementing Video Collection on Homepage
▶️ Watch how we implemented and styled video content on homepage
Next, we add a dedicated video section to the homepage. This is visually distinct and features thumbnail overlays with play icons. Video content is fetched using the same helper function, with results filtered by content type. This section is inserted below Top Stories and is styled with Tailwind CSS to maintain a visual hierarchy.
📜 Implementing Article Detail Page
To support article detail pages, we implement dynamic routing that matches URLs using a date-slug pattern (e.g., /2023/05/15/sample-headline). Once matched, the route fetches the full article ANS object via View API and renders it using a composition of components. The article displays its title, byline, cover image, and body blocks. We also fetch and render related stories based on taxonomy data like section ID.
We also continued to create “More stories” section at the bottom of article pages:
🎁 Wrapping Up
What started as a quick experiment turned into a surprisingly smooth end-to-end build of a headless news site—thanks in large part to View API’s clean content model and the powerful combination of Astro and AI-assisted development workflows. From authentication and navigation to content rendering and dynamic routing, each piece came together with minimal friction.
Beyond the technical stack, this build reaffirmed that with the right tooling and automation, it’s possible to go from concept to production-grade architecture in very short time. Whether you’re building a proof of concept or exploring your next stack decision, we hope this walkthrough gave you a clear, practical example of what’s possible.