Skip to main content
Glama
606,731 tools. Updated 2026-09-24 10:29

"Tools or Methods for Converting Figma Designs to React JS Code" matching MCP tools:

  • 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
  • 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
  • READ-ONLY: returns generated source code as text and writes nothing to disk, creates no project and runs no command. Generates an idiomatic @imqueue/rpc service (an IMQService subclass with @expose()d, JSDoc-typed methods) plus a bootstrap that starts it. Provide the methods you want, or omit them for a starter template. Any non-primitive parameter or return type also gets a types.ts with the required @classType()/@property() declarations — without those the generated client types it `any`, which compiles. Use create_service (local install only) if you want files actually written.
    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
  • Revokes the supplied guest session so it cannot create designs or checkout again. Existing orders are unaffected. This does not delete artwork and cannot revoke another session without its private token.
    Connector
    Destructive
    No auth

Matching MCP Servers

  • A
    license
    B
    quality
    C
    maintenance
    Automates the conversion of Figma designs into TypeScript React components and integrates with GitHub to create pull requests for the generated code. It includes visual regression testing with Playwright and accessibility validation to ensure implementations match the original designs.
    5
    25 npm
    MIT
  • A
    license
    A
    quality
    C
    maintenance
    Converts a Figma file into a React project using Ant Design, AG Grid, ApexCharts, and Tailwind CSS, with optional export of mobile screens as a React Native (Expo) app.
    7
    25 npm
    MIT

