feat(docs): enhance intro page, add mcp server, split out AI tools (#1327)

Author: fassko

docs/1-intro.mdx

@@ -31,10 +31,11 @@ import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import DocCard from "@theme/DocCard";
 import CopyButton from "@site/src/components/CopyButton";
+import ToolCardGrid from "@site/src/components/ToolCardGrid";
 
-Start building on Flare, the interoperable EVM L1 engineered for a data-rich, interconnected future.
-Flare Developer Hub is your central resource, containing the tutorials, SDKs, and API documentation you need to succeed.
-Dive in to Flare's enshrined data, fast finality, and soon, verifiable compute with TEEs.
+Start building on Flare, the EVM-compatible Layer 1 built for data-intensive, interoperable applications.
+Flare Developer Hub is your central resource for tutorials, SDKs, and API docs.
+Build with Flare's enshrined data protocols, fast finality, and soon, verifiable compute with TEEs.
 
 ## Getting Started
 
@@ -149,85 +150,57 @@ Additional configuration and API resources are detailed on the [Network](/networ
   </div>
 </div>
 
-## Build faster with ecosystem tools
+## AI tools
 
-:::tip[Building with AI]
-
-Want to use Developer Hub as context for an LLM? Start with the auto-generated [llms.txt](https://llmstxt.org/) files available at the site root:
-
-- `/llms-full.txt` - the full documentation bundled into a single plain-text file.
-- `/llms.txt` - a lightweight index of every page, including titles and short descriptions.
-
-If you only need one page, use the **Copy page** button in the top-right. It lets you copy the page as Markdown, or jump straight into supported LLM tools.
-
-For **Cursor** and **Claude Code**, install [Flare AI Skills](/network/guides/flare-ai-skills) so the agent has domain knowledge for FTSO, FAssets, FDC, and Smart Accounts.
+<ToolCardGrid
+  colClassName="col--6"
+  items={[
+    {
+      label: "Flare AI Skills",
+      href: "/network/guides/flare-ai-skills",
+      description:
+        "Flare protocol AI skills for Claude Code, Cursor and other agents.",
+    },
+    {
+      label: "MCP Server",
+      href: "/network/guides/flare-developer-hub-mcp-server",
+      description: "Connect AI tools directly to Flare data and services.",
+    },
+  ]}
+/>
 
-:::
+## Ecosystem tools
 
-<div className="row">
-  <div className="col col--3 margin-bottom--lg">
-    <DocCard
-      item={{
-        type: "link",
-        label: "Flare AI Skills",
-        href: "/network/guides/flare-ai-skills",
-        description:
-          "Agent skills for Cursor & Claude—FTSO, FAssets, FDC, Smart Accounts.",
-        docId: undefined,
-      }}
-    />
-  </div>
-  <div className="col col--3 margin-bottom--lg">
-    <DocCard
-      item={{
-        type: "link",
-        label: "Wallet SDKs",
-        href: "/network/developer-tools#wallet-sdks",
-        description:
-          "Turnkey, Wagmi, MetaMask Embedded Wallets, RainbowKit, Etherspot.",
-        docId: undefined,
-      }}
-    />
-  </div>
-  <div className="col col--3 margin-bottom--lg">
-    <DocCard
-      item={{
-        type: "link",
-        label: "Bridges",
-        href: "/network/developer-tools#bridges",
-        description: "LayerZero, Stargate, zkBridge.",
-        docId: undefined,
-      }}
-    />
-  </div>
-  <div className="col col--3 margin-bottom--lg">
-    <DocCard
-      item={{
-        type: "link",
-        label: "Indexers",
-        href: "/network/developer-tools#indexers",
-        description: "Goldsky, sqd, SubQuery.",
-        docId: undefined,
-      }}
-    />
-  </div>
-  <div className="col col--3 margin-bottom--lg">
-    <DocCard
-      item={{
-        type: "link",
-        label: "OFTs",
-        href: "/network/developer-tools#ofts",
-        description: "USD₮0, flrETH, USDC.e, WETH, USDT.",
-        docId: undefined,
-      }}
-    />
-  </div>
-</div>
+<ToolCardGrid
+  items={[
+    {
+      label: "Wallet SDKs",
+      href: "/network/developer-tools#wallet-sdks",
+      description:
+        "Turnkey, Wagmi, MetaMask Embedded Wallets, RainbowKit, Etherspot.",
+    },
+    {
+      label: "Bridges",
+      href: "/network/developer-tools#bridges",
+      description: "LayerZero, Stargate, zkBridge.",
+    },
+    {
+      label: "Indexers",
+      href: "/network/developer-tools#indexers",
+      description: "Goldsky, sqd, SubQuery.",
+    },
+    {
+      label: "OFTs",
+      href: "/network/developer-tools#ofts",
+      description: "USD₮0, flrETH, USDC.e, WETH, USDT.",
+    },
+  ]}
+/>
 
 ## Understand the architecture
 
 Gain a deep understanding of the core concepts that differentiate Flare from other blockchains.
-Its native data protocols - [Flare Time Series Oracle](/ftso/overview) and [Flare Data Connector](/fdc/overview) - are enshrined directly into the core [Flare Systems Protocol](/network/fsp), inheriting the full economic security of the Flare network.
+Its native data protocols, [Flare Time Series Oracle](/ftso/overview) and [Flare Data Connector](/fdc/overview), are enshrined directly into the core [Flare Systems Protocol](/network/fsp), inheriting the full economic security of the network.
 
 <ThemedImage
   alt="Flare Systems Protocol with enshrined FTSO and FDC."

src/components/ToolCardGrid/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import DocCard from "@theme/DocCard";
+
+type ToolCardItem = {
+  label: string;
+  href: string;
+  description: string;
+};
+
+type ToolCardGridProps = {
+  items: ToolCardItem[];
+  colClassName?: string;
+};
+
+export default function ToolCardGrid({
+  items,
+  colClassName = "col--3",
+}: ToolCardGridProps) {
+  return (
+    <div className="row">
+      {items.map((item) => (
+        <div
+          key={item.href}
+          className={`col ${colClassName} margin-bottom--lg`}
+        >
+          <DocCard
+            item={{
+              type: "link",
+              label: item.label,
+              href: item.href,
+              description: item.description,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}