Update build-with-ai.mdx

Author: yashovardhan

embedded-wallets/build-with-ai.mdx

@@ -2,115 +2,56 @@
 title: Build with AI
 sidebar_label: Build with AI
 toc_max_heading_level: 2
-description: 'Build MetaMask Embedded Wallets integrations faster using AI coding assistants, Cursor, Claude, Codex, Antigravity, and more.'
+description: 'Set up the MetaMask Embedded Wallets skill and MCP server in Cursor, Claude, Codex, Antigravity, and other AI coding assistants.'
 image: 'img/metamaskog.jpg'
 keywords:
   [ai, cursor, claude, codex, antigravity, mcp, llm, coding assistant, embedded wallets, web3auth]
 ---
 
-import SkillContent from '@site/src/components/SkillContent'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
-Speed up MetaMask Embedded Wallets integrations by giving your AI coding assistant access to the documentation and SDK reference information.
+Give your AI assistant Embedded Wallets context in two steps. Use **both** together for the best results.
 
-You'll set up the following:
+|         | Skill                                               | MCP server                         |
+| ------- | --------------------------------------------------- | ---------------------------------- |
+| Role    | How to choose SDKs, auth, and avoid common mistakes | Live docs, examples, and SDK types |
+| Install | One command (step 1)                                | Per-tool config (step 2)           |
 
-- **Skill**: Guides your AI assistant on how to reason about the SDK (for example, architecture, framework-specific considerations, key derivation rules, and common pitfalls). There's no code in the skill; the MCP provides that.
-- **MCP server**: Provides real-time access to documentation search, code examples, and SDK types.
+## 1. Install the skill
 
-## Skill
-
-The Skill guides your AI assistant by providing a mental model for MetaMask Embedded Wallets.
-It includes SDK selection logic, key derivation rules, authentication concepts, platform quirks,
-and common mistakes that aren't obvious from the docs alone.
-The Skill contains no code. The MCP server provides up-to-date code examples and implementation references.
-
-:::tip
-For the best experience, use the MCP server alongside the skill so that your LLM can fetch live
-docs and examples rather than relying on static text.
-:::
-
-### Universal install (recommended)
-
-Run the following in your project directory:
+Run this in your project directory:
 
 ```bash
 npx skills add web3auth/skill
 ```
 
-The skills CLI detects your active AI agent and installs to the correct directory automatically.
-Works with Cursor, Claude Code, Copilot, Cline, Codex, Antigravity, and 40+ more agents.
-See the [web3auth/skill README](https://github.com/Web3Auth/skill) for global and per-agent install options.
+The CLI detects your AI agent (Cursor, Claude Code, Codex, Antigravity, and 40+ others) and installs to the right folder.
+See the [web3auth/skill README](https://github.com/Web3Auth/skill) for global or per-agent options.
 
-### Manual install
-
-If you prefer to install the skill without the CLI, use the following per-tool instructions.
-
-**Cursor**
-
-```bash
-npx skills add web3auth/skill -a cursor
-```
+## 2. Connect the MCP server
 
-Or copy the skill directly into your project:
+Add the [Embedded Wallets MCP server](https://github.com/Web3Auth/web3auth-mcp) so your assistant can search docs and fetch examples.
+All configs use this URL: `https://mcp.web3auth.io`
 
-```bash
-npx degit Web3Auth/web3auth-mcp/skills/web3auth .cursor/skills/web3auth
-```
-
-Cursor picks up each `SKILL.md` under `.cursor/skills/<skill-name>/` automatically and activates
-it when relevant.
-
-**Claude Code CLI**
-
-```bash
-npx skills add web3auth/skill -a claude-code
-```
-
-**Antigravity**
-
-```bash
-npx skills add web3auth/skill -a antigravity
-```
+<Tabs groupId="ai-tool">
+<TabItem value="cursor" label="Cursor" default>
 
-Or copy the skill directly into your project:
+Open **Cursor Settings → Tools & Integrations → MCP** and add:
 
-```bash
-npx degit Web3Auth/web3auth-mcp/skills/web3auth .agent/skills/web3auth
+```json
+{
+  "mcpServers": {
+    "web3auth": {
+      "url": "https://mcp.web3auth.io"
+    }
+  }
+}
 ```
 
-Antigravity picks up skills inside `.agent/skills/` automatically.
-For global installation across all projects, use `~/.gemini/antigravity/skills/` instead.
-
-**Claude Desktop and other tools**
-
-Open **Claude Desktop → Settings → Custom Instructions** (or your tool's equivalent system prompt
-or custom instructions field) and paste the skill content below directly.
-
-<details>
-<summary>View `SKILL.md` file</summary>
-
-<SkillContent />
-
-</details>
-
-## MCP server
-
-The [MetaMask Embedded Wallets MCP server](https://github.com/Web3Auth/web3auth-mcp) connects your AI coding
-assistant directly to the documentation. It provides five tools:
-
-| Tool                | What it does                                         |
-| ------------------- | ---------------------------------------------------- |
-| `search_docs`       | Search documentation and example projects            |
-| `get_doc`           | Fetch the full content of any doc page               |
-| `get_example`       | Fetch complete source code of an integration example |
-| `get_sdk_reference` | Fetch SDK types and hooks from the open-source repos |
-| `search_community`  | Search the MetaMask Builder Hub for real user issues |
-
-### Cursor
-
-Select the following button to install the MCP server in Cursor automatically:
-
 <p>
+or click the button below:
+
   <a
     href="https://cursor.com/en/install-mcp?name=web3auth&config=eyJ1cmwiOiJodHRwczovL21jcC53ZWIzYXV0aC5pbyJ9"
     target="_blank"
@@ -123,27 +64,14 @@ Select the following button to install the MCP server in Cursor automatically:
   </a>
 </p>
 
-You can also add it manually. Open **Cursor Settings → Tools & Integrations → MCP** and add:
-
-```json
-{
-  "mcpServers": {
-    "web3auth": {
-      "url": "https://mcp.web3auth.io"
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-Run the following in your terminal:
+</TabItem>
+<TabItem value="claude-code" label="Claude Code">
 
 ```bash
 claude mcp add --transport http web3auth https://mcp.web3auth.io
 ```
 
-Or add manually to your project's `claude.json`:
+Or add to your project's `claude.json`:
 
 ```json
 {
@@ -155,14 +83,15 @@ Or add manually to your project's `claude.json`:
 }
 ```
 
-### Claude Desktop
+</TabItem>
+<TabItem value="claude-desktop" label="Claude Desktop">
 
-Open your Claude Desktop configuration file:
+Edit your config file:
 
 - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
 - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
 
-Add the server to the `mcpServers` section:
+Add the server, then restart Claude Desktop:
 
 ```json
 {
@@ -174,17 +103,14 @@ Add the server to the `mcpServers` section:
 }
 ```
 
-Restart Claude Desktop and ask: _"Search MetaMask Embedded Wallets docs for React quick start"_ to verify the connection.
-
-### Antigravity
+</TabItem>
+<TabItem value="antigravity" label="Antigravity">
 
-Open your MCP configuration file:
+Edit your MCP config:
 
 - **macOS/Linux**: `~/.config/antigravity/mcp.json`
 - **Windows**: `%APPDATA%\antigravity\mcp.json`
 
-Add the server to the `mcpServers` section:
-
 ```json
 {
   "mcpServers": {
@@ -195,17 +121,12 @@ Add the server to the `mcpServers` section:
 }
 ```
 
-Antigravity automatically reloads MCP configuration changes. You don't need to restart it.
-
-### Codex CLI
+Antigravity reloads MCP changes automatically.
 
-For Codex CLI or any stdio-only agent, use [mcp-remote](https://github.com/geelen/mcp-remote) to bridge the HTTP endpoint:
+</TabItem>
+<TabItem value="other" label="Codex / other">
 
-```bash
-npm install -g mcp-remote
-```
-
-Then add to your agent's configuration:
+For stdio-only agents, bridge the HTTP endpoint with [mcp-remote](https://github.com/geelen/mcp-remote):
 
 ```json
 {
@@ -218,43 +139,44 @@ Then add to your agent's configuration:
 }
 ```
 
-## Static docs (llms.txt)
+</TabItem>
+</Tabs>
 
-If your AI tool doesn't support MCP yet, use the static documentation file instead. This gives your AI
-assistant the full MetaMask Embedded Wallets documentation as a single text file.
+## 3. Verify and start building
 
-:::warning
-The static file is a snapshot and may not include the latest updates. Use the MCP server when possible
-for always-current docs.
-:::
+Ask your assistant:
 
-Add the following URL as a custom doc source in your tool's settings, or paste it directly into your AI chat:
+> Search MetaMask Embedded Wallets docs for React quick start
 
-```
-https://docs.metamask.io/llms-embedded-wallets-full.txt
-```
-
-For tools that support the [llms.txt spec](https://llmstxt.org/) and can index docs automatically, add:
-
-```
-https://docs.metamask.io/llms-embedded-wallets.txt
-```
-
-## Start building
+If MCP is connected, it fetches live docs and examples.
+The skill keeps SDK choice and wallet-address pitfalls in check.
 
-Once the skill and MCP are set up, ask your AI assistant directly. Good starting prompts include:
+Good follow-up prompts:
 
 - _"Add MetaMask Embedded Wallets to my React app with Google login."_
 - _"Set up social login wallets in my Next.js app using Wagmi."_
 - _"Integrate embedded wallets in my Flutter app."_
 - _"Why are my users getting different wallet addresses after I changed the login method?"_
 
-The MCP server will search the docs and fetch real working examples. The skill will ensure the correct SDK is
-chosen and common pitfalls are avoided before a line of code is written.
-
 :::tip
+Use planning mode (where available) for your first prompt.
+Review the plan before generating code to catch config mistakes that can change wallet addresses in production.
+:::
 
-Use planning mode (where available) for your initial prompt. Review the plan before generating code; this
-catches architecture mistakes early and avoids config errors that would change wallet addresses in production.
+## No MCP support?
+
+Add this URL as a custom doc source, or paste it into your chat:
+
+```
+https://docs.metamask.io/llms-embedded-wallets-full.txt
+```
+
+For tools that support [llms.txt](https://llmstxt.org/):
+
+```
+https://docs.metamask.io/llms-embedded-wallets.txt
+```
 
+:::note
+Static files are snapshots. Prefer the MCP server when your tool supports it.
 :::