What if your iPhone could talk to your own MCP servers anywhere? That is exactly what I built with MCP iOS app MCP Connect, a native mobile client for the Model Context Protocol. In this article, I explain how I designed, shipped, and deployed it, and why this approach matters if you want real AI tools on mobile.
Що таке MCP Connect?
MCP Connect — це мій MCP iOS app для підключення до MCP-серверів через HTTP, перегляду інструментів і чату з AI на ходу. Я створив його на Swift і SwiftUI, тож він відчувається нативним, швидким і стабільним на iPhone.
Додаток дозволяє:
Я хотів, щоб додаток відчувався преміальним, а не як обгортка. Тому я спроєктував його в стилі темного кіно, з glassmorphism, пружинними анімаціями та тактильним відгуком. Цей дизайнерський вибір важливий, бо мобільні AI-інструменти мають бути швидкими й зрозумілими, особливо коли користувачі перемикаються між чатами та серверами.
Чому я створив MCP iOS app
Я створив цей MCP iOS app, бо хотів мати прямий доступ до власних інструментів зі свого телефону. Робочі процеси лише для десктопа сповільнюють вас, коли ви не за робочим столом. На iPhone я хотів мати такий самий контроль, який уже є в браузері та на моєму Mac.
У моєму досвіді створення продуктів у Гетеборзі найкращі мобільні застосунки добре розв’язують болісну, вузьку проблему. MCP Connect робить це для мене. Він дає мені безпечний доступ до моїх MCP-серверів і робить це без додавання ще одного складного шару.
Це також узгоджується з напрямком самого Model Context Protocol. Специфікація MCP від Anthropic побудована навколо чистої клієнт-серверної моделі, що робить її сильним кандидатом для мобільних застосунків, яким потрібен структурований доступ до інструментів. Я зберіг реалізацію в межах цієї ідеї, щоб додаток залишався підтримуваним у міру еволюції протоколу.
Проблема користувача, яку я вирішив
Більшість AI-інструментів досі припускають, що ви сидите за десктопом. Це ламається, коли вам потрібно перевірити сервер, запустити інструмент або переглянути результат, поки ви в дорозі. З MCP Connect я зменшив це тертя.
Результат простий: я можу відкрити додаток, вибрати сервер і взаємодіяти зі своїми інструментами за лічені секунди. Саме в цьому полягає вся ідея MCP iOS app.
Технологічний стек за MCP iOS app
Я тримав стек зосередженим і сучасним. Я не хотів роздутої архітектури або непотрібних залежностей.
| Layer | Technology |
|---|---|
| --- | --- |
| Platform | iOS 17+, Swift 6, SwiftUI |
| Architecture | MVVM + Coordinators |
| Backend | Supabase (Auth, PostgreSQL, Realtime) |
| MCP Transport | JSON-RPC over HTTP |
| Persistence | SwiftData |
| IAP | StoreKit 2 |
| i18n | String Catalogs (EN + SV) |
| Deployment | Xcode + XcodeGen |
Цей стек дав мені сильну основу для MCP iOS app. SwiftUI добре впорався з інтерфейсом, SwiftData підтримував offline-first зберігання, а Supabase надавав автентифікацію та синхронізацію без зайвого бекенд-оверголову.
Я також використовував знайомі production-інструменти: Keychain для секретів і StoreKit 2 для підписок. Це допомогло тримати додаток сфокусованим на якості продукту, а не на шумі інфраструктури.
Крок 1: я спочатку спроєктував систему
Я завжди починаю з дизайн-системи, бо це економить час пізніше. У цьому проєкті я створив токени та спільні компоненти ще до того, як написав код фіч.
Палітра Dark Cinema використовує глибокі чорні, ледь підняті поверхні та акцент індиго. Кожна поверхня має обробку glassmorphism з `.ultraThinMaterial` і тонкою рамкою, тож UI відчувається багатошаровим, але не важким.
Система включає:
Я створив повторно використовувані компоненти на кшталт `GlassCard`, `AccentButton`, `StatusBadge`, `ShimmerLoader` і `GlassTextField`. Це зробило MCP iOS app простішим для масштабування, бо нові екрани успадковували ту саму візуальну мову.
Крок 2: я відокремив моделі від persistence
Я розділив доменні моделі та моделі SwiftData persistence. Це зберегло бізнес-логіку чистою та тестованою.
Основні моделі:
Це розділення було важливішим, ніж звучить. Воно дало мені простір змінювати деталі зберігання без переписування логіки додатка. Для MCP iOS app така межа робить майбутні фічі простішими для релізу.
Рішення щодо безпеки: Keychain лише для API keys
Я прийняв одне правило, яке не збирався порушувати: API keys ніколи не торкаються Supabase. Я зберігаю лише `apiKeyRef` у базі даних, тоді як фактичний ключ живе в iOS Keychain.
Це означає, що витік бази даних не розкриває креденшали. Компроміс у тому, що ключі не синхронізуються автоматично між пристроями. Користувачі мають вводити їх повторно на новому телефоні, але це займає секунди й прибирає серйозний ризик безпеки.
Крок 3: я зібрав MCP client
Клієнт використовує JSON-RPC over HTTP, що відповідає Streamable HTTP transport у специфікації MCP. Кожен запит відправляється як стандартний HTTP POST із тілом JSON-RPC.
Додаток підтримує чотири ключові операції:
Я завантажую токени авторизації з Keychain під час виконання запиту. Це зберігає MCP iOS app безпечним і уникає зберігання секретів у пам’яті довше, ніж потрібно.
Я протестував це на власних серверах, доки потік запитів не відчувся стабільним у реальному використанні. Результат — передбачувана затримка та значно кращий мобільний досвід, ніж я очікував на старті.
Крок 4: я підключив Supabase
Я використав Supabase для auth і sync, бо він дає мені швидкий шлях до production. Бекенд має чотири таблиці:
Кожна таблиця має Row Level Security. Це означає, що користувачі можуть отримувати доступ лише до власних записів. Я також додав database trigger, який автоматично створює профіль після реєстрації.
Auth підтримує Sign in with Apple та email/password. Це дало мені чистий процес реєстрації без примусу користувачів до одного методу входу. Для MCP iOS app така гнучкість допомагає адаптації.
Крок 5: я створив основні фічі
У додатку є три ключові поверхні: чат, керування серверами та налаштування. Я тримав кожну з них сфокусованою, щоб досвід залишався швидким на телефоні.
Інтерфейс чату
Чат використовує state machine: `idle` → `sending` → `streaming` → `toolCalling` → `idle`. Виклики інструментів з’являються вбудовано як картки, що розгортаються, з назвою інструмента, аргументами, результатом і часом виконання.
Цей UI важливий, бо він допомагає користувачам довіряти тому, що робить AI. Вони бачать кожен крок замість того, щоб гадати.
Керування серверами
Користувачі можуть додавати, редагувати та видаляти сервери. Я додав валідацію URL, swipe-to-delete та діалоги підтвердження, щоб зміни серверів відчувалися безпечними й продуманими.
Кожен екран деталей сервера показує дані про стан, графіки затримки з Swift Charts і Tool Explorer, який переліковує доступні інструменти та схеми параметрів. Це зробило MCP iOS app кориснішим, ніж просто чат-фронтенд.
Навігація та налаштування
Я використав трьохвкладковий макет з `NavigationStack` і маршрутизацією з типобезпекою. Deep linking працює через схему URL `mcpconnect://`.
Налаштування включають:
Крок 6: я розгорнув endpoint MCP server
Найскладніше було зробити stdio-based MCP server доступним з мобільного. Мій персональний site MCP server спочатку працював як локальний Node.js процес з `StdioServerTransport`.
Щоб зробити його доступним для MCP iOS app, я додав API route на мій Next.js сайт на Vercel. Роут використовує MCP SDK `InMemoryTransport`, щоб з’єднати JSON-RPC запити з локальною реалізацією сервера.
Кожен запит створює свіжу пару server/client через `createLinkedPair()`, виконує операцію та повертає відповідь. Такий підхід добре підходить для serverless інфраструктури, бо він уникає довгоживучих підключень.
Endpoint живе за адресою `https://uygarduzgun.com/api/mcp` і надає 15 інструментів, які я можу викликати з будь-якого MCP клієнта. Ця конфігурація перетворила локальний tool server на сервіс, готовий для мобільного, без переробки всього бекенду.
Чому ця архітектура працює
На практиці це працює, бо кожен запит є безстанним і ізольованим. Це зменшує операційні ризики та значно полегшує масштабування. Якщо ви будуєте MCP iOS app, цей патерн варто розглянути для serverless deployment.
Крок 7: IAP і монетизація
Я використав StoreKit 2 для простої моделі free/pro. Безкоштовний рівень придатний для використання, але Pro прибирає ліміти, з якими power users стикаються найшвидше.
| Feature | Free | Pro ($4.99/mo) |
|---|---|---|
| --- | ---: | ---: |
| Servers | 2 | Unlimited |
| Conversations | 50 | Unlimited |
| History | 30 days | Unlimited |
| Themes | Dark + Light | + custom accent |
| Search | Current chat | Full-text all |
Мені подобається ця модель, бо вона не карає casual користувачів. Вона дає достатньо цінності одразу, а потім природно розширюється, коли додаток стає частиною реального робочого процесу.
Статистика проєкту та результати
Збірка вийшла більшою, ніж я очікував, але структура залишилася чистою.
Ці цифри важливі, бо показують, що додаток — production-grade, а не прототип. Я хотів справжній MCP iOS app, і я його випустив.
Зображення, які я б додав для цієї статті
Якщо я опублікую цей пост, я б додав скріншоти з описовим alt text, щоб допомогти читачам і покращити SEO.
Основні висновки
MCP Connect показує, що ідея MCP iOS app практична, безпечна та готова до реального використання. Якщо ви створюєте мобільні AI-інструменти, ця архітектура може заощадити вам час і зменшити ризики. Прочитайте пов’язаний пост про audio signal levels explained або залиште коментар, якщо хочете, щоб я розібрав код сервера далі.