Agent-Native Newsroom Portal

An agent-native newsroom where editors and browser agents collaboratively move stories from draft to publication through 22 real WebMCP tools.

Comment

Inspiration

A newsroom is a coordination machine.

A story moves through many steps before it becomes publishable: assignment, drafting, editing, review, approval, media selection, rights verification, and finally handoff to a publishing system.

Humans are good at navigating these workflows through interfaces. Agents face a different problem: a traditional website tells them what the interface looks like, but not necessarily what the application can do in a structured way.

That led to a simple question:

What would a newsroom look like if the website itself were designed for both people and agents?

That question became Agent-Native Newsroom Portal.

Instead of adding a chatbot to a newsroom, I built a newsroom whose actual capabilities can be exposed directly to external browser agents through WebMCP.

What it does

Agent-Native Newsroom Portal is an internal newsroom workspace built around three connected areas.

Story Desk

The Story Desk manages the editorial lifecycle from draft to publication.

Editors can:

  • Create and edit stories
  • Assign stories to editors
  • Submit stories for review
  • Approve or request revisions
  • Reorder the editorial run
  • Track the complete story history

The application enforces valid editorial state transitions instead of allowing arbitrary status changes.

Media Vault

The Media Vault manages newsroom images together with the metadata required to publish them safely.

Each asset can contain:

  • License information
  • Allowed publishing channels
  • Expiration dates
  • Attribution requirements
  • Photographer/source information
  • Alt text

This makes the workflow more useful than simply searching for an image.

Can this image actually be used for this publication?

The system can detect expired rights and identify usable replacement assets.

Handoff Engine

The Handoff Engine turns approved editorial content into publication-ready output.

Before a story can be handed off, it validates:

  • Editorial approval
  • Editor assignment
  • Headline and body content
  • Media attachment
  • Lead image
  • Media rights
  • Attribution
  • Web publishing permissions
  • Alt text

Once the checks pass, the system generates a structured web publishing payload and can execute the simulated handoff.

WebMCP

The WebMCP layer is the core experiment.

The application exposes 22 structured WebMCP tools covering newsroom operations such as:

  • Finding and reading stories
  • Creating and updating stories
  • Approving stories
  • Reordering stories
  • Searching and inspecting media
  • Checking media rights
  • Replacing media
  • Updating captions and alt text
  • Renewing media licenses
  • Validating publication readiness
  • Preparing publishing payloads
  • Executing the handoff

There is deliberately no in-app chatbot.

The website itself becomes agent-operable.

A human editor can use the normal interface, while an external browser agent can use the same application capabilities through WebMCP. Both interact with the same underlying newsroom state.

How we built it

I built the application as a full-stack web product using:

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Prisma
  • SQLite for local development
  • PostgreSQL in production
  • Zustand

The application is deployed on Vercel.

The architecture separates the user interface, REST API routes, business logic, database, and WebMCP integration.

One of the most important design decisions was to make the WebMCP tools use the same business-logic layer as the human UI.

For example, approve_story, replace_story_media, and execute_web_handoff are not special demo-only operations. They perform real application operations and follow the same validation and workflow rules used by the normal interface.

WebMCP tools are registered through the browser API:

document.modelContext.registerTool(...)

Each tool exposes structured inputs and structured results.

I also seeded the application with realistic newsroom data, including expired media rights and valid replacement assets, so the agent workflow has real problems to discover and resolve.

Challenges we ran into

The hardest part was not registering WebMCP tools.

It was making them trustworthy.

Once an external agent can change application state, the application needs strong rules around what the agent is allowed to do and when an operation should fail.

For example:

  • Editing an approved story should invalidate its previous approval.
  • Expired media should not pass publication validation.
  • Missing alt text should block publication.
  • Invalid editorial transitions should be rejected.
  • The final handoff should be validated again on the server.

Another challenge was keeping human and agent interaction synchronized.

When an agent changes the application, the human-facing UI must immediately reflect that change. Both paths therefore operate on the same underlying application state.

Testing also uncovered a subtle bug in the media attachment flow.

When isPrimary was omitted, it was being treated as false, which prevented the first attached image from automatically becoming the lead image.

I fixed the API and WebMCP tool behavior and re-tested the workflow.

For WebMCP testing, I used the Brave browser and the Chrome extension WebMCP - Model Context Tool Inspector while its free credits were available. I also used ChatGPT to help prepare the demo and GLM for additional WebMCP QA. I focused that external testing on the main workflow tools.

Accomplishments that we're proud of

We are proud that the project became more than a visual WebMCP demonstration.

The application exposes a real, stateful agent workflow across the newsroom.

The main publication path is:

Create Story
    ↓
Update Story
    ↓
Editorial Review
    ↓
Approve
    ↓
Attach / Replace Media
    ↓
Check Rights
    ↓
Validate Publication
    ↓
Prepare Web Handoff
    ↓
Execute Handoff
    ↓
Published

The agent can perform these operations through WebMCP without having to guess its way through the visual interface.

We are also proud of the guardrails around agent actions.

WebMCP is not treated as a back door around newsroom rules. Agent operations go through the same application logic and validation as human actions.

The repository also includes an end-to-end WebMCP validation report covering the project's tool surface and failure handling.

What we learned

The biggest lesson was that building an agent-native application is different from adding AI to an existing application.

The difficult question is not:

“Where should I put the chatbot?”

It is:

“What should the agent actually be able to do?”

Good WebMCP tools need meaningful boundaries, clear inputs, predictable outputs, validation, and safe failure behavior.

I also learned that useful human-agent systems do not need to be completely autonomous.

For a newsroom, the agent can investigate, prepare, validate, and execute structured work, while the human retains editorial judgment and final authority.

That led to the interaction model at the heart of this project:

The agent handles structured work. The human remains the decision-maker.

Building the project also changed how I think about web applications. A website is not only a collection of screens and buttons. It can also expose a structured set of capabilities that other intelligent systems can understand and use.

What's next for Agent-Native Newsroom Portal

This project is a starting point for a larger agent-native newsroom.

The next step would be to move beyond individual publishing tasks and let agents help coordinate the wider editorial operation.

For example, a newsroom agent could:

  • Monitor upcoming deadlines
  • Identify stories at risk of missing publication
  • Detect missing media or metadata
  • Find unresolved workflow blockers
  • Prepare recommended actions for editors
  • Coordinate handoffs across publishing channels

I would also like to connect the Handoff Engine to real publishing systems instead of the current simulated delivery flow.

Another area I want to explore is agent permissions: allowing a newsroom to define which actions an agent can perform automatically and which actions always require explicit human approval.

The long-term idea is simple:

Don't build AI around the newsroom. Build the newsroom so humans and agents can work together inside it.

That is the experiment behind Agent-Native Newsroom Portal.

Built With

  • accessibility
  • agent-native-web
  • browser-agents
  • content-management
  • editorial-workflow
  • json-schema
  • media-rights
  • next.js
  • postgresql
  • prisma
  • react
  • rest-api
  • shadcn/ui
  • sqlite
  • tailwind-css
  • typescript
  • vercel
  • webmcp
  • zustand
Share this project:

Updates

Submission history