このMCPでできること
Provides React Native and Expo UI components, runtime guidance, and recipes for emitting, installing, updating, and verifying mobile app screens and projects.
機能
ツール
16
ツール
add_screen
Add a screen to an exported app
PAID. Adds one new screen to an app that was already exported: the screen file, the route that mounts it, the exact line to register it, and how to navigate to it. Reads the .opointo/files.json manifest to work out the route tree and never reads or rewrites existing source, so the one edit to an existing file comes back as a line to add rather than a file to overwrite.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['compositionId', 'manifest'], 'properties': {'tab': {'type': 'string', 'description': "nest it in this tab's stack so the tab bar stays visible. Omit to put it at the root, where it covers the tab bar (right for a modal)."}, 'manifest': {'type': 'object', 'description': 'the parsed .opointo/files.json from the project root'}, 'componentName': {'type': 'string', 'description': 'React component name, e.g. "InvoiceDetail". Defaults to GeneratedScreen.'}, 'compositionId': {'type': 'string', 'description': 'share code for the new screen, from the App Builder'}}}
check_snippet
Check a snippet for blank-render bugs
Takes TSX that uses these components and returns the glass-safety problems in it: animated opacity, the flex:1 collapse, the clipped lens, the conditional mount. Read-only, it never touches the repo. A heuristic text scan, not a structural guarantee.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['code'], 'properties': {'code': {'type': 'string', 'description': 'the TSX snippet to check'}}}
emit_app
Emit an app
PAID. Turns an opointo canvas into a working Expo app: navigation, providers, tab bar, screens and the components they need. Returns a recipe to apply to the current project: the exact files with target paths, the dependency install line, and ordered steps. Files marked `skeleton` or `component` are hand-written and device-verified, and verify_app reports any that were changed. Needs the share code from the App Builder's "Send app to agent" button.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['appId'], 'properties': {'appId': {'type': 'string', 'description': 'the share code, e.g. "34ca4babb2"'}, 'override': {'type': 'boolean', 'description': 'emit even when screens are flagged as not ready. Ask the customer first; the flags exist for a reason.'}}}
emit_screen
Emit a single screen
PAID. Turns one composed screen into a TSX file for an app that already exists, with its own navigator and routes. Returns the complete file inline, the components to install first, and how to mount it. For a whole app with navigation and a tab bar, emit_app is the matching tool. Needs the share code from the App Builder.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['compositionId'], 'properties': {'componentName': {'type': 'string', 'description': 'React component name for the file, e.g. "CheckoutScreen". Defaults to GeneratedScreen.'}, 'compositionId': {'type': 'string', 'description': 'the share code, e.g. "34ca4babb2"'}}}
find_component
Find a component for a UI need
Takes a UI need in plain language and returns ranked components, including an explicit answer when this catalog deliberately does not ship something and the OS's own control is the right choice. Useful before building a UI control by hand.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['need'], 'properties': {'need': {'type': 'string', 'description': 'e.g. "a progress bar for an upload"'}}}
get_component
Get a component
Everything needed to write a correct call site for one component: props with types, defaults and value domains, platform applicability, dependencies, and the runtime rules that apply to it. The rules matter as much as the props: correct props that break a rule still render a blank screen.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'description': 'e.g. "button"'}}}
get_provider_tree
Get the provider tree
The exact app-root provider nesting these components require, in the order that works. Getting it wrong fails at runtime, not at compile time. Pass the components in use to see which providers each one needs.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'properties': {'components': {'type': 'array', 'items': {'type': 'string'}, 'description': 'optional slugs in use'}}}
get_rules
Get runtime rules
The runtime rules for this catalog: the mistakes that make a component render blank or wrong with no warning, no error and no red box (on iOS, mostly native Liquid Glass). Pass a slug to scope them to one component, and a platform to get only the rules that hold there. Relevant before writing animation or layout code around one of these components.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'properties': {'slug': {'type': 'string', 'description': 'optional — omit for catalog-wide rules'}, 'platform': {'enum': ['ios', 'android'], 'type': 'string', 'description': 'optional — omit for the rules on both platforms'}}}
get_step
Expand a recipe step
PAID, and not counted against the daily allowance. Expands one step of an emit_app recipe: the full instruction, why it matters, how to know it worked, and what to do when it did not. emit_app returns steps in short form to stay inside the response budget, so this carries the detail for any step that needs it. Step "write" also lists every file (path, origin, bytes), and "review" returns the screen list; both come a page at a time when long. Needs the same share code and the step's id.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['appId', 'stepId'], 'properties': {'page': {'type': 'number', 'description': 'which page of the file list (write) or the screen list (review); omit for the first. Each page names the next.'}, 'appId': {'type': 'string', 'description': 'the share code you passed to emit_app'}, 'stepId': {'type': 'string', 'description': 'the step id, e.g. "configure" or "write", or "review" for the screen list'}}}
get_theme_tokens
Get theme tokens
The theme system: which hooks to call, and the spacing, radius and typography scales. Token names rather than hex values are what let a retheme propagate.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'properties': {}}
install_component
Install a component
PAID. Adds one component to an existing project. Returns the transitive registry closure in dependency-first install order, the single `expo install` line for the whole closure, every file with its exact target path, the provider nesting it needs, and its runtime rules. It replaces fetching /r/*.json by hand: a component is a closure, not a file, and the ways to get that wrong all fail silently. Foundation components need no licence key.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'description': 'the component slug, e.g. "button" or "bottom-sheet"'}}}
list_components
List components
Lists the shipped @opointo/ui components: slug, purpose, category, and which render the real iOS system control versus our own component. Cheap, and a good first call. Optional filters: category and tech.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'properties': {'tech': {'enum': ['system', 'glass', 'blur'], 'type': 'string'}, 'category': {'enum': ['controls', 'chrome', 'surfaces'], 'type': 'string'}}}
propose_app
Propose an app design
FREE. Your agent can design an app with you: send an app in opointo's design format (the AppSpec emit_app builds from) and get back a link that opens it in the App Builder as a new, unsaved design. The person sees every screen and the navigation, changes what they like, and hands it back for emit_app. Each problem comes back with its path and a fix. dryRun checks without making a link. The format and every block are in the opointo Skill: https://opointo.com/skills/opointo/SKILL.md
入力スキーマ
{'type': 'object', 'required': ['app'], 'properties': {'app': {'type': 'object', 'description': 'The design: { name, tabs: [{ screenId, label }], screens: [{ id, name, composition: { screen: { content: { children: [node] }, chrome: { header?, headerItems?, floating: [] }, overlays: [] } } }], onboardingScreenIds: [], pushed: [{ screenId, fromScreenId, presentation }], theme? }. A node is { id, slug, props }: slug is a component from list_components or "wireframe:<block>" such as "wireframe:list-row" (a list whose rows open one screen is one row with repeats: "true"), and a content node opens a screen with navigate: { to, presentation }. A top bar is header: { id, slug: "header", props: {} }, titled by the screen\'s name. entryScreenId is only for a splash screen before the tabs. Tab icons, titles and composition metadata are set by the builder.'}, 'dryRun': {'type': 'boolean', 'description': 'check the design and report, without making a link'}}}
propose_screen
Propose a screen design
FREE. Your agent can design a single screen with you: send one screen in opointo's design format (the Composition emit_screen builds from) and get back a link that opens it in the App Builder as a new, unsaved design the person can change. Each problem comes back with its path and a fix. dryRun checks without making a link. For a whole app with navigation, propose_app is the matching tool.
入力スキーマ
{'type': 'object', 'required': ['composition'], 'properties': {'dryRun': {'type': 'boolean', 'description': 'check the screen and report, without making a link'}, 'composition': {'type': 'object', 'description': 'One screen: { name, screen: { content: { children: [node] }, chrome: { header?, headerItems?, floating: [] }, overlays: [] } }. A node is { id, slug, props }: slug is a component from list_components or "wireframe:<block>".'}}}
update_components
Update exported components
PAID. Reports what has changed in the opointo-supplied files since export and returns only what moved. Reads the .opointo/files.json the export wrote into the project, so no share code is needed and it works months later. Never touches the customer's own screens, and flags the rare change that needs a code edit rather than a re-copy. This is how the components and app shell we supplied stay current as iOS and Android move.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['manifest'], 'properties': {'current': {'type': 'array', 'items': {'type': 'object', 'required': ['path'], 'properties': {'sha': {'type': 'string'}, 'path': {'type': 'string'}, 'missing': {'type': 'boolean'}}}, 'description': 'only when a `split-unverified` blocker asks for it: the hash of each named file on disk, from the command the blocker gives'}, 'manifest': {'type': 'object', 'description': 'the parsed contents of .opointo/files.json from the project root (the whole object, or just its `files` array)'}, 'acceptSplit': {'type': 'array', 'items': {'type': 'string'}, 'description': 'only after the customer agreed to replace a file they edited: the paths named by `split-customer-edited` blockers'}}}
verify_app
Verify an emitted app
PAID. Checks that an emitted app was applied correctly, before it is built. Takes what was written (file paths with byte sizes, package.json dependencies, project config, build toolchain) and returns what is missing, which copy-verbatim files were altered, which packages are absent, whether the config merge expo-router needs was done, and whether the installed Xcode can build this project at all. Catches the ways a long recipe goes wrong, each of which fails silently or points somewhere else.
読み取り専用
冪等
入力スキーマ
{'type': 'object', 'required': ['appId', 'files'], 'properties': {'appId': {'type': 'string', 'description': 'the share code you passed to emit_app'}, 'files': {'type': 'array', 'items': {'type': 'object', 'required': ['path'], 'properties': {'sha': {'type': 'string', 'description': 'optional; when present it is authoritative and the byte check is skipped for that file'}, 'path': {'type': 'string'}, 'bytes': {'type': 'number', 'description': 'size in bytes on disk, as `wc -c` reports'}}}, 'description': "what you actually wrote: { path, bytes } per file, path relative to the project root. `bytes` must be the file's size in BYTES on disk (what `wc -c` reports), not its character count — the two differ for any file containing a non-ASCII character."}, 'config': {'type': 'object', 'properties': {'main': {'type': 'string', 'description': 'package.json "main"'}, 'scheme': {'type': 'string', 'description': 'app.json scheme'}, 'plugins': {'type': 'array', 'items': {'type': 'string'}, 'description': 'app.json plugins'}, 'moduleSuffixes': {'type': 'array', 'items': {'type': 'string'}, 'description': 'tsconfig compilerOptions.moduleSuffixes'}, 'nativeModulesDir': {'type': 'string', 'description': 'package.json expo.autolinking.nativeModulesDir; omit if unset. Checked when the recipe ships a native module in src/modules. Unset, that module is never linked and the app crashes on Android at first render'}, 'userInterfaceStyle': {'type': 'string', 'description': 'app.json userInterfaceStyle'}}}, 'toolchain': {'type': 'object', 'properties': {'xcode': {'type': 'string', 'description': 'the version from `xcodebuild -version`, e.g. "26.2". iOS only; omit on a machine without Xcode'}, 'expoSdk': {'type': 'string', 'description': 'the INSTALLED `expo` package version, e.g. "56.0.15" (`npm ls expo`)'}, 'enableSceneSupport': {'type': 'boolean', 'description': 'app.json → expo-build-properties → ios.enableSceneSupport'}, 'expoBuildProperties': {'type': 'string', 'description': 'the INSTALLED `expo-build-properties` version, e.g. "57.0.21"; omit if it is not installed'}}}, 'dependencies': {'type': 'array', 'items': {'type': 'string'}, 'description': "the keys of package.json's dependencies"}}}
履歴
最近のツール変更
追加
propose_screen
2026年10月1日2:42
追加
propose_app
2026年10月1日2:42
変更
get_step
2026年10月1日2:42
変更
verify_app
2026年9月29日2:48
追加
install_component
2026年9月27日2:40
追加
emit_screen
2026年9月27日2:40
追加
get_step
2026年9月27日2:40
追加
verify_app
2026年9月27日2:40
追加
update_components
2026年9月27日2:40
追加
add_screen
2026年9月27日2:40
追加
emit_app
2026年9月27日2:40
追加
check_snippet
2026年9月27日2:40
追加
get_theme_tokens
2026年9月27日2:40
追加
get_provider_tree
2026年9月27日2:40
追加
get_rules
2026年9月27日2:40
追加
find_component
2026年9月27日2:40
追加
get_component
2026年9月27日2:40
追加
list_components
2026年9月27日2:40
関連MCP
類似のMCPサーバー
GripForge
io.github.gripforgeai/mcp
Generates, rigs, animates, analyzes, and packages game characters, weapons, armor, effects, environments, and engine-ready assets.
spriteship
com.spriteship/spriteship
Generates and manages 2D game characters, assets, animations, tilesets, UI packs, maps, and engine-ready exports for multiple gam…
Blixtworks
com.blixtworks.www/tools
Offers pay-per-call utilities for text, image processing and analysis, data conversion, validation, web inspection, cryptography,…
Compose Preview Catalogs
io.github.yschimke/compose-preview
Browses, renders, compares, audits, and edits Jetpack Compose preview catalogs and associated UI designs.
arch-tools-mcp
io.github.Deesmo/arch-tools-mcp
Provides general-purpose agent APIs for browser automation, web and PDF extraction, data conversion, email operations, fact check…
kernelcad
com.kernelcad/kernelcad
Authors, evaluates, reviews, simulates, edits, and exports parametric CAD assemblies and geometry from editable TypeScript-based …
floot
com.floot/floot
Creates, edits, previews, databases, and publishes full-stack web and mobile applications with hosted resources and deployment wo…
Raven
ai.ravenmcp/raven-mcp
Supports coding agents with design audits, design-system guidance, and a configurable visual preference profile.