diff --git a/docs/showcase/img/1-open-settings-json.png b/docs/showcase/img/1-open-settings-json.png new file mode 100644 index 0000000000..f9ce5cc94b Binary files /dev/null and b/docs/showcase/img/1-open-settings-json.png differ diff --git a/docs/showcase/img/2-add-mcp-config.png b/docs/showcase/img/2-add-mcp-config.png new file mode 100644 index 0000000000..95baf50fb2 Binary files /dev/null and b/docs/showcase/img/2-add-mcp-config.png differ diff --git a/docs/showcase/img/3-start-mcp.png b/docs/showcase/img/3-start-mcp.png new file mode 100644 index 0000000000..affc18d1b5 Binary files /dev/null and b/docs/showcase/img/3-start-mcp.png differ diff --git a/docs/showcase/img/4-started-mcp.png b/docs/showcase/img/4-started-mcp.png new file mode 100644 index 0000000000..bb7fcdd0ec Binary files /dev/null and b/docs/showcase/img/4-started-mcp.png differ diff --git a/docs/showcase/img/5-launch-chat.png b/docs/showcase/img/5-launch-chat.png new file mode 100644 index 0000000000..22d9abc9a6 Binary files /dev/null and b/docs/showcase/img/5-launch-chat.png differ diff --git a/docs/showcase/img/6-select-agent.png b/docs/showcase/img/6-select-agent.png new file mode 100644 index 0000000000..c49494e688 Binary files /dev/null and b/docs/showcase/img/6-select-agent.png differ diff --git a/docs/showcase/img/7-query-chat.png b/docs/showcase/img/7-query-chat.png new file mode 100644 index 0000000000..d038495d8f Binary files /dev/null and b/docs/showcase/img/7-query-chat.png differ diff --git a/docs/showcase/img/8-prompt-for-mcp.png b/docs/showcase/img/8-prompt-for-mcp.png new file mode 100644 index 0000000000..7afc6bb1d1 Binary files /dev/null and b/docs/showcase/img/8-prompt-for-mcp.png differ diff --git a/docs/showcase/img/9-mcp-response.png b/docs/showcase/img/9-mcp-response.png new file mode 100644 index 0000000000..63c3fa56c4 Binary files /dev/null and b/docs/showcase/img/9-mcp-response.png differ diff --git a/docs/showcase/mcp/ask-ai-to-ide.md b/docs/showcase/mcp/ask-ai-to-ide.md new file mode 100644 index 0000000000..d765e8a04d --- /dev/null +++ b/docs/showcase/mcp/ask-ai-to-ide.md @@ -0,0 +1,105 @@ +--- +title: Integrate BNBChain Ask AI into your IDE +--- + +# Quick‑Start Tutorial + +Follow these steps to wire any IDE that supports the **Model Context Protocol (MCP)** to BNB Chain’s Ask AI knowledge base **and start querying documentation right away**. + +> **Time required:** ≈ 2 minutes +> **Prerequisites:** +> • IDE with an MCP client (e.g. VS Code MCP extension, Cursor ≥ 0.23.0, JetBrains plugin) + +--- + +## 1 Add the Ask AI MCP server + +1. Open your IDE’s **Settings / Preferences** and find the **MCP** section. +2. Choose **Add MCP server** (wording may vary). +3. Paste the JSON block below and save. + +```jsonc +{ + "mcpServers": { + "bnbchain-askai-mcp": { + "url": "https://mcp.inkeep.com/bnbchainorg/mcp", + "id": "cm9qsf01p00bss6016ry68oil" + } + } +} +``` + +4. Reload the IDE window if the MCP client does not restart automatically. + +A **Connected** status should now appear next to *bnbchain‑askai‑mcp*. + +--- + +## 2 What the MCP can do + +The Ask AI MCP lets you **query** BNB Chain’s public documentation corpus in natural language and receive the most relevant passages, with source links, inside your editor. +It is *read‑only* – no blockchain transactions are executed. + +--- + +## 3 Run queries inside your IDE + +Below are three common ways to interact with the Ask AI MCP once it is connected. + +### 3.1 Chat Panels (Copilot, Cursor Chat, etc.) + +1. Open your IDE’s AI/Chat pane (Copilot Chat, Cursor side‑chat, JetBrains AI Assistant…). +2. Locate the **agent / provider selector** at the top of the chat window. +3. Choose **bnbchain‑askai‑mcp**. +4. Ask questions in plain English – e.g. *“Summarise BEP‑20.”* + +> **Want a detailed step-by-step walkthrough for VS Code?** Check out the companion guide: [Ask AI in VS Code](ask-ai-vs-code-guide.md) – complete with annotated screenshots. + +### 3.2 Command Palette / Command Menu + +| IDE | How to open | Steps | +| ------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------ | +| **VS Code** | Ctrl/Cmd + Shift + P | Type **“MCP: Run Query”** → pick **bnbchain‑askai‑mcp** → enter your question. | +| **Cursor** | Cmd + K (mac) or Ctrl + K (win/linux) | Select **Ask MCP…** → choose **bnbchain‑askai‑mcp** → ask away. | +| **JetBrains** | Shift + Shift then “MCP Query” | Pick **bnbchain‑askai‑mcp** and type a question. | + +### 3.3 Terminal / cURL (optional) + +For quick tests outside the IDE you can hit the endpoint directly: + +```bash +curl -s -X POST \ + -H "Content-Type: application/json" \ + -d '{"query":"What is BEP‑20?"}' \ + https://mcp.inkeep.com/bnbchainorg/mcp +``` + +You’ll receive a JSON response containing an `answer` field and `sources` array. + +--- + +## 4 Example queries + +```text +What is the gas limit on BSC blocks? + +Summarise BEP‑336 in two sentences. + +List all fee tiers supported by opBNB. + +Explain the purpose of Greenfield buckets. +``` + +--- + +## 5 Troubleshooting + +| Symptom | Fix | +| -------------------------- | ---------------------------------------------------------------- | +| **400/401 response codes** | Verify the JSON snippet (no trailing commas). | +| **Long latency (> 10 s)** | Disable any *Throttle Streaming* or similar setting in your IDE. | +| **No answer returned** | Make sure you chose **bnbchain‑askai‑mcp** and asked a question. | + +Need more help? Ping us in **#ai‑tooling** on the BNB Chain Discord. + +Open an issue in the [docs repo](https://github.com/bnb-chain/docs-site/issues) if your favourite editor is missing. diff --git a/docs/showcase/mcp/ask-ai-vs-code-guide.md b/docs/showcase/mcp/ask-ai-vs-code-guide.md new file mode 100644 index 0000000000..79ca8c8f21 --- /dev/null +++ b/docs/showcase/mcp/ask-ai-vs-code-guide.md @@ -0,0 +1,105 @@ +--- +title: Ask AI in Visual Studio Code +--- + +Step‑by‑step walkthrough to query BNB Chain documentation from within VS Code using the Model Context Protocol (MCP). + +## 1 Install the MCP Client extension + +1. Open the **Extensions** view. +2. Search for **“MCP Client”** and hit **Install**. + +![VS Code Extensions view with MCP Client selected](/docs/showcase/img/1-open-settings-json.png) + +The extension adds MCP support to VS Code, letting you connect to external knowledge bases such as **BNB Chain Ask AI**. + +--- + +## 2 Add the Ask AI server + +1. Open **Settings** → **Preferences** → **Settings (JSON)**. + *Tip ▶* press Ctrl/⌘ +, then click the **`{}`** icon in the upper‑right corner. +2. Inside the JSON, locate (or create) the **`"mcpServers"`** section and paste the snippet below as a sibling property. + +```jsonc +"mcpServers": { + "bnbchain-askai-mcp": { + "url": "https://mcp.inkeep.com/bnbchainorg/mcp", + "id": "cm9qsf01p00bss6016ry68oil" + } +} +``` + +![Settings JSON with the Ask AI block added](/docs/showcase/img/2-add-mcp-config.png) + +3. Save the file. The MCP client should automatically reload; if not, restart the VS Code window. + +--- + +## 3 Start the MCP server + +Hover the new server block and click **▶ Start**. + +![Start badge before connection](/docs/showcase/img/3-start-mcp.png) + +When the badge flips to **✓ Running**, VS Code is now connected to **BNB Chain Ask AI**. + +![Server block indicating ✓ Running](/docs/showcase/img/4-started-mcp.png) + +--- + +## 4 Open the Chat panel + +From the menu bar choose **View → Chat** or press Ctrl + Alt + I. A chat window docks to the side of the editor. + +![Opening the Chat view from the View menu](/docs/showcase/img/5-launch-chat.png) + +--- + +## 5 Pick the **bnbchain‑askai‑mcp** agent + +At the bottom of the chat input you’ll find two dropdowns: + +* **Mode** (Ask / Edit / Agent) +* **Provider** (list of LLMs & MCP servers) + +Set **Mode** to **Agent**, then pick **bnbchain‑askai‑mcp** from the Provider list. + +![Dropdown showing Agent selected and bnbchain-askai-mcp highlighted](/docs/showcase/img/6-select-agent.png) + +--- + +## 6 Ask your first question + +1. Type a natural‑language query such as: + + ```text + What is BNB Greenfield? + ``` + + ![Chat input with sample question typed](/docs/showcase/img/7-query-chat.png) + +2. Press Enter. VS Code presents a confirmation card recommending the **bnbchain‑askai‑mcp** tool. + + ![Confirmation card asking to continue with the recommended MCP](/docs/showcase/img/8-prompt-for-mcp.png) + +3. Click **Continue** (or just press Enter again). Ask AI streams back a concise answer plus source links you can click to jump to the original docs. + + ![Answer streamed in the chat panel](/docs/showcase/img/9-mcp-response.png) + +--- + +## 7 Bonus: Command Palette quick‑queries + +Prefer keyboard? Hit Ctrl/⌘ + Shift + P, run **“MCP: Run Query”**, choose **bnbchain‑askai‑mcp**, and enter your question. + +This opens a transient results panel without leaving your current editor tab. + +--- + +### Need help? + +* Reach out on the BNB Chain Discord. +* File an issue in the [docs repo](https://github.com/bnb-chain/bnb-chain.github.io/issues). + +Happy building! 🎉 diff --git a/mkdocs.yml b/mkdocs.yml index a4b59a9cfe..2556d63bdb 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -275,6 +275,8 @@ nav: - Roadmap: ./bnb-greenfield/roadmap/roadmap.md - Feature Lists: ./bnb-greenfield/roadmap/features.md - Showcases: + - AI: ./showcase/mcp/index.md + - Integrating AskAI: ./showcase/mcp/ask-ai-to-ide.md - Name Service and Attestation: - Decentralized Identity: ./showcase/identity/did.md - Decentralized Name Service: