Skip to main content
Glama
616,144 tools. Updated 2026-09-27 13:08

"Resources for React TypeScript UI Components" matching MCP tools:

  • MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.
    ConnectorNo auth
  • MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.
    ConnectorNo auth
  • Return a ready-to-paste snippet that wraps the Next.js root layout with `<UploadKitProvider>` so React components can talk to the upload route handler. When to use: right after scaffold_route_handler, to complete the wiring. The snippet goes in `app/layout.tsx`. Without the provider, UploadKit React components throw at runtime. Returns: a plain-text string containing a short explanatory note followed by a fenced tsx code block. Takes no parameters — the endpoint path is always `/api/uploadkit` since that is what scaffold_route_handler produces. Read-only, deterministic, idempotent.
    ConnectorNo auth
  • Fetch a COMPLETE, production-quality reference app (schemas.py + config.py + setup.py + ui/app.js) to copy patterns from — the single biggest lever for app quality. archetype='index' (default) lists the available archetypes with per-file byte sizes; pick the one closest to your app ('commerce-marketplace' | 'service-booking' | 'ops-dashboard' | 'multitenant-portal' | 'saas-billing') and fetch it BEFORE authoring your UI. These are real 'stunning' apps; mirror how they compose the SDK components, art-direct the landing page, and structure schemas. Optional file= to fetch just one file ('schemas.py' | 'config.py' | 'setup.py' | 'ui/app.js'). Responses are PAGED (~32KB/section): when the header says more:true, fetch the next section with offset=<next_offset> — never re-fetch from 0.
    ConnectorNo auth
  • WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.
    ConnectorNo auth
  • Returns instructions for migrating to PropelAuth in a frontend framework such as React, JavaScript, TypeScript, or when using Next.js for just the frontend (e.g. client-side rendered). Guidance includes migrating from several auth providers, such as Clerk or Auth0. Each guidance will include documentation from the auth provider and PropelAuth. It is important to follow the instructions carefully to ensure a successful integration. Make sure to use the 'Installation' guidance first. It is important to call every guidance to ensure a successful integration. Do not update a component/hook/etc from the auth provider until you receive guidance about that component/hook/etc. CRITICAL: If the current implementation uses a traditional OAuth/OIDC flow (e.g., via express-openid-connect, passport-auth0, or similar backend-managed session libraries), you MUST select 'OAuth' as the framework, regardless of the frontend library (React/Vue/etc.). Only select 'React' or 'Javascript' if the current implementation uses a frontend-only SDK (like @auth0/auth0-react) or if using fullstack Next.js.
    ConnectorNo auth

Matching MCP Servers

