# Dev Zone

### Your Development Workspace

The **Dev Zone** is your application management interface on the OBTO platform. It's where you see all your applications, inspect their components, and manage the artifacts that make up each app.

***

### Accessing the Dev Zone

After signing in at [obto.co](https://www.obto.co), navigate to your Dev Zone from the main dashboard. The Dev Zone is scoped to your **domain** (environment) — you'll only see applications that belong to your account.

***

### What You'll Find

#### Application List

A list of all applications in your environment. Each application shows:

* **App Name** — The unique identifier used in all MCP tool calls
* **Description** — What the app does
* **Title** — The display name
* **Version** — Current version number
* **Last Updated** — When the app was last modified

#### Application Detail View

Click into any application to see its full component breakdown:

| Component Type         | Collection           | What It Contains                           |
| ---------------------- | -------------------- | ------------------------------------------ |
| **Pages**              | `pltf_page`          | HTML entry points for your public website  |
| **JavaScript Modules** | `pltf_javascript`    | React components and frontend logic        |
| **Stylesheets**        | `pltf_stylesheet`    | CSS files for styling                      |
| **Server Scripts**     | `pltf_script_server` | Node.js backend classes and business logic |
| **Routes**             | `pltf_route`         | Express.js API endpoints                   |
| **Client Scripts**     | `pltf_script_client` | Native OBTO app shell components           |
| **UI Templates**       | `pltf_ui_template`   | Reusable UI template records               |
| **Client Policies**    | `pltf_client_policy` | Client-side policy configurations          |

#### App Graph (Mind Map)

Each application has an **App Graph** — a visual knowledge graph showing how all components relate to each other. The AI uses this (via `obto_fetch_app_graph`) to understand your app's architecture before making changes.

The graph shows:

* Which routes call which server scripts (via `xe.`)
* Which pages load which JavaScript modules
* Which stylesheets are linked to which pages
* Dependency chains between server scripts

***

### Working with the Dev Zone + AI

The Dev Zone and AI tools complement each other:

| When you want to...                 | Use                                                 |
| ----------------------------------- | --------------------------------------------------- |
| See all your apps at a glance       | Dev Zone                                            |
| Create a new application            | AI → `obto_create_app`                              |
| Inspect a specific component's code | Dev Zone (visual) or AI → `obto_fetch_*` tools      |
| Deploy new code                     | AI → `obto_upsert_record` / `obto_create_route`     |
| Search for code across an app       | AI → `obto_semantic_search`                         |
| Understand app architecture         | Dev Zone (App Graph) or AI → `obto_fetch_app_graph` |

The Dev Zone gives you visibility. The AI gives you velocity. Use both.

***

### Environment Scoping

Your Dev Zone is scoped to your **domain**. The domain is your environment context — think of it as your isolated workspace. All applications, artifacts, and data within your domain are separate from other users' domains.

When AI tools execute, they automatically inherit your domain from the MCP connection. You don't need to specify it manually.

***

### Next Steps

* **App Preview** — Preview your apps before publishing
* **Publish App** — Go live with a public URL