> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatmode.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Platform Overview

> Understand the core components of the Chatmode platform.

export const ThemedDisplayImage = ({lightSrc, darkSrc, className}) => {
  const sharedClassName = "border-gray-200/70 dark:border-white/[0.07] border rounded-md overflow-hidden";
  return <>
            <img src={lightSrc} className={"dark:hidden " + sharedClassName + " " + className} />
            <img src={darkSrc} className={"hidden dark:block " + sharedClassName + " " + className} />
        </>;
};

Chatmode is built around several core components that work together to deliver powerful AI chat capabilities.

## Core Components

Chatmode provides a comprehensive platform for creating, managing, and deploying AI agents. This overview will help you understand the main components of the platform and how they work together.

## Dashboard

The dashboard is your central hub for accessing all Chatmode features. Here you can get a quick overview, see recent conversations, and easily access your agents and environments.

<ThemedDisplayImage lightSrc="/images/en/light/dashboard.webp" darkSrc="/images/en/dark/dashboard.webp" />

## Main Components

### Agents

[Agents](/en/features/agents) are the AI assistants you create and configure. Each agent is powered by a specific AI model (like OpenAI's GPT-4) and customized with prompts, tools, and training data to perform specific tasks. Agents are the core of your Chatmode experience.

### Environments

[Environments](/en/features/environments) connect your agents to users. An environment determines where and how your agent interacts. The primary type is:

* **`EMBED`**: Allows embedding the agent's chat interface onto a website using an `<iframe>`.
* **`ZAPI`**: Used for specific integrations (e.g., potentially WhatsApp).

### Trainings

[Trainings](/en/features/trainings) enhance your agents with domain-specific knowledge. By uploading documents, websites, or text data, you can teach your agents about your products, services, policies, and other important information.

### Conversations

The [Conversations](/en/features/conversations) section allows you to view and manage interactions between your agents and users. You can:

* Review conversation history
* Change conversation status (Active, Resolved, Archived)
* Assign conversations to team members
* Set conversation priority

### API Keys

[API Keys](/en/features/api-keys) are used to securely store your credentials for external AI providers (like OpenAI). These stored keys are required for your agents to function.

### Organizations

[Organizations](/en/features/organizations) help you manage team access and permissions. You can invite team members, assign roles, and control who has access to different aspects of your Chatmode account.

## User Interface Navigation

The Chatmode interface is designed for intuitive navigation:

1. **Sidebar Navigation**: Access all main features from the left sidebar
2. **Top Bar**: View your account information, access settings, and switch between organizations
3. **Content Area**: The main workspace where you interact with the selected feature
4. **Action Buttons**: Feature-specific actions appear in the top-right of each section

## Platform Architecture

Chatmode uses a modern, scalable architecture:

* **Frontend**: Built with React and Next.js for a responsive user experience.
* **Backend**: Uses Node.js and tRPC for internal type-safe API communication.
* **Database**: Structured data storage for agents, conversations, and settings (using PostgreSQL).
* **AI Integration**: Direct connections to leading AI providers using the API Keys you provide.
* **Vector Storage**: Uses a vector database for efficient retrieval of information from your Trainings.
* **Storage**: Secure storage for related assets.

## Next Steps

Now that you understand the platform's structure, you're ready to:

* [Create your first agent](/en/getting-started/quickstart)
* [Explore detailed feature documentation](/en/features/agents)
* [Learn about embedding widgets](/en/embeds/overview) on your website