# Introduction (/docs)

AI Connect is the set of packages you add to your site. AI Wallet is the Chrome extension your visitors install. The wallet keeps the visitor's AI accounts in an encrypted vault on their computer: a ChatGPT, Claude or Gemini plan, an OpenRouter account, an API key, and the [other accounts it supports](/docs/providers). When your site asks, the wallet answers with the account the visitor picked for your site. The inference runs on the visitor's account, so your site pays nothing for it.

Your site keeps its own tools, such as a catalog search, and exposes them as an MCP server. The visitor's model calls those tools from the page through the SDK.

A site that already calls a model through the OpenAI SDK, the Anthropic SDK, Google Gen AI, the Vercel AI SDK, LangChain or LlamaIndex keeps that code: it passes `aiconnect.fetch` to the SDK, and the SDK's requests are answered by the visitor's account. The [AI SDK guide](/docs/guides/existing-sdks) shows the change for each SDK.

## The pieces [#the-pieces]

| Piece | What it does | Where it runs |
| --- | --- | --- |
| `@aiconnect/core` | `AiConnect`, the connection to the wallet, with the `fetch` your AI SDK answers through. `runConversation`, the loop that runs your tools. `McpToolSource`, which reads your tools from your MCP server. | Your page, in the visitor's browser |
| `@aiconnect/react` | `AiConnectProvider`, the connect window, `useAiConnect` and `useAiChat`. | Your React page |
| `@aiconnect/design` | The `--aic-*` CSS tokens the connect window reads. `@aiconnect/react/styles.css` includes them. | Your stylesheet |
| AI Wallet | Holds the visitor's accounts, asks the visitor before a new site uses them, and calls the provider. | The visitor's Chrome |
| Your MCP server | Serves your site's tools. | Your server |

Provider sign ins and keys belong to the wallet. The visitor adds and removes accounts there, and the wallet renews their tokens when they near expiry. The SDK contains no sign in or key handling.

## How a visit works [#how-a-visit-works]

1. The page loads. AI Wallet has already placed `window.aiwallet` in the page, before your scripts run.
2. Your `AiConnect` client finds the wallet and asks for the site's `status`. A site the visitor approved on an earlier visit comes back connected, with the name of the account that answers it.
3. A visitor who has not approved your site opens your AI entry point, such as an "AI mode" button. Your page shows the connect window, and its button calls `connect`.
4. The wallet asks the visitor. A locked wallet first opens its unlock window. The wallet then opens its approval window, which shows your site's host and the account that will answer it. Once the visitor approves, your page becomes connected without a reload.
5. The visitor asks a question. The SDK reads your tool definitions from your MCP server and sends the conversation, with those definitions, to the wallet through `chat`.
6. The wallet's background calls the provider with the visitor's credential and streams the text of the answer back to your page.
7. When the model asks for a tool, the SDK calls your MCP server from the page, adds the result to the conversation and asks the model again. The loop ends when the model answers in plain text.
8. The visitor can later pick another account or model for your site in the wallet's side panel. Your open pages receive the change through the wallet's link notice and show the new account.

With an AI SDK, steps 5 to 7 belong to the SDK: it builds each request in its own protocol, `aiconnect.fetch` passes it to the wallet through `chat`, and the SDK runs its own tool loop on the answers.

## What your site receives [#what-your-site-receives]

- The connection state: whether your site may use the visitor's AI, the display name of the account that answers it (`ChatGPT`, `Claude`, `Auto` and so on) and that account's model.
- The text of each answer as it streams, and the final assistant message with any tool calls the model made, why the answer ended, the model that answered and the token counts the provider reported.

## What stays in the wallet [#what-stays-in-the-wallet]

- The visitor's credentials. API keys and the tokens a sign in returns live in the vault, and the wallet's background sends them only to the provider they belong to.
- The list of accounts the visitor holds, the other sites they approved, and the room each account has left.
- The conversations of other sites.

The provider of the visitor's account receives the conversation, since the answer runs on that account. Your MCP server receives the arguments of each tool call the model makes. The [security model](/docs/security) covers the details.

## Where it runs [#where-it-runs]

AI Wallet is a Chrome extension. It serves pages on HTTPS, and on `http://localhost` and `http://127.0.0.1` for development, in the top frame of each tab. A visitor without the wallet sees how to install it in the connect window.

<Cards>
  <Card title="React quickstart" href="/docs/quickstart/react" description="The connect window and a chat with your tools in a React app." />
  <Card title="Next.js quickstart" href="/docs/quickstart/nextjs" description="A client provider, the server render state and a lazy chat panel." />
  <Card title="JavaScript quickstart" href="/docs/quickstart/javascript" description="The AiConnect client and the tool loop without React." />
  <Card title="Use the AI SDK you already have" href="/docs/guides/existing-sdks" description="OpenAI, Anthropic, Google Gen AI, Vercel AI SDK, LangChain and LlamaIndex on the visitor's account." />
  <Card title="Expose your tools over MCP" href="/docs/guides/mcp-tools" description="Serve your tools, design them for a model, and render their results." />
  <Card title="Wallet protocol" href="/docs/protocol/wallet-provider" description="window.aiwallet, its methods and its notices." />
  <Card title="Security model" href="/docs/security" description="What the site sees, what the wallet holds, and how the vault is sealed." />
</Cards>
