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)

• Your MCP endpoint URL (displayed after sign-in)

• The OBTO Skill file (SKILL.md) from GitHub

---

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

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