Usage with the Vercel AI SDK

The @thirdweb-dev/ai-sdk-provider is a lightweight provider that lets you use thirdweb AI with the Vercel AI SDK.

It standardizes message parts, exposes wallet-aware tools (sign_transaction, sign_swap), and ships types/utilities so you can build chat UIs that execute on-chain actions from AI responses.

If you're using the Vercel AI SDK (ai / @ai-sdk/react) and want your agent to request blockchain actions safely, this provider gives you:

• A server wrapper that streams AI output and tools.
• A message schema (ThirdwebAiMessage) compatible with useChat for typed tool results.
• Ready-made thirdweb tools wired for transactions, swaps and monitoring.

pnpm add @thirdweb-dev/ai-sdk-provider ai @ai-sdk/react

Create a thirdweb ai provider instance and compatible with the Vercel AI SDK by calling createThirdwebAI with your project secret key.

Then pass a thirdwebAI.chat() instance as the model for the streamText function and configure the model context with the context option.

// src/app/api/chat/route.ts
 
import { convertToModelMessages, streamText } from "ai";
import { createThirdwebAI } from "@thirdweb-dev/ai-sdk-provider";
 
// Allow streaming responses up to 5 minutes
export const maxDuration = 300;
 
const thirdwebAI = createThirdwebAI({
  secretKey: process.env.THIRDWEB_SECRET_KEY,
});
 
export async function POST(req: Request) {
  const { messages, id } = await req.json();
 
  const result = streamText({
    model: thirdwebAI.chat(id, {
      context: {
        chain_ids: [8453], // optional chain ids
        from: "0x...", // optional from address
        auto_execute_transactions: true, // optional, defaults to false
      },
    }),
    messages: convertToModelMessages(messages),
    tools: thirdwebAI.tools(), // optional, to handle transactions and swaps
  });
 
  return result.toUIMessageStreamResponse({
    sendReasoning: true, // optional, to send reasoning steps to the client
  });
}

Continuous conversations are handled automatically. You can create a new conversation by passing a new id to the thirdwebAI.chat() function.

Use useChat<ThirdwebAiMessage>() to get typed objects from useChat(). This will give you strongly typed tool results in your UI like tool-sign_transaction, tool-sign_swap or tool-monitor_transaction.

"use client";
 
import { useState } from "react";
import {
  DefaultChatTransport,
  lastAssistantMessageIsCompleteWithToolCalls,
} from "ai";
import { useChat, type UseChatHelpers } from "@ai-sdk/react";
import type { ThirdwebAiMessage } from "@thirdweb-dev/ai-sdk-provider";
 
export function Chat() {
  const { messages, sendMessage, addToolResult, status } =
    useChat<ThirdwebAiMessage>({
      transport: new DefaultChatTransport({ api: "/api/chat" }),
      // send tool results automatically
      sendAutomaticallyWhen:
        lastAssistantMessageIsCompleteWithToolCalls,
    });
 
  // You can render messages and reasoning steps as you normally would
  // Use your own UI or the vercel ai elements UI components
  // When a tool part arrives (e.g., message.parts[0].type === "tool-sign_transaction"),
  // you can render a transaction button with the input to execute the transaction.
  return (
    <>
      {messages.map((message) => (
        <RenderMessage
          key={message.id}
          message={message}
          addToolResult={addToolResult}
        />
      ))}
      <ChatInputBox send={sendMessage} />
    </>
  );
}

You can render messages and reasoning steps as you normally would using your own UI or the Vercel AI Elements components.

When a transaction or swap is requested, the model will return a tool-sign_transaction or tool-sign_swap part. You can then render those tool requests in your UI, for example:

• tool-sign_transaction -> render a button to execute the transaction (TransactionButton works well for this)
• tool-sign_swap -> render a button to execute the swap
• tool-monitor_transaction -> render a loading indicator with the transaction status (when auto_execute_transactions is true)

Then on result, you can call the addToolResult function to add the tool result to the messages array and send it back to the model to continue the conversation.

export function RenderMessage(props: {
  message: ThirdwebAiMessage;
  addToolResult: UseChatHelpers<ThirdwebAiMessage>["addToolResult"];
}) {
  const { message, addToolResult } = props;
  return (
    <>
      {message.parts.map((part, i) => {
        switch (part.type) {
          case "text":
            return <Text>{part.text}</Text>;
          case "reasoning":
            return <Reasoning>{part.text}</Reasoning>;
          case "tool-sign_transaction":
            // handle transaction confirmation UI here
            // example:
            const transactionData = part.input;
            return (
              <TransactionButton
                transaction={() =>
                  prepareTransaction({
                    client: THIRDWEB_CLIENT,
                    chain: defineChain(transactionData.chain_id),
                    to: transactionData.to,
                    data: transactionData.data,
                    value: transactionData.value,
                  })
                }
                onTransactionSent={(transaction) => {
                  // send the tool result to the model to continue the conversation
                  addToolResult({
                    tool: "sign_transaction",
                    toolCallId: part.toolCallId,
                    output: {
                      transaction_hash: transaction.transactionHash,
                      chain_id: transaction.chain.id,
                    },
                  });
                }}
                onError={(error) => {
                  // in case of error, show error UI or send the error message to the model
                  console.error(error);
                }}
              >
                Sign Transaction
              </TransactionButton>
            );
          case "tool-sign_swap":
            // handle swap UI here
            return <SwapButton input={part.input} />;
          case "tool-monitor_transaction":
            // for auto executing transactions, handle transaction monitoring UI here
            return <TransactionMonitor input={part.input} />;
          default:
            return null;
        }
      })}
    </>
  );
}