ai2wallet-sdk

v0.0.6

Published

a month ago

The gateway between AI-powered agent and web3 browser extension wallet with MCP x402 UI flow straight in chat thread

0High
0Medium
0Low

jlabstudio

x402 blockchain ai agent wallets mcp react

Core Functionality

The SDK enables a specialized workflow that integrates wallet interactions directly into chat interfaces:

MCP integration: It utilizes the Model Context Protocol (MCP) to facilitate communication between AI models and tools.
UI Flow: It supports the "x402 UI flow" allowing users to interact with their wallet and sign transactions straight within a chat thread.
Web3 Connectivity: It acts as a bridge for AI agents to access browser-based crypto wallets securely.

Quick Start

Run npx ai2wallet create to bootstrap a full ready project

Installation

npm install ai2wallet-sdk

Agents

We assume that you have your Vercel AI agent (Next.js App Router) up and running

Update app/layout.tsx

import "ai2wallet-sdk/dist/client/style.css";
import { Ai2walletProvider } from "ai2wallet-sdk";

//Wrap your whole app with Ai2walletProvider
<html lang="en">
    <body>
        <Ai2walletProvider>{children}</Ai2walletProvider>
    </body>
</html>

Update your root page app/page.tsx

'use client';
// Other imports
import { ai2walletParser, Ai2walletRenderer } from "ai2wallet-sdk";
.............
{messages.map(message => (
    {ai2walletParser(message).parts.map((part, i) => {
        if (part.type === "text" && message.role === "user") {
            return (
                <div key={`${message.id}-${i}`}>
                    {part.text}
                </div>
            );
        }
        if (message.role === "assistant") {
            return ( 
                <Ai2walletRenderer 
                    key={`${message.id}-${i}`} 
                    part={part}
                /> 
            )
        }
        return null;
    })}
))}
................

Update your route handler `api/chat/route.ts`

// Other imports
import getAi2walletTools from 'ai2wallet-sdk/tools';

const mcpServerURL = process.env.MCP_SERVER_URL;
// Allow streaming responses up to 300 seconds
export const maxDuration = 300;

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();
  const stream = createUIMessageStream<any>({
    execute: async ({ writer }: any) => {
      const tools = await getAi2walletTools(mcpServerURL, writer);
      const result = streamText({
        system: 'You are a helpful assistant that can use tools',
        model: google('gemini-2.5-flash'), 
        messages: await convertToModelMessages(messages),
        tools,
        timeout: { totalMs: 300000 }
      });
      writer.merge(result.toUIMessageStream());
    },
  });
  return createUIMessageStreamResponse({ stream });
}

MCP Server

We assume your are familiar with MCP and Coinbase x402 v2 protocol

Init server and register tools

import { ai2walletFetcher, McpServer, z } from 'ai2wallet-sdk/server';

const baseURL = process.env.RESOURCE_SERVER_URL;
const endpointPath = process.env.ENDPOINT_PATH;

const server = new McpServer({
  name: "Ai2wallet x402 MCP Server Demo",
  version: "1.0.0",
});

server.registerTool("get-weather", {
  title: "Get Weather",
  description: "Get current weather for a location",
  inputSchema: z.object({
   location: z.string().describe('City name'),
  })
},
async ({ location }) => {
    const response = await ai2walletFetcher(
        server,
        baseURL,
        endpointPath,
        { location }
    );
    return {
      content:[{type:"text",text:response.data.message },response.uiResource]
    };
  }
);

Handle endpoints

// Realtime Bidirectional Communication
app.use('/api/trpc', ai2walletRPC());
// Handle POST requests for client-to-mcpserver communication
app.post('/mcp', async (req, res) => {
  // your code logic here
});
// configure the payment middleware with your routes
app.use(
  paymentMiddleware(
    {
      "GET /your-endpoint": {
        accepts: [
          {
            scheme: "exact",
            price: "$0.001",
            network: "solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1",
            payTo: svmAddress,
          },
          {
            scheme: "exact",
            price: "$0.3",
            network: "stellar:testnet",
            payTo: stellarAddress,
          },
          {
            scheme: "exact",
            price: "$0.5",
            network: "eip155:84532",
            payTo: evmAddress,
          }
        ],
        description: "Your endpoint description",
        mimeType: "application/json",
      },
    },
    resourceServer,
  ),
);

// Then define your routes as normal
app.get("/your-endpoint", (req, res) => {
 res.send({
    message: // your message reponse
    structuredOutput // optionnal structure output
  })
});

Facilitator Config

import { HTTPFacilitatorClient } from 'ai2wallet-sdk/server';

const facilitatorClient = new HTTPFacilitatorClient({url:facilitatorUrl});

x402ResourceServer Config

import { 
  x402ResourceServer, 
  ExactEvmScheme,
  ExactSvmScheme 
  ExactStellarScheme, 
} from 'ai2wallet-sdk/server';

const resourceServer = new x402ResourceServer(facilitatorClient)
  .register("eip155:*", new ExactEvmScheme())
  .register("solana:*", new ExactSvmScheme())
  .register("stellar:*", new ExactStellarScheme())

Facilitator

Create facilitator Client

import {  createX402Facilitator } from "ai2wallet-sdk/facilitator";
/**
 * POST /verify
 * POST /settle
 */
  let facilitator: x402Facilitator = createX402Facilitator(
    [paymentRequirements.network],
    facilitatorSigners
  );

Register supported networks

import {  createX402Facilitator } from "ai2wallet-sdk/facilitator";
/**
 * GET /supported
 * Get supported payment kinds and extensions
 */
app.get("/supported", async (req, res) => {
  let facilitator: x402Facilitator = createX402Facilitator([
    "eip155:84532",
    "eip155:1328",
    "eip155:80002",
    "stellar:testnet"
    ], facilitatorSigners);
});

Live Demo

Ai2Wallet Sandbox

AI framework agnostic

Vercel AI
Mastra (coming soon)
Langchain (coming soon)
Cloudflare agents SDK (coming soon)

Supported wallets

Feighter
Hana
Metamask
Phantom and much more coming soon