React

npm install @aiconnect/core @aiconnect/react

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { AiConnect } from '@aiconnect/core';
import { AiConnectProvider } from '@aiconnect/react';
import '@aiconnect/react/styles.css';
import { App } from './App.tsx';

// The visitor's AI, through the AI Wallet extension. The client looks for the wallet as soon as it is built.
const client = new AiConnect();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AiConnectProvider client={client}>
      <App />
    </AiConnectProvider>
  </StrictMode>,
);

import { useAiConnect } from '@aiconnect/react';

export function ConnectButton() {
  const { state, client, openPicker } = useAiConnect();
  if (state.status === 'connected') {
    return (
      <p>
        Connected with {state.providerName}{state.model ? ` (${state.model})` : ''}{' '}
        <button type="button" onClick={() => client.disconnect()}>Disconnect</button>
      </p>
    );
  }
  return <button type="button" onClick={openPicker}>AI mode</button>;
}

import { useState } from 'react';
import type { FormEvent } from 'react';
import { McpToolSource } from '@aiconnect/core';
import { useAiChat } from '@aiconnect/react';

const SYSTEM = 'You recommend books from this site\'s catalog. Always search the catalog before recommending.';

// Built once: the source keeps its MCP connection and the tool list it read.
const tools = new McpToolSource('/api/mcp', 'Bookshop');

export function Chat() {
  const { turns, send, busy, error, connected } = useAiChat({ system: SYSTEM, tools });
  const [question, setQuestion] = useState('');

  const submit = (event: FormEvent) => {
    event.preventDefault();
    send(question);
    setQuestion('');
  };

  if (!connected) {
    return <p>Connect your AI to ask for a book that fits your mood.</p>;
  }
  return (
    <section>
      {turns.map((turn, index) => (
        <article key={index}>
          <p>{turn.question}</p>
          {turn.tools.map(({ call, result }) => (
            <pre key={call.id}>{call.name}({JSON.stringify(call.arguments)}) {result ?? '…'}</pre>
          ))}
          <p>{turn.answer}</p>
        </article>
      ))}
      {error ? <p role="alert">{error}</p> : null}
      <form onSubmit={submit}>
        <input value={question} onChange={(event) => setQuestion(event.target.value)} placeholder="A calm book for tonight" />
        <button type="submit" disabled={busy}>Ask</button>
      </form>
    </section>
  );
}

import type { ToolDefinition, ToolSource } from '@aiconnect/core';

const BOOKS = [
  { title: 'Piranesi', author: 'Susanna Clarke', mood: ['dreamy', 'calm', 'mysterious'], pages: 272 },
  { title: 'Gilead', author: 'Marilynne Robinson', mood: ['calm', 'thoughtful', 'hopeful'], pages: 247 },
];

const DEFINITIONS: ToolDefinition[] = [
  {
    name: 'search_books',
    description: 'Find books in the catalog by mood and maximum length.',
    inputSchema: {
      type: 'object',
      properties: {
        mood: { type: 'string', description: 'One mood word, such as calm, funny or adventurous' },
        maxPages: { type: 'number' },
      },
    },
  },
];

export const demoTools: ToolSource = {
  listTools: async () => DEFINITIONS,
  async callTool(name, args) {
    if (name !== 'search_books') {
      throw new Error(`Unknown tool ${name}`);
    }
    const mood = typeof args.mood === 'string' ? args.mood.toLowerCase() : null;
    const maxPages = typeof args.maxPages === 'number' ? args.maxPages : Infinity;
    return JSON.stringify(BOOKS.filter((book) => (!mood || book.mood.includes(mood)) && book.pages <= maxPages));
  },
};

import OpenAI from 'openai';
import { AiConnect } from '@aiconnect/core';

const client = new AiConnect();
const openai = new OpenAI(client.sdkOptions);