# Claude

### Using OBTO with Claude

Claude (by Anthropic) has native MCP support in both the web interface and the desktop app. This makes it the most seamless way to build on OBTO — connect your MCP server, load the skill file, and start building.

***

### Prerequisites

* An OBTO account ([sign up at obto.co](https://www.obto.co))
* Your MCP endpoint URL (displayed after sign-in)
* The OBTO Skill file (`SKILL.md`) from [GitHub](https://github.com/obto-inc/platform)

***

### Setup: Claude Desktop

#### Step 1 — Connect the MCP Server

1. Open **Claude Desktop**
2. Go to **Settings** → **MCP Servers**
3. Click **Add Server**
4. Paste your OBTO MCP endpoint URL:

   ```
   https://{your-domain}.obto.co/mcp
   ```
5. Claude will redirect you to authenticate via **Google OAuth**
6. Click **Approve**
7. You'll see OBTO's tools listed under your available MCP tools (green indicator)

#### Step 2 — Load the Skill File

1. Open a **Project** in Claude Desktop
2. In the project's **Knowledge** section, upload `SKILL.md`
3. Alternatively, attach `SKILL.md` as a file in your first message

#### Step 3 — Build

Start a new conversation within the project. Claude now has access to OBTO's tools and knows how to use them:

```
Build me a portfolio website with a hero section, about page, 
project gallery, and contact form that saves submissions.
```

Claude will:

1. Create the application using `obto_create_app`
2. Deploy backend logic (server scripts)
3. Create API routes
4. Build the React frontend
5. Deploy the HTML entry page
6. Generate a preview URL for you to check

***

### Setup: Claude Web

#### Step 1 — Create a Project

1. Open [claude.ai](https://claude.ai)
2. Create a new **Project**
3. In the project settings, go to **Integrations**

#### Step 2 — Add MCP Server

1. Add your OBTO MCP endpoint URL under Integrations
2. Authorize when prompted via OAuth
3. OBTO tools will appear in the project's tool list

#### Step 3 — Upload the Skill File

1. In the project, upload `SKILL.md` as a **file attachment** in the conversation

#### Step 4 — Build

Start describing what you want. Claude will use the MCP tools to deploy your app.

***

### Tips for Building with Claude

#### Be Specific About What You Want

```
❌ "Make me a website"
✅ "Build a restaurant landing page with a hero image, menu section 
    with categories (appetizers, mains, desserts), a reservation 
    form, and a dark theme"
```

#### Let Claude Handle the Architecture

Claude reads the OBTO Skill file and understands the platform's deployment order, collection types, and conventions. You don't need to specify technical details like "use pltf\_page" — just describe the end result.

#### Iterate Through Conversation

After the initial build, keep iterating:

* "Add a footer with social media links"
* "Change the color scheme to match my brand (#2D3436, #6C5CE7)"
* "The contact form needs to validate email addresses"

#### Request Previews

At any point, ask Claude to generate a preview:

```
"Show me a preview of the app"
```

***

### Troubleshooting

| Issue                           | Solution                                                                                         |
| ------------------------------- | ------------------------------------------------------------------------------------------------ |
| "MCP tools not showing"         | Go to Settings → MCP Servers and verify the connection is active (green)                         |
| "OAuth failed"                  | Ensure you're using the correct MCP URL from your OBTO landing page                              |
| "Claude isn't using OBTO tools" | Make sure the `SKILL.md` file is loaded in the project or attached to the conversation           |
| "App loads blank"               | Ask Claude to check the deployment order — the page may have been deployed before the JavaScript |

***

### Next Steps

* **Codex** — Using OBTO with OpenAI Codex
* **MCP** — Learn more about the MCP protocol