> For the complete documentation index, see [llms.txt](https://docs.datasentinel.io/manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.datasentinel.io/manual/ai-connector/dynamic-dashboards/claude-artifact.md).
# Claude Artifact
Publish a live Datasentinel dashboard as a Claude Artifact, then shape it to your needs by asking Claude. Requires a public MCP server.
With Claude, the assistant can turn your Datasentinel metrics into a dynamic, interactive dashboard published as an [Artifact](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them): charts, filters, and tables you can explore in their own window, without writing any code. Unlike a static report, the page calls the Datasentinel tools itself every time you open, filter, drill down, or refresh it, so the data on screen is always current.
{% hint style="info" %}
New to Artifacts? Anthropic's [Artifacts guide](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them) covers the basics.
{% endhint %}
{% hint style="warning" %}
**Public MCP servers only.** The dashboard calls the Datasentinel tools through Claude **connectors**, and Claude calls connectors from Anthropic's cloud. So the MCP server must be reachable from the internet, under a public name and with a publicly trusted certificate: Anthropic's [connector requirements](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp). A platform on a private network or a VPN cannot serve it, and an MCP server declared in the desktop app's configuration file (**Settings → Developer**) does not help: it works in the chat, but Artifacts only see connectors ([Artifacts documentation](https://code.claude.com/docs/en/artifacts#pull-live-data-with-mcp-connectors)).
The platform does not have to be open to the whole internet, only to Claude:
* **Allow Anthropic's outbound range in your firewall.** It is published in [IP addresses](https://platform.claude.com/docs/en/api/ip-addresses). The name and the certificate must still be public.
* **Publish only the MCP host through a gateway.** See [MCP servers on a private network](/manual/ai-connector/troubleshooting/private-network-mcp-servers.md).
* **Use MCP tunnels.** A small stack inside your network opens an outbound-only connection to Anthropic, with no public endpoint. It is a research preview, on the Enterprise plan, by request. See Anthropic's [MCP tunnels](https://claude.com/docs/connectors/mcp-tunnels/overview).
\
**Try the private MCP server of your desktop app (experimental).**\
The Artifact runtime can declare a local MCP server of the Claude desktop app, called from your workstation. As of October 2026 it is undocumented, reserved to the owner of the Artifact, and not routed yet ([issue #89904](https://github.com/anthropics/claude-code/issues/89904)). See the **Private MCP server** tab of [Publish it against your platform](#publish-it-against-your-platform).
Otherwise, keep the analyses in the chat.
{% endhint %}
A walkthrough of the reference dashboard, with simulated data.
The recommended route is to start from the reference Artifact in the [`datasentinel-claude-artifact`](https://github.com/datasentinel/datasentinel-claude-artifact) repository, publish it against your platform, then make it your own.
## The reference dashboard
The repository holds the finished dashboard as a single file, `datasentinel-postgresql-monitor.html`: a PostgreSQL fleet workload monitor.
The page opens on the **Dashboard**. Pick a cohort of instances with tag filters, then rank it by Average Active Sessions over the time window you choose: 5, 15 or 30 minutes, 1 hour, today, or a custom window of up to 24 hours. Expand a row to see its top queries and wait breakdown.
On a row, **Details** opens the instance in its own tab, next to the Dashboard, and **Live** opens it on its Real-time sub-tab. Up to 10 instances can stay open: beyond that, the least recently used tab closes. Each instance tab has six sub-tabs, and keeps what it has already loaded.
| Sub-tab | What it shows |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Overview** | Narrative analysis, wait classes and events, top queries by load and by execution time |
| **Query detail** | Full query text, key figures (calls, time per call, cache hit, temp spill), waits, the tables the query accesses, and captured **execution plans** |
| **Top tables** | Top tables and indexes, ranked by the criterion you choose: reads, scans, writes, dead rows, size |
| **Vacuum & bloat** | Vacuum health against the autovacuum triggers, table and index bloat, transaction ID age, autovacuum settings |
| **I/O** | I/O by process and context (`pg_stat_io`), who writes the data pages, I/O wait events, host disk, I/O settings |
| **Real-time** | Live sessions, blocking chains, maintenance operations in progress, and a 3-minute host and database load panel |
A **Style** list switches every text on the page between the two communication styles of the `datasentinel` skill, **TECHNICAL** and **PLAIN**. It starts on your last choice, else on the style of your Datasentinel role (a Data admin gets TECHNICAL, a Developer gets PLAIN), else on PLAIN.
### Ask Claude about what's on screen
The page has a built-in chat pane where you can **ask Claude any question** about what you are looking at: why an instance is busy, which query to optimise first, whether there is lock contention, what an execution plan means, and so on. Claude answers from the data shown in the current tab, so its answers refer to the instances, queries, and numbers on your screen. Each tab suggests questions to start from.
Claude also reads that data the way the `datasentinel` skill would: the question carries a condensed version of the skill's analysis playbook for the current tab (fleet ranking, workload, query, real-time and locks, I/O, tables and autovacuum). So the answers follow the same rules as the skill: findings ranked by impact, a buffer miss is not a disk read until the host agrees, dead rows are a bloat proxy rather than a percentage, the root blocker rather than the loudest victim, and the next step named as the tab that holds it.
An **Ask Claude model** list sets how much reasoning the answers use: **Fast**, **Balanced** (the default) or **Most capable**. The chat uses your own Claude account; Claude asks for your consent the first time.
### Connectors and authentication
The dashboard calls the Datasentinel MCP server through your **`datasentinel-*` connectors** in Claude, by name. The list of connectors is fixed when you publish the Artifact. A **Connector** list in the header switches between them, and flags any that is not connected or needs to sign in again.
Authentication is **OAuth 2.1**, handled by the connector: you sign in once with your Datasentinel login and Claude refreshes the token silently. The page holds **no token**, and every call runs as the signed-in user, so the platform's access rights apply. Each person who opens the Artifact uses their own connector and login, and allows the connectors the first time.
### Sharing
The Artifact is private until you share it from the **Share** control in its header.
Connector calls only run for signed-in members of your organization, so sharing the live dashboard takes a **Team or Enterprise** plan. On Pro and Max plans, the live dashboard stays yours alone. A public link never shows live data: depending on the Anthropic page, Claude does not offer it for an Artifact that calls connectors, or it shows the page without its data.
Each viewer needs their own `datasentinel-*` connector with one of the published names, connected and signed in. They see the data their own Datasentinel account can access. Viewers do not need the `datasentinel` skill.
See Anthropic's [Share artifacts](https://support.claude.com/en/articles/9547008-share-artifacts) and [Share session output as artifacts](https://code.claude.com/docs/en/artifacts#how-connector-calls-work-for-viewers).
## Publish it against your platform
Before you start, check these requirements:
* A Claude **Pro, Max, Team or Enterprise** plan. Connector calls from Artifacts are not available on the Free plan.
* **Claude Code or the Claude desktop app**, to publish: Claude Code v2.1.209 or later, or the desktop app 1.13576.0 or later, signed in with a claude.ai account (not an API key). An Artifact created in a claude.ai chat conversation runs on a different runtime and cannot run this page.
* The **`datasentinel` skill** is installed in Claude. See the [`datasentinel-skill`](https://github.com/datasentinel/datasentinel-skill) repository.
Then pick the tab that matches where your platform's MCP server is reachable from.
{% tabs %}
{% tab title="Private MCP server (experimental)" %}
{% hint style="warning" %}
**Experimental and undocumented.** This route relies on the `host:` servers of the Artifact runtime, which Anthropic has not documented and still describes as not routed yet (see the warning at the top of this page). As of October 2026, the Artifact publishes, but whether its calls reach the server depends on your version of the Claude desktop app. It is announced as **owner-only** and **desktop-app-only**: nobody else can use the dashboard, and it never loads in a browser tab. Nothing here changes the public-server route, which remains the supported one.
{% endhint %}
The idea: instead of a connector, the page calls an MCP server declared in **your own Claude desktop app**, which reaches it from your workstation. The platform then only has to be reachable from your workstation, like any MCP server you use in the chat, with no public endpoint. In the Artifact, such a server is named `host:`, where `` is the name you gave it in the configuration file.
The example below uses a server named `datasentinel-private` for a platform whose MCP endpoint is `https://private-mcp.datasentinel.io/mcp`. Replace them with yours. Keep the name within letters, digits, `-` and `_`.
{% stepper %}
{% step %}
#### Declare the server in the Claude desktop app
Open **Settings → Developer → Edit Config** in the Claude desktop app, which opens `claude_desktop_config.json`, and add the server. The file takes local (stdio) servers, so the entry runs [`mcp-remote`](https://www.npmjs.com/package/mcp-remote), a small bridge that turns the platform's HTTP MCP endpoint into a local server and runs the OAuth sign-in in your browser. It needs Node.js installed.
```json
{
"mcpServers": {
"datasentinel-private": {
"command": "cmd",
"args": ["/c", "npx", "-y", "mcp-remote", "https://private-mcp.datasentinel.io/mcp"]
}
}
}
```
That is the Windows form. On macOS and Linux, set `"command": "npx"` and drop `"/c"` from `args`.
Quit the desktop app completely (not only its window) and start it again: it reads the file at startup. Do everything that follows in the desktop app: it is the one app that sees this server, both to publish the page and to show it.
{% endstep %}
{% step %}
#### Check it works
In a chat of the desktop app, ask *"list my Datasentinel instances"*. The first call opens the Datasentinel login page in your browser; sign in once. Claude's tools for this server are named `mcp__datasentinel-private__`.
{% endstep %}
{% step %}
#### Give Claude the dashboard file
Download `datasentinel-postgresql-monitor.html` from the [GitHub repository](https://github.com/datasentinel/datasentinel-claude-artifact), and attach it to a conversation in the desktop app.
{% endstep %}
{% step %}
#### Paste the local-server publishing prompt
This prompt replaces the one of the public route: it declares the server as a `host:` server instead of a connector.
```
Publish the attached datasentinel-postgresql-monitor.html as an artifact,
against my local MCP server starting with "datasentinel-" (its tools are named
mcp__datasentinel-__). It is not a claude.ai connector: declare
it as the host server "host:datasentinel-".
Step 1 - Check it answers: list its instances once, and show me only how many
there are. If the server is not available in this session, stop and tell me.
Step 2 - Adapt the file, and change nothing else:
- DS_CONNECTORS in the script: exactly ['host:datasentinel-'];
- the "artifact-capabilities" JSON block at the top: one "servers" entry,
with "server": "host:datasentinel-private" and all the tools listed there,
same order.
Step 3 - Publish it, declaring the "mcp" capability exactly as in that block
(ignore its "_comment" key) and the "sample" capability. Show me the publish
result: it should report the host server and its number of tools. Do not add,
embed or ask for any token.
```
The publish result should mention `host datasentinel-` with the number of tools. If it answers that host servers are not available in this session, your version of Claude does not offer the route yet: fall back to a connector.
{% endstep %}
{% step %}
#### Open the Artifact in the desktop app
Open the published Artifact **inside the Claude desktop app**, with the same account that published it, and allow the server when Claude asks.
* The dashboard loads: the route works on your version. Keep in mind that it works for you alone, from this app.
* **"No connector named "host:datasentinel-private" is connected."**: the app does not route `host:` calls yet, or the server is not running (check it in the chat first). Nothing to fix on the platform side; try again after the next update of the desktop app.
* Opened in a browser tab, the page always shows that message: the server lives in the app, not in the browser.
{% endstep %}
{% endstepper %}
If the route works for you, you can keep the connector-based publish for the people you share the dashboard with, and this one for yourself: they are two separate Artifacts.
{% endtab %}
{% tab title="Public MCP server" %}
The supported route: the Artifact calls the platform through a Claude **connector**. Your platform's MCP server must be **public**: reachable from Anthropic's cloud, under a public name and with a publicly trusted certificate. See the warning at the top of this page.
{% stepper %}
{% step %}
#### Add a Datasentinel connector
It must be a connector: an MCP server declared in the configuration file is not visible to Artifacts (except through the experimental route of the **Private MCP server** tab). Give it a name starting with **`datasentinel-`** (for example `datasentinel-production`) and the URL `https:///mcp`. Add one connector per platform.
Where you add it depends on your plan:
* **Pro or Max**: open **Customize → Connectors → Add custom connector**, in your own account.
* **Team or Enterprise**: members cannot add a custom connector. An Owner adds it once under **Organization settings → Connectors → Add → Custom → Web**. Each member then opens **Customize → Connectors** and clicks **Connect**. The name the Owner chose is the same for every member, which is what a shared Artifact needs.
Then connect it and sign in on the Datasentinel login page. See Anthropic's [Add a connector that isn't in the directory](https://claude.com/docs/connectors/custom/remote-mcp).
{% endstep %}
{% step %}
#### Check it works
Open Claude Code or the Claude desktop app, and ask *"list my Datasentinel instances"*.
{% endstep %}
{% step %}
#### Give Claude the dashboard file
Download `datasentinel-postgresql-monitor.html` from the [GitHub repository](https://github.com/datasentinel/datasentinel-claude-artifact). Attach it to the conversation, or run Claude Code in the folder that holds it.
{% endstep %}
{% step %}
#### Paste the publishing prompt
Claude lists your `datasentinel-*` connectors, asks which ones to include, adapts the file to your choice without changing anything else, and publishes the Artifact.
```
Publish the attached datasentinel-postgresql-monitor.html as an artifact.
Step 1 - Datasentinel connectors. List the MCP connectors available in this
session whose display name starts with "datasentinel-" (from the tool names
mcp____; ignore a "claude_ai_" prefix on the
part, it is not in the display name). Show me a numbered list with, for each
one, its display name and whether it answers (list its instances once; show
only how many there are, not their data). Then ask me which ones
to include in the artifact, and wait for my answer. If there is none, stop
and tell me to add a connector named datasentinel- in
Customize > Connectors.
Step 2 - Adapt the file to my choice, and change nothing else:
- DS_CONNECTORS in the script: the display names I chose, in the order of
the list;
- the "artifact-capabilities" JSON block at the top: one "servers" entry per
chosen connector, each with all the tools listed there, same order.
Step 3 - Publish it, declaring the "mcp" capability exactly as in that block
(ignore its "_comment" key) and the "sample" capability. If the publish
result reports display names that differ from DS_CONNECTORS, fix
DS_CONNECTORS to match and publish again. Do not add, embed or ask for any
token.
```
The same prompt is kept up to date in the repository's [README](https://github.com/datasentinel/datasentinel-claude-artifact#publishing-it).
{% endstep %}
{% step %}
#### Open the Artifact
Open the published Artifact, allow the connectors when Claude asks, and check that the dashboard loads. The **Connector** list in the header shows the connectors you chose. To change the list later, run the same prompt again: the Artifact is republished with the new list.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}
The repository's README also documents a public **sandbox platform** (about 20 monitored PostgreSQL instances with a shared read-only account), so you can try the dashboard before connecting your own platform.
## Make it your own
The Artifact is **completely customizable**. It is a single HTML file that Claude wrote, and Claude can change it for you: open a conversation in Claude, attach the file (or refer to the Artifact you published), describe the change you want in plain words, and ask Claude to publish the new version. You don't need to read or edit the code, and you can keep iterating until the page shows exactly what you need.
{% hint style="info" %}
Not sure what data is available? Ask Claude *"What data can my Datasentinel connector provide?"* to get an overview of everything the platform exposes (instances, workload, queries, tables, replication, live sessions, host and PostgreSQL metrics, reports…), then pick what you want the page to show.
{% endhint %}
Some examples of what you can ask:
* *"Open the dashboard on the last 15 minutes instead of the last hour, and show the top 50 instances by default."*
* *"Add a column with the PostgreSQL version next to each instance name."*
* *"Only show production instances; hide the environment filter."*
* *"Add the replication lag of each replica to the Real-time sub-tab."*
* *"Add a Blocking sub-tab with the blocking scenarios of the time window."*
* *"Use our company colours and put our logo in the header."*
* *"Translate the whole page into French."*
* *"Remove the I/O and Vacuum & bloat sub-tabs; we only need the workload and the live view."*
If a change needs data the page does not fetch yet (for example replication metrics or blocking scenarios), Claude adds it to what the page is allowed to call and declares it when publishing.
## Troubleshoot the first load
A failed call shows **Couldn't load data.** followed by one of the messages below.
### The connector
* **A sign-in notice appears**, with one of these messages: *"Your "datasentinel-production" connector needs to sign in again."*, *"No connector named "datasentinel-production" is connected."*, *"The "datasentinel-production" connector no longer exists."*, or *"Several connectors are named "datasentinel-production": choose one when Claude asks."* In Claude, open **Customize → Connectors** (the notice calls it **Settings → Connectors**), add or reconnect the connector the notice names, then press **Retry**. The connector name must match one the Artifact was published with. On a Team or Enterprise plan, an Owner adds the connector first.
* **The Connector list shows "(not connected)" or "(sign in again)"** next to a name. Same fix: connect that connector in **Customize → Connectors**, or sign in again.
* **Claude reports "Couldn't reach the MCP server" when you add the connector.** Check that the host name resolves in public DNS to a public IPv4 address, that the sign-in endpoints are exposed and not only `/mcp`, and that the URL does not redirect to another host. See [What a cloud assistant must reach](/manual/ai-connector/troubleshooting/private-network-mcp-servers.md#what-a-cloud-assistant-must-reach) and Anthropic's [Troubleshoot your connector](https://claude.com/docs/connectors/building/troubleshooting).
### Permissions
* **"Connector access was not granted to this page."** You declined the connector when Claude asked. Reload the Artifact and allow the connectors.
* **"This page is not allowed to call this Datasentinel tool (declined, or turned off for this page)."** The tool was declined, or the Artifact was published without it. Reload the Artifact and allow the connectors; if the message stays, run the publishing prompt again.
* **"Your organization's policy blocks this Datasentinel tool."** or **"Your organization requires approval for this Datasentinel tool."** Ask your Claude administrator. On Team and Enterprise plans, an Owner controls Artifacts under **Organization settings → Artifacts**, and connector calls from Artifacts with the **Enable artifact connectors** toggle under **Organization settings → Capabilities**. See the [Artifacts admin guide](https://support.claude.com/en/articles/16994751-artifacts-admin-guide-for-team-and-enterprise-plans).
* **"The platform refused the call: your Datasentinel user may lack the right privileges."** The connector works, but the platform rejected the call for your Datasentinel account. Ask a Datasentinel administrator to check your role.
* **"Your Datasentinel user may lack real-time (Live 360) access."** The Real-time sub-tab needs the Live360 right on your Datasentinel account. Ask an administrator, or sign in with another user.
### The page
* **"This dashboard needs the Claude artifact runtime with connector access: open it from Claude, where it was published."** You opened a saved copy of the file in a browser, or the page was published from a claude.ai chat conversation. Open the published Artifact from Claude, or publish it again from Claude Code or the Claude desktop app.
* **"Connector access is not available in this view."** The view you opened cannot call connectors. Open the published Artifact from Claude, signed in to your own account.
* **"The Datasentinel platform did not answer. Try again in a moment."** The MCP server could not be reached from Anthropic's cloud. Try again, and check that it is reachable from the internet with a publicly trusted certificate. A server on a private network never works here, even if the chat reaches it.
* **The Ask Claude pane is missing**, or answers *"Ask Claude is not available for this page."* The chat was declined, or it is turned off for the page or your organization. The dashboard itself keeps working.
* **"Charts unavailable (Chart.js did not load)."** The page loads its chart library from jsDelivr (`cdn.jsdelivr.net`), and your network blocks it. The data still shows as text.
* **Times look shifted.** The page sends times in your browser's time zone and the platform reads them in its own. The Dashboard and every instance sub-tab except Real-time are shifted when the two differ; the Real-time sub-tab is not affected.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.datasentinel.io/manual/ai-connector/dynamic-dashboards/claude-artifact.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
