# Arlopass Documentation

> Open-source AI access management for the web. Arlopass is a browser extension and developer SDK that lets web apps use a user's own AI providers without touching API keys.

## Components Library
- [Overview](https://arlopass.com/docs/components/overview): Overview of the Arlopass UI component primitives — Chat, Message, StreamingText, ProviderPicker, and more.
- [Chat](https://arlopass.com/docs/components/chat): Chat primitive component for building AI chat interfaces with streaming, tool support, and full state control.
- [Message](https://arlopass.com/docs/components/message): Standalone message display component for rendering individual chat messages with role, content, timestamp, and status.
- [StreamingText](https://arlopass.com/docs/components/streaming-text): Streaming text renderer with a typing cursor for displaying real-time AI responses.
- [ProviderPicker](https://arlopass.com/docs/components/provider-picker): Provider and model selection compound component for choosing AI providers and models.
- [ToolActivity](https://arlopass.com/docs/components/tool-activity): Tool call execution display component for rendering function calling status, arguments, and results.
- [ConnectionStatus](https://arlopass.com/docs/components/connection-status): Connection state display component for showing real-time WebSocket connection status.
- [Block registry](https://arlopass.com/docs/components/registry): Pre-built UI blocks for chat, provider selection, connection status, and more — install via CLI or copy from the registry.

## Concepts
- [How Arlopass works](https://arlopass.com/docs/concepts/how-arlopass-works): Understanding the architecture — extension, SDK, bridge, and adapters.
- [Transport model](https://arlopass.com/docs/concepts/transport-model): How the SDK communicates with the extension — transport interface, envelope protocol, and validation.
- [State management](https://arlopass.com/docs/concepts/state-management): How the React SDK stays in sync with the ArlopassClient using ClientStore and useSyncExternalStore.
- [Web SDK vs React SDK](https://arlopass.com/docs/concepts/web-sdk-vs-react): When to use each — or both. Side-by-side comparison and migration path.

## Getting Started
- [Welcome to Arlopass](https://arlopass.com/docs/getting-started/welcome): Arlopass is an open-source AI wallet that lets web apps use a user's own AI providers — Ollama, Claude, GPT, Gemini, Bedrock — without touching API keys.
- [Installation](https://arlopass.com/docs/getting-started/installation): Install the Arlopass browser extension and SDK packages to start building AI-powered web apps.
- [Quickstart: Web SDK](https://arlopass.com/docs/getting-started/quickstart-web-sdk): Get started with the Arlopass Web SDK in 5 steps — connect, list providers, select a model, and send your first message.
- [Quickstart: React SDK](https://arlopass.com/docs/getting-started/quickstart-react): Build your first AI-powered React app with Arlopass in 5 steps using hooks, providers, and streaming.

## How-to Guides
- [Conversation management](https://arlopass.com/docs/guides/conversation-management): Manage context windows, pin messages, auto-summarize, and monitor token usage.
- [Tool calling](https://arlopass.com/docs/guides/tool-calling): Configure auto-execute and manual tool modes, handle streaming events, and set maxToolRounds.
- [Error handling](https://arlopass.com/docs/guides/error-handling): Handle retryable errors, use error boundaries, and reference SDK error codes.
- [Testing your app](https://arlopass.com/docs/guides/testing): Mock transports, test streaming, simulate errors, and verify tool calls.
- [Guard components](https://arlopass.com/docs/guides/guard-components): Gate UI on connection, provider, and chat readiness with positive and negative guards.
- [Security model](https://arlopass.com/docs/guides/security): Understand endpoint validation, origin enforcement, vault encryption, and zero-trust architecture.

## Interactive
- [Playground](https://arlopass.com/docs/interactive/playground): Live SDK sandbox — connect, list providers, send messages, stream responses.
- [Connection](https://arlopass.com/docs/interactive/connection): Configure transport profile, app identity, and manage SDK connections.
- [Providers](https://arlopass.com/docs/interactive/providers): Browse available AI providers and select models for chat.
- [Chat](https://arlopass.com/docs/interactive/chat): View chat message history and transcripts from SDK operations.
- [Streaming](https://arlopass.com/docs/interactive/streaming): Real-time streaming demo — watch AI responses arrive chunk by chunk.
- [Event log](https://arlopass.com/docs/interactive/event-log): SDK operation audit log — track all connect, list, send, and stream events.

## React SDK Reference
- [ArlopassProvider](https://arlopass.com/docs/reference/react/provider): Root context provider for the React SDK — wrap your app to enable all hooks and guard components.
- [Hooks](https://arlopass.com/docs/reference/react/hooks): React hooks for connection, providers, chat, conversations, and client access.
- [Guard components](https://arlopass.com/docs/reference/react/guards): Conditionally render children based on connection state, provider selection, and error conditions.
- [Types](https://arlopass.com/docs/reference/react/types): TypeScript types exported from @arlopass/react and re-exported from @arlopass/web-sdk.
- [Testing utilities](https://arlopass.com/docs/reference/react/testing): Helpers for unit and integration testing with mock transports, providers, and wait utilities.

## Tutorials
- [Build your first chat app](https://arlopass.com/docs/tutorials/first-chat-app): Build a complete AI chat interface with streaming responses using the Arlopass SDK.
- [Streaming responses](https://arlopass.com/docs/tutorials/streaming-responses): Add real-time streaming tokens, typing indicators, and stop functionality to your AI chat.
- [Provider selection UI](https://arlopass.com/docs/tutorials/provider-selection): Build provider and model dropdown selectors using the useProviders hook.
- [Adding tool calling](https://arlopass.com/docs/tutorials/adding-tool-calling): Configure AI tools with auto-execution, manual mode, and streaming lifecycle events.

## Web SDK Reference
- [ArlopassClient](https://arlopass.com/docs/reference/web-sdk/client): Core client class — manages connection state, provider selection, and chat operations over the protocol transport.
- [ConversationManager](https://arlopass.com/docs/reference/web-sdk/conversation-manager): High-level conversation controller — context-window management, summarization, tool calling, and message pinning.
- [Types](https://arlopass.com/docs/reference/web-sdk/types): All TypeScript types exported from @arlopass/web-sdk.
- [Error codes](https://arlopass.com/docs/reference/web-sdk/error-codes): Structured error hierarchy, machine codes, reason codes, and retryable classification.