Update dependencies + change “Substreams-Powered Subgraphs” card on home page to “Token API” (#960)

* Update dependencies + run `prebuild:ci`

* Fix bug where `Heading` anchor didn’t appear in Firefox

+ improve alignment

* Change “Substreams-Powered Subgraphs” card on home page to “Token API”

Author: benface

package.json

@@ -2,7 +2,7 @@
   "name": "graph-docs",
   "private": true,
   "version": "1.0.0",
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.11.0",
   "scripts": {
     "dev": "turbo run dev",
     "build": "NODE_OPTIONS='--max_old_space_size=8192' turbo run build",
@@ -21,17 +21,17 @@
   },
   "devDependencies": {
     "@edgeandnode/eslint-config": "^2.0.3",
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.15.21",
     "eslint": "^8.57.1",
-    "eslint-plugin-mdx": "^3.4.1",
+    "eslint-plugin-mdx": "^3.4.2",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "remark-frontmatter": "^5.0.0",
     "remark-lint-first-heading-level": "^4.0.1",
     "remark-lint-heading-increment": "^4.0.1",
     "remark-lint-no-heading-punctuation": "^4.0.1",
     "remark-lint-restrict-elements": "workspace:*",
-    "turbo": "^2.5.2",
+    "turbo": "^2.5.3",
     "typescript": "^5.8.3"
   },
   "resolutions": {

packages/og-image/package.json

@@ -12,17 +12,17 @@
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
     "react": "^18.3.1",
-    "satori": "^0.12.2",
+    "satori": "^0.13.1",
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250502.0",
-    "@types/react": "^18.3.20",
-    "jest-image-snapshot": "^6.4.0",
+    "@cloudflare/workers-types": "^4.20250525.0",
+    "@types/react": "^18.3.23",
+    "jest-image-snapshot": "^6.5.1",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
     "vitest": "^2.1.9",
-    "wrangler": "^3.114.8"
+    "wrangler": "^3.114.9"
   },
   "sideEffects": false
 }

pnpm-lock.yaml

@@ -19,20 +19,20 @@
   "dependencies": {
     "@docsearch/react": "^3.9.0",
     "@edgeandnode/common": "^7.0.4",
-    "@edgeandnode/gds": "^6.5.14",
-    "@edgeandnode/go": "^10.0.2",
+    "@edgeandnode/gds": "^6.5.15",
+    "@edgeandnode/go": "^10.1.0",
     "@emotion/react": "^11.14.0",
-    "@graphprotocol/contracts": "6.2.1",
+    "@graphprotocol/contracts": "^7.1.2",
     "@pinax/graph-networks-registry": "^0.6.7",
     "@react-hookz/web": "^25.1.1",
     "@readme/httpsnippet": "^11.0.0",
-    "@readme/openapi-parser": "^3.0.3",
+    "@readme/openapi-parser": "^4.0.0",
     "fetch-har": "^11.1.1",
     "lodash": "^4.17.21",
-    "mixpanel-browser": "^2.64.0",
-    "motion": "^12.9.4",
-    "next": "^14.2.28",
-    "next-seo": "^6.6.0",
+    "mixpanel-browser": "^2.65.0",
+    "motion": "^12.15.0",
+    "next": "^14.2.29",
+    "next-seo": "^6.8.0",
     "next-sitemap": "^4.2.3",
     "nextra": "^3.3.1",
     "openapi-types": "^12.1.3",
@@ -45,20 +45,20 @@
     "remark-callouts": "workspace:*",
     "theme-ui": "^0.17.2",
     "unist-util-visit": "^5.0.0",
-    "zod": "^3.24.3"
+    "zod": "^3.25.30"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.16",
+    "@types/lodash": "^4.17.17",
     "@types/mdast": "^4.0.4",
-    "@types/mixpanel-browser": "^2.54.0",
-    "@types/node": "^22.15.3",
-    "@types/react": "^18.3.20",
+    "@types/mixpanel-browser": "^2.60.0",
+    "@types/node": "^22.15.21",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "autoprefixer": "^10.4.21",
-    "fast-xml-parser": "^5.2.1",
+    "fast-xml-parser": "^5.2.3",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
-    "tsup": "^8.4.0",
+    "tsup": "^8.5.0",
     "tsx": "^4.19.4"
   }
 }

website/package.json

@@ -2,13 +2,13 @@ import { NetworkType } from '@pinax/graph-networks-registry'
 
 import { ButtonOrLink, ExperimentalLink, Tooltip } from '@edgeandnode/gds'
 import {
+  APIToken,
   Firehose,
   GraphExplorer,
   GraphNode,
   SocialYouTube,
   Subgraph,
   Substreams,
-  SubstreamsPoweredSubgraph,
 } from '@edgeandnode/gds/icons'
 import { NetworkIcon } from '@edgeandnode/go'
 
