# Getting Started with MCP Server - Portal

<WizardSteps build="mcp-server" method="portal" />

<MethodTabs build="mcp-server" method="portal" />

Turn an OpenAPI-described API into a managed MCP server. This path builds it in
the Zuplo Portal.

Zuplo allows you to instantly add a managed MCP Server to your existing API,
powered by OpenAPI.

If you're not familiar with Zuplo, it's recommended to go through the
[Step 1](../gateway/setup-a-basic-gateway/index.mdx) first.

<Stepper>

1. Create a **new project**

   In the Zuplo Portal, open
   [**Projects**](https://portal.zuplo.com/+/account/projects), click **New
   Project**, select **API & MCP Gateway**, enter a project name, and click
   **Create Project**.

   <ModalScreenshot>

   ![New Zuplo project dialog with API & MCP Gateway selected](/media/mcp-gateway-portal-quickstart/new-project.png)

   </ModalScreenshot>

1. **Import** an **OpenAPI** document

   Let's import an OpenAPI document. You can download this one here
   [todo-openapi.json](https://download-open-api-main-fae215f.d2.zuplo.dev/todo-openapi).

   <ModalScreenshot size="sm">

   ![Import OpenAPI](../../../public/media/mcp-quickstart/import-openapi.png)

   </ModalScreenshot>

   Select the **Code** tab (1), then choose the `routes.oas.json` file (2) and
   choose **Import OpenAPI** (3).

   <ModalScreenshot size="sm">

   ![Complete Import](../../../public/media/mcp-quickstart/complete-import.png)

   </ModalScreenshot>

   Click **Complete Import** to import the routes.

   Now save your changes (press **Save** at bottom left of **CMD+S**).

1. Test the **Get all todos** route

   The first route you imported is called `Get all todos`. Select it and click
   the **Test** button next to the **Path** field.

   A test dialog will open, click **Test** and you should see a `200 OK`
   response with a few todos.

   This is the basic API we're going to turn into a fully functioning MCP
   Server.

1. Create an **MCP Server**

   On your `routes.oas.json` file, choose **Add** and then **Dynamic OpenAPI to
   MCP Server** (3)

   ![Add Route](../../../public/media/mcp-quickstart/add-mcp-route.png)

   A new route will appear. Confirm the following values:
   - **Summary**: enter `MCP Server`
   - **Method**: choose `POST`
   - **Path**: enter `/mcp` (the path can be anything, but /mcp is common)

   Click the **Select Tools** option for your new MCP Server endpoint (1).

   ![Select Tools](../../../public/media/mcp-quickstart/select-mcp-tools.png)

   You should see the MCP tools dialog. Check the tools from your `*.oas.json`
   files, that you want to surface in your MCP Server.

   ![MCP Server](../../../public/media/mcp-quickstart/mcp-tools-dialog.png)

   Click **Update Tools** (1)

   Now click Save at the bottom left. Congratulations, you just published your
   first MCP Server!

1. Connect your MCP Client

   You can use any MCP client you like. We like the OpenAI platform's
   playground.

   Go to
   [platform.openai.com/playground](https://platform.openai.com/playground)
   (you'll need an OpenAI account).

   ![Add tool](../../../public/media/mcp-quickstart/openai-add-tool.png)

   Click `Create...` next to the **Tools** label and choose **MCP Server**.

   Click **Add new** to register your custom MCP Server with the playground.

   You'll need the URL of your MCP server - you can get this by going back to
   Zuplo, clicking on your MCP Server route and then clicking **Test**. At the
   top you'll see a button to copy the URL to your clipboard.

   ![Copy MCP Server URL](../../../public/media/mcp-quickstart/copy-mcp-server-url.png)

   Back to the OpenAI playground...

   <ModalScreenshot size="sm">

   ![Connect MCP Server](../../../public/media/mcp-quickstart/connect-mcp-server.png)

   </ModalScreenshot>

1. Enter the URL of your MCP Server
1. Enter a label, try `todos`
1. Choose **None** for Authentication as we didn't add auth to our API
1. Click **Connect**

   If successfully connected, you'll see your 'tools' listed in the playground.

   <ModalScreenshot size="sm">

   ![Add tools](../../../public/media/mcp-quickstart/add-tools.png)

   </ModalScreenshot>

   No need to deselect any tools, let's add them all!

1. Test your MCP Server via the playground

   Let's prompt the LLM in the playground. Ask the model to

   `list out all the todos`

   The model should recognize that it needs to call the todos MCP Server and
   will ask for your approval.

   Click **Approve** and you should see the todos listed 👏

   ![The prompt](../../../public/media/mcp-quickstart/the-prompt.png)

</Stepper>

Congratulations! Now go read more about the
[MCP Server handler](/docs/handlers/mcp-server).