Use with AI

Why agents need it

silverpoint is newer than every language model's training data, so an assistant left to itself invents its props. The silverpoint MCP server tells it the truth: which chart suits the data, the props each chart declares, the imports and stylesheets of your framework. It answers from the agent catalog of the version it ships with (0.8.0), generated from the published types, and it checks and draws what the assistant writes. The skills hold the same knowledge as files, for an assistant with no server connected.

The MCP server

Hosted at https://silverpointweb.vercel.app/mcp, over Streamable HTTP: read-only, stateless and without an account. Every result names the version it describes.

Claude Code

In a terminal:

claude mcp add --transport http silverpoint https://silverpointweb.vercel.app/mcp

Claude

Settings → Connectors → Add custom connector, with this URL:

https://silverpointweb.vercel.app/mcp

Cursor

In ~/.cursor/mcp.json, or .cursor/mcp.json in a project:

{
  "mcpServers": {
    "silverpoint": {
      "url": "https://silverpointweb.vercel.app/mcp"
    }
  }
}

VS Code

In .vscode/mcp.json:

{
  "servers": {
    "silverpoint": {
      "type": "http",
      "url": "https://silverpointweb.vercel.app/mcp"
    }
  }
}

The Claude Code plugins

Each plugin installs its skill and connects the hosted server in one step. For React, Vue and Angular:

/plugin marketplace add ecrespo/silverpoint
/plugin install silverpoint@silverpoint

For Reflex (Python):

/plugin marketplace add ecrespo/reflex-silverpoint-react
/plugin install reflex-silverpoint@reflex-silverpoint

The skills

A skill is a folder of Markdown an agent loads on demand: a short SKILL.md and references whose tables are generated from the catalog. Both tell the agent to prefer the MCP tools when they are connected.

Running it locally

The same server runs over stdio from npm, with no network access of its own. It answers for the version you install:

claude mcp add silverpoint -- npx -y @silverpoint/mcp

Or, in a server of your own:

import { createServer, AGENT_CATALOG } from '@silverpoint/mcp';
import { handler } from '@silverpoint/mcp/http'; // stateless Streamable HTTP on Request/Response

Its tools

The server also offers the catalog, each chart and component, the diagnostic codes and the skills' guides as resources, and two prompts, choose-chart and build-dashboard. A name it does not know is a tool error with the closest valid names.

An example

The server is plain JSON-RPC over HTTP, so any client can ask it. Which chart draws hits per hour? recommend_chart with a data shape and an intent:

curl -s https://silverpointweb.vercel.app/mcp \
  -H 'content-type: application/json' -H 'accept: application/json, text/event-stream' \
  -d '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "recommend_chart", "arguments": {"shape": "series", "intent": "trend"}}}'

Then generate_code writes it for your framework, with your field names as accessors ({"x": "hour", "value": "hits"}). These are the server's answers for silverpoint 0.8.0, stylesheets included:

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { LineChart } from '@silverpoint/react/line-chart';

export function LineChartView({ rows }: { rows: readonly Record<string, unknown>[] }) {
  return (
    <LineChart
      data={rows}
      xKey="hour"
      valueKey="hits"
      title="Line chart"
    />
  );
}

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpLineChart } from '@silverpoint/vue/line-chart';

defineProps<{ rows: readonly Record<string, unknown>[] }>();
</script>

<template>
  <SpLineChart
    :data="rows"
    xKey="hour"
    valueKey="hits"
    title="Line chart"
  />
</template>

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { SpLineChart } from '@silverpoint/angular/line-chart';

/** Add '@silverpoint/fonts/fonts.css', '@silverpoint/grounds/styles.css' to the `styles` of angular.json. */
@Component({
  selector: 'app-line-chart-view',
  imports: [SpLineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <sp-line-chart
      [data]="rows()"
      [xKey]="'hour'"
      [valueKey]="'hits'"
      [title]="'Line chart'"
    />
  `,
})
export class LineChartView {
  readonly rows = input.required<readonly Record<string, unknown>[]>();
}

import reflex as rx
from reflex_silverpoint_react import line_chart


class State(rx.State):
    rows: list[dict] = []


def line_chart_view() -> rx.Component:
    return line_chart(
        data=State.rows,
        x_key="hour",
        value_key="hits",
        title="Line chart",
    )

• The rows are the rows prop: plain objects, one per datum, read through the accessor props.
• Add the stylesheets to the styles array of angular.json.
• State is a placeholder name: merge its fields into your own state class.
• Fill State.rows with the rows, a list of dicts, from an event handler.

An agent connected to the server does this on its own: asked for a chart of hits per hour, it calls recommend_chart, generate_code and validate_props, and can draw the result with render_chart before it writes a file.

Files for agents

This site also publishes the catalog for agents that read files rather than call tools: