-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid #1f1d1b`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
- {/* Header */}
-
-
- {isSign ? "Sign" : "Review"}
-
-
-
-
- {/* Demo banner */}
-
-
-
- DEMO · Not a real {isSign ? "signature" : "transaction"}
-
-
-
- {/* Preview */}
-
- {renderPreview()}
-
-
- {/* Field rows */}
-
-
-
- 0x71Dc…7244
-
- }
- />
- {!isSign && (
-
-
- 0x71Dc…7244
-
-
- }
- />
- )}
-
-
- Base
-
- }
- />
- {!isSign && (
- {"< $0.01"}}
- />
- )}
-
-
- {/* Buttons */}
-
-
-
-
-
-
-
-
-
- {/* Signed-in row */}
-
-
-
- Signed in as 0x71Dc…7244
-
-
-
- {/* Body */}
-
- {/* Icons */}
-
-
-
- Allow {client} to access your account.
-
-
-
- By continuing, you allow {client} to:
-
-
-
- {permissions.map((p, i) => (
-
-
- {icons[i]}
-
-
- {p.label}
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Preview · Shown in Base Account on first wallet-tool use
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed
- ?
- : }
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
- {k}: "{v}"{i < arr.length - 1 && , }
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => )}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const ResponseRows = ({ rows }) => (
-
- {rows.map((r, i) => (
-
- •
- {r.token}
- {r.amount}
- {r.value}
-
- ))}
-
-
-
-
-
-
Base MCP
-
▾
-
- {activeIdx !== null && (
-
- )}
-
-
-
- {!ex && (
-
-
- Check your wallet balance once mcp.base.org is connected:
-
-
- {examples.map((e, i) => pick(i)}>{e.prompt})}
-
-
- )}
- {ex && <>
{ex.prompt}{renderEvents()}}
-
-
-
-
-
-
Write a message...
-
Sonnet 4.6 ▾
-
-
-
- Demo · Read-only — no approval required to check balances
-
-
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- const SmallTokenAvatar = ({ ticker }) => (
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- // Wallet avatar — wow-face emoji style in a blue gradient circle
- const CBAvatar = () => (
-
-
-
-
-
- );
-
- // Sign-icon avatar for signing flows — pen-on-paper in a purple gradient circle
- const SignAvatar = () => (
-
- );
-
- const ApprovalButton = ({ preview, onApprove, label }) => {
- const [hover, setHover] = useState(false);
- return (
-
-
-
-
-
-
-
- {preview.amount} {preview.asset}
-
- {preview.usdValue && (
-
- {preview.usdValue}
-
- )}
-
-
- To
- {preview.to}
-
-
-
-
-
-
You send
-
- {preview.fromAmount} {preview.fromAsset}
-
-
- {preview.fromUsd && (
-
{preview.fromUsd}
- )}
-
-
-
-
-
-
You receive
-
- {preview.toAmount} {preview.toAsset}
-
-
- {preview.toUsd && (
-
{preview.toUsd}
- )}
-
-
-
-
-
-
You deposit
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
-
Into
-
-
{preview.vault}
- {preview.apy && (
-
{preview.apy} APY
- )}
-
-
-
-
-
-
-
Supply collateral
-
- {preview.collateralAmount} {preview.collateralAsset}
-
-
-
-
-
-
-
You borrow
-
- {preview.loanAmount} {preview.loanAsset}
-
-
-
- {preview.healthFactor && (
-
- Health factor
- {preview.healthFactor}
-
- )}
-
-
-
-
-
You repay
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
- To market
- {preview.market}
-
-
-
-
-
-
- Sign message
-
-
- personal_sign
-
-
- "{preview.message}"
-
-
-
-
-
-
- Sign in with Ethereum
-
-
- EIP-4361 · session login
-
-
-
- Domain
- {preview.domain}
-
-
-
-
-
-
- Approve token spending
-
-
- EIP-712 · Permit2
-
-
-
-
Token
-
-
- {preview.token}
-
-
-
- Spender
- {preview.spender}
-
- {preview.amount && (
-
- Allowance
- {preview.amount}
-
- )}
-
-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid #1f1d1b`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
- {/* Header */}
-
-
- {isSign ? "Sign" : "Review"}
-
-
-
-
- {/* Demo banner */}
-
-
-
- DEMO · Not a real {isSign ? "signature" : "transaction"}
-
-
-
- {/* Preview */}
-
- {renderPreview()}
-
-
- {/* Field rows */}
-
-
-
- 0x71Dc…7244
-
- }
- />
- {!isSign && (
-
-
- 0x71Dc…7244
-
-
- }
- />
- )}
-
-
- Base
-
- }
- />
- {!isSign && (
- {"< $0.01"}}
- />
- )}
-
-
- {/* Buttons */}
-
-
-
-
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const formatArgValue = (value) => (
- value && typeof value === "object" ? JSON.stringify(value) : `"${value}"`
- );
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed
- ?
- : }
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
- {k}: {formatArgValue(v)}{i < arr.length - 1 && , }
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => )}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const Confirm = ({ text }) => (
-
- );
-
- const ChipBtn = ({ onClick, children }) => {
- const [hover, setHover] = useState(false);
- return (
-
- );
- };
-
- const renderEvents = () => {
- if (!ex) return null;
- const shown = ex.events.slice(0, eventIdx);
- return shown.map((event, i) => {
- if (event.type === "thinking") {
- if (i < shown.length - 1) return null;
- return ;
- }
- if (event.type === "tool") {
- const hasLater = shown.slice(i + 1).some(e => e.type !== "thinking");
- return ;
- }
- if (event.type === "text") return {event.text};
- if (event.type === "approval") return ;
- if (event.type === "confirm") return ;
- return null;
- });
- };
-
- return (
-
- {modalPreview &&
setModalPreview(null)} />}
-
-
-
-
-
Base MCP
-
▾
-
- {activeIdx !== null && (
-
- )}
-
- {!ex && (
-
-
- Sign messages and typed data once mcp.base.org is connected:
-
-
- {examples.map((e, i) => pick(i)}>{e.prompt})}
-
-
- )}
- {ex && <>
{ex.prompt}{renderEvents()}}
-
-
-
-
Write a message...
-
Sonnet 4.6 ▾
-
-
-
- Demo · Every signature requires your approval in Base Account
-
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- const SmallTokenAvatar = ({ ticker }) => (
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- // Wallet avatar — wow-face emoji style in a blue gradient circle
- const CBAvatar = () => (
-
-
-
-
-
- );
-
- // Sign-icon avatar for signing flows — pen-on-paper in a purple gradient circle
- const SignAvatar = () => (
-
- );
-
- const ApprovalButton = ({ preview, onApprove, label }) => {
- const [hover, setHover] = useState(false);
- return (
-
-
-
-
-
-
-
- {preview.amount} {preview.asset}
-
- {preview.usdValue && (
-
- {preview.usdValue}
-
- )}
-
-
- To
- {preview.to}
-
-
-
-
-
-
You send
-
- {preview.fromAmount} {preview.fromAsset}
-
-
- {preview.fromUsd && (
-
{preview.fromUsd}
- )}
-
-
-
-
-
-
You receive
-
- {preview.toAmount} {preview.toAsset}
-
-
- {preview.toUsd && (
-
{preview.toUsd}
- )}
-
-
-
-
-
-
You deposit
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
-
Into
-
-
{preview.vault}
- {preview.apy && (
-
{preview.apy} APY
- )}
-
-
-
-
-
-
-
Supply collateral
-
- {preview.collateralAmount} {preview.collateralAsset}
-
-
-
-
-
-
-
You borrow
-
- {preview.loanAmount} {preview.loanAsset}
-
-
-
- {preview.healthFactor && (
-
- Health factor
- {preview.healthFactor}
-
- )}
-
-
-
-
-
You repay
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
- To market
- {preview.market}
-
-
-
-
-
-
- Sign message
-
-
- personal_sign
-
-
- "{preview.message}"
-
-
-
-
-
-
- Sign in with Ethereum
-
-
- EIP-4361 · session login
-
-
-
- Domain
- {preview.domain}
-
-
-
-
-
-
- Approve token spending
-
-
- EIP-712 · Permit2
-
-
-
-
Token
-
-
- {preview.token}
-
-
-
- Spender
- {preview.spender}
-
- {preview.amount && (
-
- Allowance
- {preview.amount}
-
- )}
-
-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid #1f1d1b`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
- {/* Header */}
-
-
- {isSign ? "Sign" : "Review"}
-
-
-
-
- {/* Demo banner */}
-
-
-
- DEMO · Not a real {isSign ? "signature" : "transaction"}
-
-
-
- {/* Preview */}
-
- {renderPreview()}
-
-
- {/* Field rows */}
-
-
-
- 0x71Dc…7244
-
- }
- />
- {!isSign && (
-
-
- 0x71Dc…7244
-
-
- }
- />
- )}
-
-
- Base
-
- }
- />
- {!isSign && (
- {"< $0.01"}}
- />
- )}
-
-
- {/* Buttons */}
-
-
-
-
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed
- ?
- : }
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
- {k}: "{v}"{i < arr.length - 1 && , }
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => )}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const Confirm = ({ text }) => (
-
- );
-
- const ChipBtn = ({ onClick, children }) => {
- const [hover, setHover] = useState(false);
- return (
-
- );
- };
-
- const renderEvents = () => {
- if (!ex) return null;
- const shown = ex.events.slice(0, eventIdx);
- return shown.map((event, i) => {
- if (event.type === "thinking") {
- if (i < shown.length - 1) return null;
- return ;
- }
- if (event.type === "tool") {
- const hasLater = shown.slice(i + 1).some(e => e.type !== "thinking");
- return ;
- }
- if (event.type === "text") return {event.text};
- if (event.type === "approval") return ;
- if (event.type === "confirm") return ;
- return null;
- });
- };
-
- return (
-
- {modalPreview &&
setModalPreview(null)} />}
-
-
-
-
-
Base MCP
-
▾
-
- {activeIdx !== null && (
-
- )}
-
- {!ex && (
-
-
- Send tokens to any address or name once mcp.base.org is connected:
-
-
- {examples.map((e, i) => pick(i)}>{e.prompt})}
-
-
- )}
- {ex && <>
{ex.prompt}{renderEvents()}}
-
-
-
-
Write a message...
-
Sonnet 4.6 ▾
-
-
-
- Demo · Every send requires your approval in Base Account
-
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- const SmallTokenAvatar = ({ ticker }) => (
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- // Wallet avatar — wow-face emoji style in a blue gradient circle
- const CBAvatar = () => (
-
-
-
-
-
- );
-
- // Sign-icon avatar for signing flows — pen-on-paper in a purple gradient circle
- const SignAvatar = () => (
-
- );
-
- const ApprovalButton = ({ preview, onApprove, label }) => {
- const [hover, setHover] = useState(false);
- return (
-
-
-
-
-
-
-
- {preview.amount} {preview.asset}
-
- {preview.usdValue && (
-
- {preview.usdValue}
-
- )}
-
-
- To
- {preview.to}
-
-
-
-
-
-
You send
-
- {preview.fromAmount} {preview.fromAsset}
-
-
- {preview.fromUsd && (
-
{preview.fromUsd}
- )}
-
-
-
-
-
-
You receive
-
- {preview.toAmount} {preview.toAsset}
-
-
- {preview.toUsd && (
-
{preview.toUsd}
- )}
-
-
-
-
-
-
You deposit
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
-
Into
-
-
{preview.vault}
- {preview.apy && (
-
{preview.apy} APY
- )}
-
-
-
-
-
-
-
Supply collateral
-
- {preview.collateralAmount} {preview.collateralAsset}
-
-
-
-
-
-
-
You borrow
-
- {preview.loanAmount} {preview.loanAsset}
-
-
-
- {preview.healthFactor && (
-
- Health factor
- {preview.healthFactor}
-
- )}
-
-
-
-
-
You repay
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
- To market
- {preview.market}
-
-
-
-
-
-
- Sign message
-
-
- personal_sign
-
-
- "{preview.message}"
-
-
-
-
-
-
- Sign in with Ethereum
-
-
- EIP-4361 · session login
-
-
-
- Domain
- {preview.domain}
-
-
-
-
-
-
- Approve token spending
-
-
- EIP-712 · Permit2
-
-
-
-
Token
-
-
- {preview.token}
-
-
-
- Spender
- {preview.spender}
-
- {preview.amount && (
-
- Allowance
- {preview.amount}
-
- )}
-
-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid #1f1d1b`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
- {/* Header */}
-
-
- {isSign ? "Sign" : "Review"}
-
-
-
-
- {/* Demo banner */}
-
-
-
- DEMO · Not a real {isSign ? "signature" : "transaction"}
-
-
-
- {/* Preview */}
-
- {renderPreview()}
-
-
- {/* Field rows */}
-
-
-
- 0x71Dc…7244
-
- }
- />
- {!isSign && (
-
-
- 0x71Dc…7244
-
-
- }
- />
- )}
-
-
- Base
-
- }
- />
- {!isSign && (
- {"< $0.01"}}
- />
- )}
-
-
- {/* Buttons */}
-
-
-
-
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed
- ?
- : }
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
- {k}: "{v}"{i < arr.length - 1 && , }
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => )}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const ResponseRows = ({ rows }) => (
-
- {rows.map((r, i) => (
-
- •
- {r.token}
- {r.amount}
- {r.value}
-
- ))}
-
- {modalPreview &&
setModalPreview(null)} />}
-
-
-
-
-
Base MCP
-
▾
-
- {activeIdx !== null && (
-
- )}
-
- {!ex && (
-
-
- Swap any token on Base once mcp.base.org is connected:
-
-
- {examples.map((e, i) => pick(i)}>{e.prompt})}
-
-
- )}
- {ex && <>
{ex.prompt}{renderEvents()}}
-
-
-
-
Write a message...
-
Sonnet 4.6 ▾
-
-
-
- Demo · Every swap requires your approval in Base Account
-
-
- {description && (
-
- {description}
-
- )}
-
-
-
-
-
setExpanded(e => !e)}
- style={{
- flex: 1, minWidth: 0,
- fontFamily: mono, fontSize: 13, lineHeight: 1.55,
- cursor: "pointer",
- whiteSpace: expanded ? "pre-wrap" : "nowrap",
- overflow: expanded ? "visible" : "hidden",
- textOverflow: expanded ? "clip" : "ellipsis",
- wordBreak: expanded ? "break-word" : "normal",
- }}
- >
- {text}
-
-
-
-
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- const SmallTokenAvatar = ({ ticker }) => (
-
-
- {(ticker || "??").slice(0, 2).toUpperCase()}
-
-
- );
-
- // Wallet avatar — wow-face emoji style in a blue gradient circle
- const CBAvatar = () => (
-
-
-
-
-
- );
-
- // Sign-icon avatar for signing flows — pen-on-paper in a purple gradient circle
- const SignAvatar = () => (
-
- );
-
- const ApprovalButton = ({ preview, onApprove, label }) => {
- const [hover, setHover] = useState(false);
- return (
-
-
-
-
-
-
-
- {preview.amount} {preview.asset}
-
- {preview.usdValue && (
-
- {preview.usdValue}
-
- )}
-
-
- To
- {preview.to}
-
-
-
-
-
-
You send
-
- {preview.fromAmount} {preview.fromAsset}
-
-
- {preview.fromUsd && (
-
{preview.fromUsd}
- )}
-
-
-
-
-
-
You receive
-
- {preview.toAmount} {preview.toAsset}
-
-
- {preview.toUsd && (
-
{preview.toUsd}
- )}
-
-
-
-
-
-
You deposit
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
-
Into
-
-
{preview.vault}
- {preview.apy && (
-
{preview.apy} APY
- )}
-
-
-
-
-
-
-
Supply collateral
-
- {preview.collateralAmount} {preview.collateralAsset}
-
-
-
-
-
-
-
You borrow
-
- {preview.loanAmount} {preview.loanAsset}
-
-
-
- {preview.healthFactor && (
-
- Health factor
- {preview.healthFactor}
-
- )}
-
-
-
-
-
You repay
-
- {preview.amount} {preview.asset}
-
-
- {preview.usdValue && (
-
{preview.usdValue}
- )}
-
-
- To market
- {preview.market}
-
-
-
-
-
-
- Sign message
-
-
- personal_sign
-
-
- "{preview.message}"
-
-
-
-
-
-
- Sign in with Ethereum
-
-
- EIP-4361 · session login
-
-
-
- Domain
- {preview.domain}
-
-
-
-
-
-
- Approve token spending
-
-
- EIP-712 · Permit2
-
-
-
-
Token
-
-
- {preview.token}
-
-
-
- Spender
- {preview.spender}
-
- {preview.amount && (
-
- Allowance
- {preview.amount}
-
- )}
-
-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid #1f1d1b`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
- {/* Header */}
-
-
- {isSign ? "Sign" : "Review"}
-
-
-
-
- {/* Demo banner */}
-
-
-
- DEMO · Not a real {isSign ? "signature" : "transaction"}
-
-
-
- {/* Preview */}
-
- {renderPreview()}
-
-
- {/* Field rows */}
-
-
-
- 0x71Dc…7244
-
- }
- />
- {!isSign && (
-
-
- 0x71Dc…7244
-
-
- }
- />
- )}
-
-
- Base
-
- }
- />
- {!isSign && (
- {"< $0.01"}}
- />
- )}
-
-
- {/* Buttons */}
-
-
-
-
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed ? (
-
- ) : (
-
- )}
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
-
- {k}:
- "{v}"
- {i < arr.length - 1 && , }
-
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => (
-
- ))}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const ResponseRows = ({ rows }) => (
-
- {rows.map((r, i) => (
-
- •
- {r.token}
- {r.amount}
- {r.value}
-
- ))}
-
- {/* keyframes + responsive */}
-
-
- {/* Transaction approval modal */}
- {modalPreview && (
-
setModalPreview(null)}
- />
- )}
-
- {/* Header */}
-
-
-
- Base MCP
-
-
▾
-
- {activeIdx !== null && (
-
- )}
-
- {!ex && (
-
-
- Try asking your assistant once mcp.base.org is connected:
-
-
- {examples.map((e, i) => (
- pick(i)}>{e.prompt}
- ))}
-
-
- )}
-
- {ex && (
- <>
-
{ex.prompt}
- {renderEvents()}
-
- )}
-
-
-
-
- Write a message...
-
-
- Base MCP ▾
-
-
-
-
- Demo · Every write action requires your approval in Base Account
-
-
-
-
-
-
- );
-
- const SignAvatar = () => (
-
- );
-
- const ApprovalButton = ({ preview, onApprove }) => {
- const [hover, setHover] = useState(false);
- return (
-
-
-
- {label}
- {value}
-
- );
-
- const FieldRow = ({ label, right }) => (
-
- );
-
- return (
-
-
e.stopPropagation()}
- style={{
- background: mbg,
- borderRadius: 16,
- border: `1px solid ${mhair}`,
- width: 320, maxWidth: "100%",
- maxHeight: "calc(100% - 8px)",
- overflowY: "auto",
- boxShadow: "0 24px 80px rgba(0,0,0,0.85)",
- }}
- >
-
-
-
-
-
- DEMO · Not a real signature
-
-
-
-
-
-
-
-
-
- Sign x402 payment
-
-
- Payment authorization
-
-
-
-
-
-
-
-
-
-
-
- 0x71Dc…7244
-
- }
- />
-
-
- {preview.network}
-
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- const UserBubble = ({ children }) => (
-
- );
-
- const formatArgValue = (value) => {
- if (value && typeof value === "object") return JSON.stringify(value);
- if (typeof value === "string") return `"${value}"`;
- return String(value);
- };
-
- const ToolCall = ({ tool, completed }) => (
-
-
-
- {completed
- ?
- : }
-
-
- {tool.server}
- ·
- {tool.action}
- (
- {Object.entries(tool.args).map(([k, v], i, arr) => (
- {k}: {formatArgValue(v)}{i < arr.length - 1 && , }
- ))}
- )
-
-
-
-
- {[0, 1, 2].map(i => )}
-
- Thinking
-
- );
-
- const ResponseText = ({ children, top }) => (
- {children}
- );
-
- const ResponseRows = ({ rows }) => (
-
- {rows.map((r, i) => (
-
- •
- {r.token}
- {r.amount}
- {r.value}
-
- ))}
-
- {modalPreview &&
setModalPreview(null)} />}
-
-
-
-
-
Base MCP
-
▾
-
- {activeIdx !== null && (
-
- )}
-
- {!ex && (
-
-
- Try asking your assistant once mcp.base.org is connected:
-
-
- {examples.map((e, i) => pick(i)}>{e.prompt})}
-
-
- )}
- {ex && <>
{ex.prompt}{renderEvents()}}
-
-
-
-
Write a message...
-
Sonnet 4.6 ▾
-
-
-
- Demo · x402 payments require a wallet signature in Base Account
-
-
-
-
- Works in Claude.ai and Claude Apps (Desktop, iOS, Android). Click the button above, or:
-
- 1. Open **Customize → Connectors → Add custom connector**
- 2. The **Add custom connector** modal opens
- 3. Fill in:
- - **Name**: `Base MCP`
- - **Remote MCP server URL**: `https://mcp.base.org`
- 4. Click **Add**
- 5. Next hit **Connect**, then approve the connection in Base Account. Click **Allow** once to authorize:
-
- 
-
-
- Click the button above, or open **Settings → Connectors** manually. Then:
-
- 1. Enable **Developer Mode** if prompted (under Advanced)
- 2. Click **Create** to open the **New App** modal
- 3. Fill in:
- - **Name**: `Base MCP`
- - **Description** (optional): `Wallet and onchain tools for Base`
- - **MCP Server URL**: `https://mcp.base.org`
- - **Authentication**: `OAuth`
- 4. Check **I understand and want to continue** on the risk warning
- 5. Click **Create**
- 6. You will be automatically redirected to Base Account. Click **Allow** once to authorize.
- 
-
-
- Click the button above, or open [**Connectors**](https://www.perplexity.ai/computer/connectors) manually. Then:
-
- 1. Search for `Base` to find the **Base by Coinbase** connector
- 2. Click to add it
- 3. Approve the connection in Base Account. Click **Allow** once to authorize.
- 
-
-
- Or add manually to `~/.cursor/mcp.json` (global) or `.cursor/mcp.json` (project):
-
- ```json mcp.json
- {
- "mcpServers": {
- "base-mcp": {
- "url": "https://mcp.base.org"
- }
- }
- }
- ```
-
- Restart Cursor, then open **Settings → MCP** to confirm `base-mcp` shows as active.
- 
-
-
- Click the button above to download `base-mcp.zip`, then:
-
- 1. In Claude Desktop or Claude.ai, open [**Customize → Skills**](https://claude.ai/customize/skills)
- 2. Click **Upload skill** and select the downloaded `base-mcp.zip`
- 3. Toggle the skill on
-
- Claude activates the skill automatically when relevant to your prompt. See [Use skills in Claude](https://support.claude.com/en/articles/12512180-use-skills-in-claude) for details.
-