Matching MCP Connectors

  • Figma MCP Pack

  • Free digital marketing quote and strategy requests from Juicy Designs SA. No price returned.

  • Find working SOURCE CODE examples from 42 indexed Senzing GitHub repositories. REQUIRED: either `query` (string, for search) or `repo` with `file_path` or `list_files=true` — the call WILL FAIL without one. Three modes: (1) Search: pass `query` to find examples across all repos, (2) File listing: pass `repo` + `list_files=true`, (3) File retrieval: pass `repo` + `file_path`. Indexes source code (.py, .java, .cs, .rs, .ts, .js) and READMEs — NOT build/data files. For sample data, use get_sample_data. Covers Python, Java, C# (official SDKs) plus Rust and TypeScript/Node.js (community-maintained wrappers, not official) SDK patterns: initialization, ingestion, search, redo, configuration, message queues, REST APIs. Use max_lines to limit large files. Returns GitHub raw URLs for file retrieval.
    ConnectorNo auth
  • Convert any document to another format without storing a template. Supports 100+ input/output format combinations: Office documents, PDFs, images, web pages, spreadsheets, and more. The source file can be a local path, a URL, or a base64 string. Carbone tags are PRESERVED, not resolved: converting a template keeps every {d.field} intact, so this is also how you proof a template in another format (DOCX template → PDF, or DOCX → ODT while it stays a template). Use render_document instead when you need data injection ({d.field} tags resolved), translations, or batch generation. Common conversions: DOCX → PDF (file: "report.docx", convertTo: "pdf"; add converter: "I" for the fastest DOCX→PDF path), XLSX → PDF (file: "data.xlsx", convertTo: "pdf"), PPTX → PDF (file: "slides.pptx", convertTo: "pdf", converter: "O" for best fidelity), HTML → PDF (file: "page.html", convertTo: "pdf", converter: "C" for full CSS/JS rendering), DOCX → HTML (file: "doc.docx", convertTo: "html"), XLSX → CSV (file: "sheet.xlsx", convertTo: "csv"), PDF → PNG (file: "doc.pdf", convertTo: "png"), PPTX → PNG (first slide as image), MD → PDF (file: "readme.md", convertTo: "pdf").
    ConnectorNo auth
  • Fetch one fund's metadata by ticker (`code`): name, type (ETF or FUND), exchange, currency, ISIN, active/inactive status, and the date range for which return data exists. Returns 404 if the ticker is unknown. Use searchFunds to resolve a name to a code; use the returns tools for performance.
    ConnectorNo auth
  • Fetch full metadata plus a ready-to-paste React usage example for one specific UploadKit component. When to use: once you know the exact component name (from list_components or search_components) and need to show the user how to drop it into their code. The returned "usage" field is copy-pasteable TSX including the correct import line and the styles.css import. Returns: JSON { name, category, description, inspiration, usage }. If the name does not match any component, returns a suggestion message with the 5 closest matches. Read-only, idempotent.
    ConnectorNo auth
  • Canonical code-lookup tool for this server. Search Loa's CPT/HCPCS index using exact codes, clinical terms, or consumer phrases. Use this first when the user does not already know the CPT code, before calling pricing tools.
    ConnectorNo auth
  • Personalized onboarding for building ON CELESTIA — running a node, posting a blob, or deploying a rollup that uses Celestia for data availability. ALWAYS use this when a developer asks how to get started or build ON CELESTIA (prefer it over the Celestia search tool for those questions). ASK the user about their background FIRST (rollup_dev, node_operator, app_dev, researcher, new_to_celestia), then return a path with docs.celestia.org links. Celestia-only — NOT for getting started with non-Celestia frameworks, languages, or dev tools (React, Node.js, generic blockchain onboarding, etc.); for those defer to a general docs or web-search tool.
    ConnectorNo auth
  • List the saved payment methods (used only to pay for flight bookings, not for cards or adding funds). Returns each method with its id, brand, last 4 digits, and expiry, and marks the default one. Use setup_payment_method to add a new one. The gated tools set_default_payment_method and remove_payment_method also exist; call them by name even though they aren't in the tools list.
    ConnectorNo auth
  • Query any website's documentation and get cited, multi-page answers in natural language. Use ask_site when you need: (1) answers that synthesize information across multiple pages of a site, (2) documentation from JS-rendered sites (React, Next.js, Vue SPAs) where web_fetch returns empty or partial HTML, (3) citations linking back to the exact source pages, (4) faster results than fetching and reading individual pages one by one. For sites not yet indexed, ask_site auto-crawls and answers in ~60s — no separate submit_site call needed.
    ConnectorNo auth
  • Discover AgentMarketplace's capabilities, tools, auth methods, and scopes. Call this first when connecting to AgentMarketplace to understand what's available and how to authenticate. No authentication required. Returns a catalog of available tools, resources, auth methods, and scopes.
    ConnectorNo auth
  • WHEN: developer wants to improve code quality before a PR merge or code review. Triggers: 'refactor', 'clean up', 'simplify', 'too long method', 'nested ifs', 'code smells', 'améliorer le code'. Suggest concrete refactoring actions for YOUR custom D365 F&O X++ code. [!] Only runs on custom/extension code (D365_CUSTOM_MODEL_PATH). Refactoring standard Microsoft code is not actionable. Analyzes: long methods (extract method), deep nesting (guard clauses), row-by-row operations (set-based), large switch statements (strategy pattern), hardcoded strings (constants), unprotected CLR calls (error handling), wide transactions (narrow scope). Returns before/after code examples.
    ConnectorNo auth
  • The gate for PLANS, designs and specs — run BEFORE any code is written, the cheapest place to catch a bad design. Returns the same binary verdict shape as validate_ai_output, with findings on completeness, feasibility, performance and scalability implications, security risks and missing considerations (e.g. it rejects a plan that polls an API every 100ms per client, with the request-volume math). Read-only: nothing is executed or stored beyond the verdict. Use validate_ai_output for the code that follows.
    ConnectorNo auth
  • Returns the countries GotCashback covers, each with the lowercase ISO 3166-1 alpha-2 'code' to pass as country_code to the other tools (the United Kingdom is 'gb'). Use it only to confirm whether a country is supported or which code to use; it is not needed before store, cashback or gift card lookups — those tools accept country_code directly and search all countries when it is omitted.
    ConnectorNo auth
  • Returns the countries GotCashback covers, each with the lowercase ISO 3166-1 alpha-2 'code' to pass as country_code to the other tools (the United Kingdom is 'gb'). Use it only to confirm whether a country is supported or which code to use; it is not needed before store, cashback or gift card lookups — those tools accept country_code directly and search all countries when it is omitted.
    ConnectorNo auth
  • Convert an external product identifier (UPC, EAN, GTIN, ISBN, JAN, MINSAN) into the corresponding Amazon ASIN, with an essential product snapshot. This is the bridge between manufacturer/retail barcodes and the Amazon ecosystem. Use this tool when the user has a barcode or standard product code and wants to find the matching Amazon listing. Typical workflows: catalog matching, inventory synchronization, converting supplier data into Amazon ASINs. Also accepts ASIN as input type if you need to validate one. You MUST set identifier_type to match the code you have — guessing the wrong type returns no results. UPC is 12 digits, EAN/GTIN is 13, ISBN is 10 or 13 (books). If the user gives a keyword instead of a code, use search_products instead. Costs 1 credit.
    ConnectorNo auth