opointo

Design a React Native app in a browser and emit it as a real Expo project you own, iOS and Android.

Should I use this

Quality & Safety

A
Description quality
100%
Schema completeness
91%
Naming quality
99%
Poisoning risk
80%
Permission match
100%
Protocol compliance
100%

Findings (2)

  • HIGHTool description contains system tag or markerin get_theme_tokens
  • HIGHTool poisoning patterns detected

Based on automated analysis of tool definitions and protocol compliance.

Context Cost

~2,797Tokens (tool definitions)
~1.0 KBTypical response size
Significant attention impact (2.19% of 128k context)

This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.

Install

One-Click Install

Add this to your `claude_desktop_config.json` file:

{
  "mcpServers": {
    "opointo": {
      "url": "https://opointo.com/api/mcp"
    }
  }
}

Remote endpoints

https://opointo.com/api/mcpstreamable-http

What it can do

Tool inventory

Tools (14)

🟢 Read-only🟡 Write🔴 Delete⚪ Unknown
🟢list_components(category, tech)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "category": {
      "type": "string",
      "enum": [
        "controls",
        "chrome",
        "surfaces"
      ]
    },
    "tech": {
      "type": "string",
      "enum": [
        "system",
        "glass",
        "blur"
      ]
    }
  }
}
🟢get_component(slug)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "e.g. \"button\""
    }
  },
  "required": [
    "slug"
  ]
}
🟢find_component(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.

Input Schema

{
  "type": "object",
  "properties": {
    "need": {
      "type": "string",
      "description": "e.g. \"a progress bar for an upload\""
    }
  },
  "required": [
    "need"
  ]
}
🟢get_rules(slug, platform)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "optional — omit for catalog-wide rules"
    },
    "platform": {
      "type": "string",
      "enum": [
        "ios",
        "android"
      ],
      "description": "optional — omit for the rules on both platforms"
    }
  }
}
🟢get_provider_tree(components)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "components": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "optional slugs in use"
    }
  }
}
🟢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.

Input Schema

{
  "type": "object",
  "properties": {}
}
🟢check_snippet(code)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "code": {
      "type": "string",
      "description": "the TSX snippet to check"
    }
  },
  "required": [
    "code"
  ]
}
🟢emit_app(appId, override)

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.

Input Schema

{
  "type": "object",
  "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."
    }
  },
  "required": [
    "appId"
  ]
}
🟢add_screen(compositionId, manifest, tab, componentName)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "compositionId": {
      "type": "string",
      "description": "share code for the new screen, from the App Builder"
    },
    "manifest": {
      "type": "object",
      "description": "the parsed .opointo/files.json from the project root"
    },
    "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)."
    },
    "componentName": {
      "type": "string",
      "description": "React component name, e.g. \"InvoiceDetail\". Defaults to GeneratedScreen."
    }
  },
  "required": [
    "compositionId",
    "manifest"
  ]
}
🟢update_components(manifest, current, acceptSplit)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "manifest": {
      "type": "object",
      "description": "the parsed contents of .opointo/files.json from the project root (the whole object, or just its `files` array)"
    },
    "current": {
      "type": "array",
      "description": "only when a `split-unverified` blocker asks for it: the hash of each named file on disk, from the command the blocker gives",
      "items": {
        "type": "object",
        "properties": {
          "path": {
            "type": "string"
          },
          "sha": {
            "type": "string"
          },
          "missing": {
            "type": "boolean"
          }
        },
        "required": [
          "path"
        ]
      }
    },
    "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"
    }
  },
  "required": [
    "manifest"
  ]
}
🟢verify_app(appId, files, dependencies, config, toolchain)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "appId": {
      "type": "string",
      "description": "the share code you passed to emit_app"
    },
    "files": {
      "type": "array",
      "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.",
      "items": {
        "type": "object",
        "properties": {
          "path": {
            "type": "string"
          },
          "bytes": {
            "type": "number",
            "description": "size in bytes on disk, as `wc -c` reports"
          },
          "sha": {
            "type": "string",
            "description": "optional; when present it is authoritative and the byte check is skipped for that file"
          }
        },
        "required": [
          "path"
        ]
      }
    },
    "dependencies": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "description": "the keys of package.json's dependencies"
    },
    "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"
        },
        "userInterfaceStyle": {
          "type": "string",
          "description": "app.json userInterfaceStyle"
        },
        "moduleSuffixes": {
          "type": "array",
          "items": {
            "type": "string"
          },
          "description": "tsconfig compilerOptions.moduleSuffixes"
        }
      }
    },
    "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`)"
        },
        "expoBuildProperties": {
          "type": "string",
          "description": "the INSTALLED `expo-build-properties` version, e.g. \"57.0.21\"; omit if it is not installed"
        },
        "enableSceneSupport": {
          "type": "boolean",
          "description": "app.json → expo-build-properties → ios.enableSceneSupport"
        }
      }
    }
  },
  "required": [
    "appId",
    "files"
  ]
}
🟢get_step(appId, stepId)

FREE. 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. Needs the same share code and the step's id.

Input Schema

{
  "type": "object",
  "properties": {
    "appId": {
      "type": "string",
      "description": "the share code you passed to emit_app"
    },
    "stepId": {
      "type": "string",
      "description": "the step id, e.g. \"configure\" or \"write\""
    }
  },
  "required": [
    "appId",
    "stepId"
  ]
}
🟢emit_screen(compositionId, componentName)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "compositionId": {
      "type": "string",
      "description": "the share code, e.g. \"34ca4babb2\""
    },
    "componentName": {
      "type": "string",
      "description": "React component name for the file, e.g. \"CheckoutScreen\". Defaults to GeneratedScreen."
    }
  },
  "required": [
    "compositionId"
  ]
}
🟢install_component(slug)

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.

Input Schema

{
  "type": "object",
  "properties": {
    "slug": {
      "type": "string",
      "description": "the component slug, e.g. \"button\" or \"bottom-sheet\""
    }
  },
  "required": [
    "slug"
  ]
}

Community

Rate this Server

Evidence

Recent observations

verifiedversion not recorded14 tools