Intelligent Components

// Traditional React Component
function TransactionHistory({ transactions }) {
  // 1. Logic (JavaScript/TypeScript)
  const handleRefund = (transactionId) => {
    // Process refund...
  };

  // 2. Structure (JSX/TSX)
  return (
    // 3. Style (CSS via className)
    <div className="transaction-list">
      {transactions.map((transaction) => (
        <div key={transaction.id} className="transaction-item">
          <span>${transaction.amount}</span>
          <span>{transaction.merchant}</span>
          <button onClick={() => handleRefund(transaction.id)}>
            Request Refund
          </button>
        </div>
      ))}
    </div>
  );
}

import { makeAssistantVisible } from "@assistant-ui/react";

// Make the refund button intelligent
const SmartButton = makeAssistantVisible(
  ({ onClick, children }) => <button onClick={onClick}>{children}</button>,
  {
    clickable: true, // Allow the assistant to click the button
  },
);

function TransactionHistory({ transactions }) {
  return (
    <div className="transaction-list">
      {transactions.map((transaction) => (
        <div key={transaction.id} className="transaction-item">
          <span>${transaction.amount}</span>
          <span>{transaction.merchant}</span>
          <SmartButton onClick={() => handleRefund(transaction.id)}>
            Request Refund
          </SmartButton>
        </div>
      ))}
    </div>
  );
}

import { useAssistantInstructions } from "@assistant-ui/react";

function SmartTransactionHistory() {
  useAssistantInstructions(`
    You are a helpful banking assistant that:
    1. Helps users understand their transactions
    2. Explains refund policies
    3. Identifies suspicious transactions
    4. Guides users through the refund process
  `);

  return <TransactionHistory transactions={transactions} />;
}

"use generative";

import { defineToolkit } from "@assistant-ui/react";
import { z } from "zod";

export default defineToolkit({
  analyzeTransaction: {
    description: "Analyze a transaction's risk and refund eligibility.",
    parameters: z.object({
      transactionId: z.string(),
      merchantName: z.string(),
    }),
    execute: async ({ transactionId, merchantName }) => {
      "use client";
      // Analyze transaction patterns, merchant reputation, etc.
      return {
        isSuspicious: false,
        merchantRating: 4.5,
        similarTransactions: 3,
        refundEligible: true,
      };
    },
    renderText: { running: "Analyzing transaction…", complete: "Analysis ready" },
  },
});

import { AuiConfig, AuiProvider, Tools, useAui } from "@assistant-ui/react";
import toolkit from "./transaction-toolkit";

function SmartTransactionHistory() {
  // Previous instructions...
  const aui = useAui();
  const config = AuiConfig({ tools: Tools({ toolkit }) });
  return (
    <AuiProvider extends={aui} config={config}>
      <TransactionHistory transactions={transactions} />
    </AuiProvider>
  );
}

import { useAui } from "@assistant-ui/react";
import { useEffect } from "react";

function SmartTransactionHistory({ userProfile }) {
  const aui = useAui();

  useEffect(() => {
    return aui.modelContext.register({
      getModelContext: () => ({
        system: `
          User spending patterns:
          - Average transaction: ${userProfile.avgTransaction}
          - Common merchants: ${userProfile.frequentMerchants.join(", ")}
          - Refund history: ${userProfile.refundCount} requests
        `,
      }),
    });
  }, [aui, userProfile]);

  // Previous components...
}