DEV Community

Plopino
Plopino

Posted on

From an AI-generated HTML report to a link you can update

#mcp #webdev #html #tutorial

An agent finishes a report and leaves you with index.html. The next task is getting it to someone who should be able to open it in a browser. Here is a concrete workflow using Plopino, the publishing tool maintained by this account.

This is for static HTML, CSS and browser JavaScript. Publishing these files does not deploy a database, run your local server or make a private API key safe to embed.

Start with a small report

Save this as index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Project review</title>
<style>body{max-width:42rem;margin:3rem auto;padding:1rem;font:18px/1.6 system-ui}button{font:inherit}</style>
<h1>Project review — version 1</h1>
<p>A fictional report for demonstrating publication.</p>
<button onclick="document.querySelector('#detail').hidden=false">Show next step</button>
<p id="detail" hidden>Review the draft with your teammate.</p>
</html>
Enter fullscreen mode Exit fullscreen mode

The sample has no external dependencies. For a real report, check that you are comfortable making every included file public. Remove confidential data and private keys.

Publish from the terminal

With Node.js 20 or later:

npx -y plopino publish ./index.html
Enter fullscreen mode Exit fullscreen mode

The command prints the public URL. Open it in another browser and test the button. First publication can be anonymous; a persistent local identity is retained for later claiming. Keep the CLI's configuration directory if you want to claim those uploads later.

For a report with local images and stylesheets, publish its output directory instead:

npx -y plopino publish ./report
Enter fullscreen mode Exit fullscreen mode

Put index.html at that directory's root. Select only the files intended for sharing, rather than your whole development workspace.

Let an MCP client publish it

For clients using the common mcpServers configuration shape:

{
  "mcpServers": {
    "plopino": {
      "command": "npx",
      "args": ["-y", "plopino"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Your client's configuration location and shape may differ. After the server is connected, ask the agent: “Publish the report directory and give me its public link.” The publish_path tool accepts a local file or directory; publish_page accepts generated text directly. Review the selected files before authorizing publication in your client.

Revise without sending a different URL

Anonymous first publication and managed updates are separate steps. For the CLI, create an account on the website, then run:

npx -y plopino login
Enter fullscreen mode Exit fullscreen mode

This claims available anonymous uploads associated with this CLI's saved identity. Browser login alone does not claim the CLI's uploads. Password login requires an account with a password; token-based access is available for other account setups.

Change the heading in your local report to “version 2”, then update the URL returned by your own first publication:

npx -y plopino publish ./index.html --update https://plopino.com/b/YOUR_BOARD_ID/
Enter fullscreen mode Exit fullscreen mode

Reopen the original URL and check the new heading. An MCP client can instead use the tool's update_url parameter with an appropriate account token. Keep that token in the client's secret configuration, never in the report or a public URL.

Check the result, not just the upload response

  • Open the link without your local server running.
  • Check local images and stylesheets, not just the heading.
  • Open a nested page directly and refresh it.
  • Verify any external API works from the published origin.
  • Remember that editing a shared URL changes what later readers see; retain a separate snapshot when you need an agreed version.

For a browser-only start, the HTML sharing guide and interactive example includes an uploader and an existing publish/save/update walkthrough. The MCP source and setup instructions document the available tools.

Disclosure: this is a Plopino product tutorial. AI assistance was used to prepare this article from the current implementation and documentation. The sample report is fictional; this is not a user testimonial or a claim of measured growth.

Top comments (0)