Matching MCP Connectors

  • Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4.

  • Native Claude Code integration for @annondeveloper/ui-kit — a zero-dependency React component library with 147 components, 3 weight tiers, physics-based animations, and OKLCH color system. Gives Claude deep awareness of the library's components, design patterns, and conventions. Includes 5 skills for component discovery, code generation, design system reference, tier selection, and accessibility auditing. 2 custom agents for architecture design and accessibility review. Auto-connects to a hoste

  • WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.
    ConnectorNo auth
  • Write WHOLE files DIRECTLY — YOUR model generates the code, Kleap stores, builds and deploys it as-is. To change something in a file that ALREADY EXISTS, use edit_files instead (read_files → edit_files): it replaces just the lines you name, while write_files makes you retype the entire file and silently drops whatever you leave out — on a 30KB shared layout that is how headers and footers get wiped. No Kleap-AI step, so what ships is byte-for-byte what you wrote — the right choice when a phrase, a URL or a schema must be exact. Publishing still audits the result (see publish_app). Best for scaffolding exact pages/components — e.g. programmatic-SEO routes. Astro paths (src/pages/*.astro, src/data/*.json, src/components/*.astro, public/*). Overwrites by path. NPM PACKAGES: do not write package.json (the build replaces it) — the build installs whatever your code IMPORTS, so `import { jsPDF } from "jspdf";` is all it takes. Supported on import: @tiptap/*, jspdf, pdf-lib, html2canvas, papaparse, file-saver, jszip, @ffmpeg/*, howler, wavesurfer.js, browser-image-compression, react-dropzone, recharts, chart.js, d3, @tanstack/*, react-hook-form, three, @react-three/*, leaflet, maplibre-gl, gsap, framer-motion, zustand, date-fns, react-markdown, axios, socket.io-client, radix-ui/*, next-themes, lucide-react, @tabler/*, openai, @ai-sdk/*; anything else is refused at build with a message naming it. A client-side router is never the answer — a route is a FILE (src/pages/about.astro → /about). IMAGES AND BINARIES: set encoding:"base64" on the file and send the bytes — that is how you put a logo, a photo, an OG image, a favicon or a font on the site (png/jpg/webp/svg/ico/mp4/woff2/pdf, 512KB max each decoded). Without it you can only write text, and a site with no images looks unfinished. To ADD an image from a text prompt WITHOUT sending any bytes (a real photo's base64 is too big to emit reliably), use generate_image — Kleap generates it and stores it for you. To REMOVE a page or asset, use delete_files — overwriting it with empty content leaves a URL that answers 200 with nothing, which is worse than a 404. DATA & ACCOUNTS: write_files only STORES files — it cannot provision the Kleap Database, so DB or auth code pushed here has no backend and silently does nothing. Stand the feature up with modify_app first, then edit those pages here. After writing, call publish_app to build & go live.
    Connector
    Destructive
    OAuth
  • Write WHOLE files DIRECTLY — YOUR model generates the code, Kleap stores, builds and deploys it as-is. To change something in a file that ALREADY EXISTS, use edit_files instead (read_files → edit_files): it replaces just the lines you name, while write_files makes you retype the entire file and silently drops whatever you leave out — on a 30KB shared layout that is how headers and footers get wiped. No Kleap-AI step, so what ships is byte-for-byte what you wrote — the right choice when a phrase, a URL or a schema must be exact. Publishing still audits the result (see publish_app). Best for scaffolding exact pages/components — e.g. programmatic-SEO routes. Astro paths (src/pages/*.astro, src/data/*.json, src/components/*.astro, public/*). Overwrites by path. NPM PACKAGES: do not write package.json (the build replaces it) — the build installs whatever your code IMPORTS, so `import { jsPDF } from "jspdf";` is all it takes. Supported on import: @tiptap/*, jspdf, pdf-lib, html2canvas, papaparse, file-saver, jszip, @ffmpeg/*, howler, wavesurfer.js, browser-image-compression, react-dropzone, recharts, chart.js, d3, @tanstack/*, react-hook-form, three, @react-three/*, leaflet, maplibre-gl, gsap, framer-motion, zustand, date-fns, react-markdown, axios, socket.io-client, radix-ui/*, next-themes, lucide-react, @tabler/*, openai, @ai-sdk/*; anything else is refused at build with a message naming it. A client-side router is never the answer — a route is a FILE (src/pages/about.astro → /about). IMAGES AND BINARIES: set encoding:"base64" on the file and send the bytes — that is how you put a logo, a photo, an OG image, a favicon or a font on the site (png/jpg/webp/svg/ico/mp4/woff2/pdf, 512KB max each decoded). Without it you can only write text, and a site with no images looks unfinished. To ADD an image from a text prompt WITHOUT sending any bytes (a real photo's base64 is too big to emit reliably), use generate_image — Kleap generates it and stores it for you. To REMOVE a page or asset, use delete_files — overwriting it with empty content leaves a URL that answers 200 with nothing, which is worse than a 404. DATA & ACCOUNTS: write_files only STORES files — it cannot provision the Kleap Database, so DB or auth code pushed here has no backend and silently does nothing. Stand the feature up with modify_app first, then edit those pages here. After writing, call publish_app to build & go live.
    Connector
    Destructive
    No auth
  • Search the RoxyAPI knowledge base and get back ranked documentation snippets, each with a source URL. It covers API endpoints with their request and response fields, SDK usage for TypeScript, Python, PHP, C#, and Go, the WordPress plugin, authentication and API keys, UI components, and step by step integration guides. Call this first whenever you need to integrate RoxyAPI into an app: to find which endpoint or SDK method to use, what parameters a call takes, how to authenticate, or how to wire a feature end to end. Pass the user question verbatim as `query`. If the first results miss, rephrase once and retry.
    ConnectorNo auth
  • Validate a TypeScript intent definition without generating Swift. Runs the full Axint validation pipeline (134 diagnostic rules) and returns a JSON array of diagnostics: { severity: 'error'|'warning', code: 'AXnnn', line: number, column: number, message: string, suggestion?: string }. Returns an empty array [] when validation passes. Use: use for TypeScript DSL diagnostics before Swift output; use swift.validate for existing Swift. Inputs: source is TypeScript DSL text; strictness options affect diagnostics only and never emit Swift. Effects: read-only diagnostics; writes no files and uses no network.
    ConnectorNo auth
  • Compile a minimal JSON schema directly to Swift, bypassing the TypeScript DSL entirely. Supports intents, views, components, widgets, and full apps via the 'type' parameter. Uses ~20 input tokens vs hundreds for TypeScript — ideal for LLM agents optimizing token budgets. Use: use for token-light JSON-to-Swift generation; use compile for full TypeScript DSL control and scaffold for TS starters. Inputs: schema kind selects intent, view, widget, or app output; options add companion metadata. Effects: read-only Swift generation; writes no files and uses no network.
    ConnectorNo auth
  • Return a canonical Clipkit doc as text. topic "card" = the ~8KB compact authoring card — the recommended context for authoring; "pattern-lighting" = the shine/neon/glow technique rigs; "pattern-data-viz" / "pattern-cinematic-ui" / "pattern-ui-screencast" / "pattern-promo-teaser" = ~4-5KB pattern cards (proven idioms: count-ups and bar rows; product hero shots with camera rigs; faked app UI with typing/cursor/clicks) — load ONE alongside the card when the brief matches its archetype; "agents" = the full authoring guide (fetch only when the card doesn't cover a need); "protocol" = the formal field spec; "brand" = brand reference. (Same docs offered as MCP resources, exposed as a tool so you can read them directly — resources are not always model-readable.)
    ConnectorNo auth
  • Read a resource by its URI. For static resources, provide the exact URI. For templated resources, provide the URI with template parameters filled in. Returns the resource content as a string. Binary content is base64-encoded.
    ConnectorAPI key
  • List the UI components of Ionic Framework, optionally filtered by a keyword. Use this to find the component that fits a piece of UI before building it by hand, and to learn the custom element name it is used under. Use limit 100 to list every component. Returns `tag`, `description` and `url` per component, where `url` is the documentation page carrying its full API reference. Do not use this to read a component's API: call `get_doc_page` with the returned `url`. Do not use it for Capacitor plugins or native capabilities, which are covered by the Capacitor MCP server at https://capacitor-mcp.capawesome.io/mcp.
    ConnectorNo auth
  • Read a resource by its URI. For static resources, provide the exact URI. For templated resources, provide the URI with template parameters filled in. Returns the resource content as a string. Binary content is base64-encoded.
    ConnectorAPI key
  • Fetch a Supero build reference. doc='skills' (default, the spec you MUST follow) | 'components' (the real pre-built SDK component/global catalog — read so you don't reinvent UI) | 'rubric' (the rich-app quality checklist — what 'stunning' means) | 'landing' (compact landing-page derivation + quality bar — MANDATORY read for public-facing apps) | 'integrations' (the EXACT services.* wrapper→service_id→args map for email/sms/stripe/ai/etc.) | 'web' / 'transactional' / 'workflows' / 'mobile' / 'services' (deep companion docs) | 'e2e_testing'. Returns the doc + a content version + the SDK floor to pin. Read 'skills' FIRST, then 'components' + a matching build_get_examples before you author UI. Docs are PAGED (~32KB/section): when the header says more:true, fetch the next section with offset=<next_offset> — never re-fetch from 0.
    ConnectorNo auth
  • Find which documentation SETS exist whose NAME matches a substring (e.g. "python" → Python 3.x, "react" → React). Returns doc SETS, NOT their content — this does NOT look up a function/method/API name. To search inside a doc for an entry like "Array.map" or "fetch", use search_index (slug + query).
    ConnectorNo auth
  • Generate a starter TypeScript intent file from a name and description. Returns a complete defineIntent() source string ready to save as a .ts file — no files are written, no network requests made. On invalid domain values, returns an error string. The output compiles directly with axint.compile. Use: use to create a small TypeScript intent starter; use templates.get for richer examples and compile for Swift output. Inputs: name must be PascalCase; params define the starter contract; domain defaults to general. Effects: read-only generated TypeScript; writes no files and uses no network.
    ConnectorNo auth
  • Captures the user's project architecture to inform i18n implementation strategy. ## When to Use **Called during i18n_checklist Step 1.** The checklist tool will tell you when to call this. If you're implementing i18n: 1. Call i18n_checklist(step_number=1, done=false) FIRST 2. The checklist will instruct you to call THIS tool 3. Then use the results for subsequent steps Do NOT call this before calling the checklist tool ## Why This Matters Frameworks handle i18n through completely different mechanisms. The same outcome (locale-aware routing) requires different code for Next.js vs TanStack Start vs React Router. Without accurate detection, you'll implement patterns that don't work. ## How to Use 1. Examine the user's project files (package.json, directories, config files) 2. Identify framework markers and version 3. Construct a detectionResults object matching the schema 4. Call this tool with your findings 5. Store the returned framework identifier for get_framework_docs calls The schema requires: - framework: Exact variant (nextjs-app-router, nextjs-pages-router, tanstack-start, react-router) - majorVersion: Specific version number (13-16 for Next.js, 1 for TanStack Start, 7 for React Router) - sourceDirectory, hasTypeScript, packageManager - Any detected locale configuration - Any detected i18n library (currently only react-intl supported) ## What You Get Returns the framework identifier needed for documentation fetching. The 'framework' field in the response is the exact string you'll use with get_framework_docs.
    ConnectorNo auth
  • Run the project's Jasmine spec files (helpers/*.spec.tsx) headlessly on the project VM (jsdom — no browser needed). Frontend AND backend code is testable: specs may render components (@testing-library/react) or import endpoint handlers/backend helpers and call them directly. Limits: fetch throws inside tests (mock with spyOn(globalThis, "fetch")), process.env secrets are absent, and specs importing @floot/* service modules are skipped (no mocks yet). Returns per-file PASS/FAIL with failing expectations. Defaults to all spec files except hook specs (file name contains "use" — those need real React scheduling and are excluded, matching the in-editor checker); pass `paths` to run specific spec files, including hook specs.
    ConnectorOAuth