docs(realtimekit): added getting starteddocs

Author: ravindra-cloudflare

src/assets/images/realtime/realtimekit/permission-token-section.png

@@ -7,6 +7,14 @@ sidebar:
 
 This page explains the core concepts and terminology used in RealtimeKit.
 
+### Apps
+
+An **App** serves as a container for your RealtimeKit application, logically organizing related meetings and participants.
+
+For example, if you are building an interview platform, you might create two apps: `<company_name> - interviews - staging` and `<company_name> - interviews - production`. If you later decide to build an assessment platform, you could similarly create `<company_name> - assessments - staging` and `<company_name> - assessments - production`.
+
+This structure helps you manage meetings and participants in a clear, organized manner.
+
 ### Meeting
 
 A **Meeting** is the fundamental communication channel in RealtimeKit. You can think of it like an event on your calendar - it's a persistent, long-lived container or "room" that serves as a blueprint for its [sessions](/realtime/realtimekit/concepts/#session). Every session created for this meeting inherits the same base configuration, such as the title of the meeting and whether to automatically record the session when it starts. You add participants to the meeting, which grants them access to join a session of that meeting.

src/content/docs/realtime/realtimekit/concepts.mdx

@@ -2,6 +2,197 @@
 pcx_content_type: navigation
 title: Getting Started
 sidebar:
