Skip to content
Swytchcode logo Swytchcode logo Swytchcode Docs

Plugin Installation

Swytchcode provides a powerful React-based plugin that can be embedded into your applications or portals, allowing developers to test, generate, and explore API methods/workflows interactively. It also provides an interface to manage the developers’ MCP access

Prerequisites

  • Before installing the plugin, make sure you create a project in your Swytchcode dashboard
  • Upload one or more libraries (OpenAPI, Postman collection, or SDK) to that project
  • Copy the project’s API key, which is required to initialize the plugin

🔑 Note: The API key is scoped at the project level and will automatically expose all libraries within that project to the plugin.

Claim a Swytchcode Subdomain

Swytchcode offers an easy way to spin up a fully hosted plugin on your own subdomain.

  1. In the Quick Links panel, open Manage Plugin.
  2. Click Claim Subdomain and choose your desired name.

Once claimed, our servers automatically provision the subdomain.
Within a few minutes you’ll have a secure, working plugin ready for testing.

Key points

  • Managed & Secure – Hosted and maintained by the Swytchcode team.
  • Automatic Upgrades – We handle updates and infrastructure so you don’t have to.
  • You don’t need to generate the API key manually here. It’s handled when the subdomain is being created automatically.

If you’d rather customize and self-host the plugin, continue with the steps below.

React Installation

  1. Install Swytchcode Using npm:
npm install swytchcode

Or using yarn:

yarn add swytchcode
  1. Add the Plugin to Your Code Here’s a minimal example using React:
import 'swytchcode/dist/style.css';
import { Swytchcode } from 'swytchcode';


function App() {
  return (
    <div style={{ width: '100vw', minHeight: '100vh' }}>
      <Swytchcode
        apiBaseUrl="https://api-v2.swytchcode.com"
        projectApiKey="<API_KEY>"
        show_mcp={true} // Set to false to hide MCP panel and menu
      />
    </div>
  );
}


export default App;

Notes

  1. CSS Import Required: Don’t forget to import the Swytchcode CSS file (swytchcode/dist/style.css).
  2. Full-Screen Display: Wrap the plugin in a container with width: 100vw and minHeight: 100vh to ensure full-page coverage.
  3. React Version: Swytchcode uses react and react-dom version ^18.3.1. If your app uses a different React version, you may encounter version conflicts. Please align with the recommended version where possible.

Alternative installation

Swytchcode also supports legacy iframe-based embedding, which is useful for non-React environments or low-code platforms.

Platform-Specific Examples

We maintain an open-source repository with working plugin examples for various platforms (React, Next.js, Mintlify, etc.): https://github.com/Swytchcode/plugin-installation-examples