@@ -83,12 +83,14 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
             </div>
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
               <Card
-                title={t('index.products.sps.title')}
-                description={t('index.products.sps.description')}
-                cta={<ExperimentalLink href="/sps/tutorial/">{t('index.products.sps.cta')}</ExperimentalLink>}
+                title={t('index.products.tokenApi.title')}
+                description={t('index.products.tokenApi.description')}
+                cta={
+                  <ExperimentalLink href="/token-api/quick-start/">{t('index.products.tokenApi.cta')}</ExperimentalLink>
+                }
                 icon={
                   <div className="flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white">
-                    <SubstreamsPoweredSubgraph size={4} />
+                    <APIToken size={4} />
                   </div>
                 }
               />

website/src/HomePage.tsx

@@ -34,8 +34,9 @@ const BaseHeading = ({ as: Element = 'h1', id, className, children, ...props }:
       {id ? (
         <span
           className={`
-            absolute inset-y-0 end-[calc(100%+theme(spacing[2.5]))] my-auto h-min opacity-0 transition
-            group-hocus-visible-within/heading:opacity-100
+            absolute end-[calc(100%+theme(spacing[2.5]))] top-0 flex h-[1lh] items-center opacity-0 transition
+            group-hover/heading:opacity-100
+            group-has-focus-visible/heading:opacity-100
             max-md:hidden
           `}
         >

website/src/components/Heading.tsx

@@ -2,5 +2,5 @@ import titles from './_meta-titles.json'
 
 export default {
   sunrise: '',
-  arbitrum: titles.arbitrum,
+  arbitrum: titles.arbitrum ?? '',
 }

website/src/pages/ar/archived/_meta.js

@@ -19,10 +19,10 @@
       "description": "Fetch and consume blockchain data with parallel execution.",
       "cta": "Develop with Substreams"
     },
-    "sps": {
-      "title": "Substreams-Powered Subgraphs",
-      "description": "Boost your subgraph's efficiency and scalability by using Substreams.",
-      "cta": "Set up a Substreams-powered subgraph"
+    "tokenApi": {
+      "title": "Token API",
+      "description": "Query token data and leverage native MCP support.",
+      "cta": "Develop with Token API"
     },
     "graphNode": {
       "title": "Graph Node",
@@ -70,7 +70,7 @@
       "subgraphs": "Subgraphs",
       "substreams": "متعدد-السلاسل",
       "firehose": "Firehose",
-      "tokenapi": "Token API"
+      "tokenApi": "Token API"
     }
   },
   "networkGuides": {
@@ -83,7 +83,7 @@
         "title": "Substreams quick start",
         "description": "Stream high-speed data for real-time indexing."
       },
-      "tokenapi": {
+      "tokenApi": {
         "title": "The Graph's Token API",
         "description": "Query token data and leverage native MCP support."
       },

website/src/pages/ar/index.json

@@ -2,7 +2,7 @@ import titles from './_meta-titles.json'
 
 export default {
   overview: '',
-  tooling: titles.tooling,
+  tooling: titles.tooling ?? '',
   tap: '',
   'supported-network-requirements': '',
   'chain-integration-overview': '',

website/src/pages/ar/indexing/_meta.js

@@ -4,7 +4,8 @@ export default {
   glossary: '',
   tokenomics: '',
   benefits: '',
-  roles: titles.roles,
-  'migration-guides': titles['migration-guides'],
+  roles: titles.roles ?? '',
+  'migration-guides': titles['migration-guides'] ?? '',
   'subgraph-studio-faq': '',
+  'claude-mcp': '',
 }

website/src/pages/ar/resources/_meta.js

@@ -0,0 +1,122 @@
+---
+title: Claude MCP
+---
+
+This guide walks you through configuring Claude Desktop to use The Graph ecosystem's [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP) resources: Token API and Subgraph. These integrations allow you to interact with blockchain data through natural language conversations with Claude.
+
+## What You Can Do
+
+With these integrations, you can:
+
+- **Token API**: Access token and wallet information across multiple blockchains
+- **Subgraph**: Find relevant Subgraphs for specific keywords and contracts, explore Subgraph schemas, and execute GraphQL queries
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/) installed and available in your path
+- [Claude Desktop](https://claude.ai/download) installed
+- API keys:
+  - Token API key from [The Graph Market](https://thegraph.market/)
+  - Gateway API key from [Subgraph Studio](https://thegraph.com/studio/apikeys/)
+
+## Configuration Steps
+
+### 1. Open Configuration File
+
+Navigate to your `claude_desktop_config.json` file:
+
+> **Claude Desktop** > **Settings** > **Developer** > **Edit Config**
+
+Paths by operating system:
+
+- OSX: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
+- Linux: `.config/Claude/claude_desktop_config.json`
+
+### 2. Add Configuration
+
+Replace the contents of the existing config file with:
+
+```json
+{
+  "mcpServers": {
+    "token-api": {
+      "command": "npx",
+      "args": ["@pinax/mcp", "--sse-url", "https://token-api.thegraph.com/sse"],
+      "env": {
+        "ACCESS_TOKEN": "ACCESS_TOKEN"
+      }
+    },
+    "subgraph": {
+      "command": "npx",
+      "args": ["mcp-remote", "--header", "Authorization:${AUTH_HEADER}", "https://subgraphs.mcp.thegraph.com/sse"],
+      "env": {
+        "AUTH_HEADER": "Bearer GATEWAY_API_KEY"
+      }
+    }
+  }
+}
+```
+
+### 3. Add Your API Keys
+
+Replace:
+
+- `ACCESS_TOKEN` with your Token API key from [The Graph Market](https://thegraph.market/)
+- `GATEWAY_API_KEY` with your Gateway API key from [Subgraph Studio](https://thegraph.com/studio/apikeys/)
+
+### 4. Save and Restart
+
+- Save the configuration file
+- Restart Claude Desktop
+
+### 5. Add The Graph Resources in Claude
+
+After configuration:
+
+1. Start a new conversation in Claude Desktop
+2. Click on the context menu (top right)
+3. Add "Subgraph Server Instructions" as a resource by entering `graphql://subgraph` for Subgraph MCP
+
+> **Important**: You must manually add The Graph resources to your chat context for each conversation where you want to use them.
+
+### 6. Run Queries
+
+Here are some example queries you can try after setting up the resources:
+
+### Subgraph Queries
+
+```
+What are the top pools in Uniswap?
+```
+
+```
+Who are the top Delegators of The Graph Protocol?
+```
+
+```
+Please make a bar chart for the number of active loans in Compound for the last 7 days
+```
+
+### Token API Queries
+
+```
+Show me the current price of ETH
+```
+
+```
+What are the top tokens by market cap on Ethereum?
+```
+
+```
+Analyze this wallet address: 0x...
+```
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. **Verify Node.js Installation**: Ensure Node.js is correctly installed by running `node -v` in your terminal
+2. **Check API Keys**: Verify that your API keys are correctly entered in the configuration file
+3. **Enable Verbose Logging**: Add `--verbose true` to the args array in your configuration to see detailed logs
+4. **Restart Claude Desktop**: After making changes to the configuration, always restart Claude Desktop

website/src/pages/ar/resources/claude-mcp.mdx

@@ -3,9 +3,11 @@ import titles from './_meta-titles.json'
 export default {
   'quick-start': '',
   explorer: '',
-  querying: titles.querying,
-  developing: titles.developing,
+  querying: titles.querying ?? '',
+  developing: titles.developing ?? '',
   billing: '',
   guides: titles.guides,
   'best-practices': titles['best-practices'],
+  'fair-use-policy': '',
+  'upgrade-indexer': '',
 }

website/src/pages/ar/subgraphs/_meta.js

@@ -3,9 +3,9 @@ import titles from './_meta-titles.json'
 export default {
   introduction: '',
   subgraphs: '',
-  creating: titles.creating,
-  deploying: titles.deploying,
-  publishing: titles.publishing,
-  managing: titles.managing,
+  creating: titles.creating ?? '',
+  deploying: titles.deploying ?? '',
+  publishing: titles.publishing ?? '',
+  managing: titles.managing ?? '',
   'developer-faq': '',
 }

website/src/pages/ar/subgraphs/developing/_meta.js

@@ -7,6 +7,6 @@ export default {
   'ql-schema': '',
   'assemblyscript-mappings': '',
   advanced: '',
-  'graph-ts': titles['graph-ts'],
+  'graph-ts': titles['graph-ts'] ?? '',
   'unit-testing-framework': '',
 }

website/src/pages/ar/subgraphs/developing/creating/_meta.js

@@ -1,7 +1,7 @@
 import titles from './_meta-titles.json'
 
 export default {
-  README: titles.README,
-  api: titles.api,
-  'common-issues': titles['common-issues'],
+  README: titles.README ?? '',
+  api: titles.api ?? '',
+  'common-issues': titles['common-issues'] ?? '',
 }