-  order: 3
-  hidden: true
----
+  order: 4
+---
+import { Tabs, TabItem, Steps, Render } from '~/components';
+
+:::note[Before you get started with RealtimeKit:]
+
+If you don't have a Cloudflare Account, [please create one](/fundamentals/account/create-account/).
+
+:::
+
+### Understanding the RealtimeKit SDK Model
+
+Before we get started with RealtimeKit, let's understand the SDK model.
+
+In RealtimeKit, the concepts of [**meeting**](/realtime/realtimekit/concepts#meeting) and [**participant**](/realtime/realtimekit/concepts#participant) serve as blueprints—these are database entries that define the structure and roles for real-time interactions. A meeting blueprint outlines the configuration for a collaborative space (such as a classroom, telehealth appointment, or webinar), while a participant blueprint defines the roles and permissions available within that space.
+
+When it comes to real-time usage, these blueprints are instantiated as sessions and peers:
+- A [**session**](/realtime/realtimekit/concepts#session) is a live instance of a meeting, representing an active, real-time interaction.
+- A [**peer**](/realtime/realtimekit/concepts#peer) is a live instance of a participant—an actual user (such as a teacher, student, doctor, or patient) joining the session.
+
+> **Note:** In some contexts, the terms **session** and **meeting**, as well as **peer** and **participant**, are used interchangeably. This is because most people are more familiar with the terms "meeting" and "participant." However, in RealtimeKit, using "session" and "peer" helps differentiate between live instances (sessions and peers) and their blueprints (meetings and participants), making it easier to track and manage them individually in the RealtimeKit dashboard.
+
+The SDK is always initialized from the perspective of a peer joining a session. Each peer’s capabilities and permissions are determined by the participant blueprint and the assigned preset (role configuration) you defined during setup.
+
+This design means:
+- Every SDK instance represents a single peer (runtime participant) in a specific session (runtime meeting).
+- The peer’s role (e.g., teacher, student, doctor, patient) is established when generating their authentication token, based on the participant blueprint and preset.
+- The SDK enforces permissions and features according to the preset, without distinguishing between participant types at the API level.
+- This approach allows you to create sessions where diverse roles (like instructors and students, or doctors and patients) can interact with tailored capabilities, all based on their blueprint definitions.
+
+In summary, think of meetings and participants as templates or blueprints, and sessions and peers as their real-time, live counterparts. Each client (browser, device, or app) initializes the SDK as a peer, using an auth token that encodes their permissions and role for that session.
+
+To put this model into practice, you’ll follow these steps:
+
+1. **Create an API token** with Realtime permissions.
+2. **Create an RealtimeKit App** to logically organize and manage your meetings.
+3. **Create a Meeting** within the app, which acts as a blueprint for a real-time session.
+4. **Add a Participant** and generate an authentication token for the peer who will join the session.
+5. **Initialize the SDK** using the participant’s auth token.
+6. **Join the session as a peer**—enabling real-time interaction with others in the meeting.
+
+### Create Cloudflare API access Token with Realtime Permissions
+
+To integrate RealtimeKit in your application, you must have a Cloudflare API token with **Realtime** access permissions. To create an API token:
+
+1. Follow the [Create API token guide](/fundamentals/api/get-started/create-token/) to create a new token via the Cloudflare dashboard
+2. When configuring permissions, ensure you include **Realtime** access
+3. Configure any additional [access policies and restrictions](/fundamentals/api/reference/permissions/) as needed for your use case
+
+Alternatively, you can [create tokens programmatically via the API](/fundamentals/api/how-to/create-via-api/) if you prefer automation.
+
+Make sure to select the Realtime product with Admin access.
+
+![Realtime permission token section](~/assets/images/realtime/realtimekit/permission-token-section.png).
+
+If done right, following CURL should give you the list of you existing apps with 200 status code. If you have no apps, it will return an empty array with 200 status code.
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/apps' \
+--header 'Authorization: Bearer <api_token>'
+```
+
+If the above API doesn't give you 200 status code, it means you don't have the right permissions or the API token is not valid.
+
+You can also view and manage your apps directly in the [Cloudflare RealtimeKit dashboard](https://dash.cloudflare.com/?to=/:account/realtime/realtimekit/kit).
+
+### Create RealtimeKit App
+
+Once you have your API token ready, the next step is to create a RealtimeKit app.
+You can use our [API reference](/api/resources/realtimekit) for details on creating an app, or use the following sample cURL command:
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/apps' \
+--header 'Content-Type: application/json' \
+--header 'Authorization: Bearer <api_token>' \
+--data '{
+    "name": "My First RealtimeKit App"
+}'
+```
+
+For more about apps and their role, see the [RealtimeKit Concepts guide](/realtime/realtimekit/concepts).
+
+#### Sandbox vs Production App
+
+It’s best practice to create separate apps for your production and staging environments. This helps you test changes safely without impacting your live environment.
+
+For example, you might name your staging app as `<company_name> - <product_name> - staging` and your production app as `<company_name> - <product_name> - production`.
+You are free to choose any app name that fits your workflow.
+
+### Create Meeting
+
+After creating an app, you can create a new meeting.
+Refer to the [API reference](/api/resources/realtimekit) for endpoint details.
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/<app_id>/meetings' \
+--header 'Content-Type: application/json' \
+--header 'Authorization: Bearer <api_token>' \
+--data '{
+    "title": "My First RealtimeKit Meeting",
+}'
+```
+
+To verify your meeting, you can list all meetings for your app:
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/<app_id>/meetings' \
+--header 'Authorization: Bearer <api_token>'
+```
+
+Be sure to keep the ID of your newly created meeting for the next steps.
+
+### Create a Preset for a Participant
+
+Before adding participants, you need to decide what permissions they should have.
+Presets define these permissions, and RealtimeKit provides some default presets to get you started.
+Learn more about presets in the [Concepts guide](/realtime/realtimekit/concepts#presets).
+
+To see existing presets, use:
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/<app_id>/presets' \
+--header 'Authorization: Bearer <api_token>'
+```
+
+You can create new presets using the [API reference](/api/resources/realtimekit) or via the [RealtimeKit dashboard](https://dash.cloudflare.com/?to=/:account/realtime/realtimekit/kit).
+
+Keep the preset name handy for the next step.
+
+:::note
+**Presets can be reused across multiple meetings.**
+
+This means you can define a role (such as "teacher" or "viewer") once and assign it to participants in any number of meetings, ensuring consistent permissions and experience. For example, the same `teacher` preset can be used for all classrooms, so you don’t have to redefine permissions every time you create a new meeting. This streamlines setup and helps maintain standardized roles across your organization.
+:::
+
+### Add Participant
+
+With your meeting and preset ready, you can now add a participant.
+Replace all placeholder values in the following cURL command with your actual data.
+
+```bash
+curl --location 'https://api.cloudflare.com/client/v4/accounts/<account_id>/realtime/realtimekit/kit/<app_id>/meetings/<meeting_id>/participants' \
+--header 'Content-Type: application/json' \
+--header 'Authorization: Bearer <api_token>' \
+--data '{
+  "name": "Mary Sue",
+  "preset_name": "<preset_name>",
+  "custom_participant_id": "<any_uuid_to_identify_participant>"
+}'
+```
+
+**Field explanations:**
+- `name`: The display name of the peer. This can be any string and will be shown to other peers in the live session of a meeting.
+- `preset_name`: The name of the preset you created or selected earlier. This determines the permissions and capabilities assigned to the participant.
+- `custom_participant_id`: A unique identifier for the participant within this meeting. If you call the Add Participant API again with the same `custom_participant_id` for the same meeting, RealtimeKit will not create a duplicate participant but will instead return the existing participant's token. This can be any unique string, such as a UUID. **Do not use email addresses or personally identifiable information (PII)** here to proactively avoid sharing sensitive details. This UUID will be available in SDK for you to use later on.
+
+The response will include an auth token, which is required for the participant to join the meeting.
+See the [API reference](/api/resources/realtimekit) for more details on participant management.
+
+### Try the RealtimeKit Sample UI with Participant Auth Token
+
+Now that you have the auth token, you can try out the default UI samples for different platforms. Choose your platform below:
+
+<Tabs>
+<TabItem label="React">
+
+**Run the default-meeting-ui sample ([GitHub repo](https://github.com/dyte-io/react-samples/tree/main/default-meeting-ui))**
+
+1. Clone the sample:
+   ```bash
+   git clone https://github.com/dyte-io/react-samples.git
+   cd react-samples/default-meeting-ui
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm start
+   ```
+4. Open the app in your browser. To join the session, **append your auth token to the preview URL**:
+   ```
+   http://localhost:3000/?authToken=<participant_auth_token>
+   ```
+   Replace `<participant_auth_token>` with the token you received from the Add Participant API.
+</TabItem>
+</Tabs>
+
+:::note
+If there isn’t an active session for your meeting, initializing the SDK with a valid auth token will automatically create a new session for you.
+:::
+
+Feel free to explore additional sample applications and use cases on our [GitHub](https://github.com/dyte-io). These resources can help you further experiment and accelerate your integration with RealtimeKit.