How to Build a Secure Client Portal for Claude Artifacts

Why Build a Client Portal for Claude Artifacts?

Claude Artifacts are much more useful when people can interact with them directly. A screenshot works for a quick Slack message or one-off update, but it loses the interactivity of the original report.

A client portal gives you another option when the person you're sharing with isn't part of your Claude organization. You can host the report behind controlled access and give the client a clean page where they can open the interactive version.

What the Client Reporting Portal Includes

The setup has two main pages. The first is the client-facing portal, which lists the reports available to view. The second is an upload page you use to manage those reports.

From the upload page, you can add a downloaded HTML report, change its title or date, add a description, rename an existing report, or remove one that's no longer relevant. The client-facing portal then reflects the updated report library.

Use Supabase to Store Interactive Report Files

In this workflow, Supabase handles the storage layer for the portal.

I use one Supabase project for the broader portal environment and then create a separate storage bucket for each client. That keeps each client's uploaded report files organized inside its own location.

The Portal Setup Skill walks through creating the project, setting up the client bucket, and configuring the permissions needed for the portal to read and manage the reports.

Keep Supabase Credentials and Permissions Scoped Correctly

The portal needs information about the Supabase project so it can access the correct storage location. I prefer to add those configuration values manually rather than passing credentials into the AI while the portal files are being generated.

Only credentials intended for use in client-side applications should ever be included in browser-delivered code. Privileged or service-level keys should remain server-side and should never be embedded in the portal HTML.

Generate the Portal and Upload Pages

The Portal Setup Skill generates the two core pages used in the workflow: the main portal page and the report upload page.

You can customize the look and feel during setup by giving Claude your website, brand guidelines, logo, profile image, footer content, or other design direction.

Once the files are generated, you can review them locally, add the required Supabase configuration, and deploy the finished folder to your hosting environment.

Host the Client Portal with Netlify

I use Netlify to host the front end because deploying a static portal is straightforward. You can create a new site by uploading the generated portal folder and then customize the site's URL.

I typically use a simple naming convention such as the client name followed by -portal or -project so the destination is easy to recognize and share.

Password-Protect the Client Portal

Because these reports may contain client or company data, the portal should not be treated like a public marketing page.

In Netlify, I enable password protection for the portal and share those credentials only with the people who should have access.

Hosting plans and feature availability can change, so check Netlify's current plan requirements before relying on password protection for a production client workflow.

Upload a Claude Artifact as an Interactive HTML Report

Once the portal is live, the workflow is simple. Download the Claude Artifact as an HTML file and drag it into the portal's upload page.

From there, you can adjust the report title, date, or description and upload it into the client's report library.

The report then appears on the client-facing portal and renders as an interactive page instead of a static image.

Rename, Replace, and Delete Client Reports

The upload interface also acts as a lightweight report manager. If a title needs to change, you can rename the report. If an old report is no longer relevant, you can remove it.

That lets the client-facing page stay clean rather than becoming an unstructured archive of every Artifact you've ever generated.

Share a Portal or Link Directly to a Report

You can give a client access to the main portal so they can browse the available reports, or share a direct link when you want to send them to one specific analysis.

This works especially well for ad hoc analysis, interactive weekly or monthly reporting, and situations where a chart or dashboard is more useful than sending screenshots back and forth.

Turn Claude Artifacts into a Client-Facing Reporting Experience

The broader idea is to separate report creation from report delivery. Claude can generate the analysis and interactive Artifact, while the portal gives you a controlled place to distribute that work outside the Claude environment.

That keeps the flexibility of vibe reporting while giving clients a cleaner and more useful way to consume the finished output.