How to add Figma MCP to OpenAI Agent Builder

OpenAI just dropped something big. Agent Builder is finally here, and it feels like n8n met ChatGPT. If you’ve been wanting to build a real AI agent without writing a line of code, this is it.

Now, let’s make it even cooler. We’ll connect Figma through Rube MCP. That means your agent can look into your Figma projects, grab frames, and actually do things with them.

Sounds cool? Let’s go!

What is Agent Builder?

At DevDay 2025, OpenAI released AgentKit, a new end-to-end platform with a complete set of tools for developers and enterprises that lets anyone build, deploy, and optimise agents (no coding required).

It comes with three core components, among which is Agent Builder:

• Agent Builder: It is a visual canvas for creating, versioning, and testing multi-agent workflows with drag-and-drop. (Should be familiar if you've worked with tools like n8n before. Nothing new!)

• Connector Registry: It is a central hub for managing data sources, APIs, and any tools that connect across OpenAI products.

• ChatKit: It is a customizable chat toolkit that lets you embed agentic UI directly in your products/websites.

There are also Guardrails, which are built-in safety and moderation tools, and Evals, which are a way to test and improve your agent's performance.

This came as a great surprise, not just to me, but to many other no-code agentic builder companies. Seeing OpenAI releasing a n8n, Zapier alternative was not on my bingo card.

Read this how-to guide to get started with building AI agents with Agent Builder.

What's Rube?

Rube is a secure, hosted MCP server that connects LLMs, agents, and AI assistants to 500+ apps such as Figma, Jira, GitHub, HubSpot and more.

Why use Rube?

It has only seven MCP tools in LLM's context window, which are used to load the relevant tools in a given context dynamically. Thus, improving the reliability of task execution.

To see all the available apps, you can browse the Rube marketplace.

Getting started is simple:

• Install Rube on your preferred platform

Or,

• Sign up on the web app, connect an app, and test it directly in your browser.

Here’s a quick demo that shows Rube in action

Now that we have a quick overview of both tools, let's start creating our small Figma agent using Rube MCP and Agent Builder.

How to add MCP to Agent Builder

So, now we're ready to add MCP to our Agent Builder with Rube.

You can obviously use any other custom-hosted MCP servers, but I suggest you go with Rube. It's a part of Composio, well-maintained and supports over 500 apps, so why not?

First, head over to Agent Builder and log in if you're not already.

Once in, create a new workflow or continue with your existing one.

Inside your workflow, you can add MCP support by clicking on the MCP button in the left sidebar.

Once there, you can choose from those by OpenAI itself, other servers maintained by "Other Developers," or add your own server, which in our case is exactly what we want.

Click on the + Server button, and it will ask for the MCP server details and the Access Token/API Key.

Fill in the fields:

• URL: https://rube.app/mcp

• For Label and Description, you can add anything you want (show your creativity! 😉)

For the authentication token, you can get it from Rube. Head over to the Rube.

Click on the Install Button and select Agent Builder. Now you can follow the steps shown there or just generate the Access Token.

Now, head back to Agent Builder and in the field for Auth Token/API Key, paste the generated token.

Click Connect, and if you see something like this, you're all good!

If required, you can limit the tools from the Rube MCP, but for this demo, I suggest you keep it as the default.

Click the Add button, and you've just added Rube to your Agent Builder and can access all their integrations right from Agent Builder. How cool is that?

Now, if you want to use the MCP server in an agent, create or go to your agent and under the tools section, select MCP Server and follow the same steps.

It's that simple!

Figma MCP in action

Now, it's time to test the MCP server. If you haven't already, create an agent by clicking the Agent button in the left sidebar and grant it access to the tools with Rube MCP.

For the testing, head over to the Chat Preview at the top. First, make sure to check your connection with Figma. Once confirmed, enter your query, and Rube will handle everything. 👌

How easily we can now access the Figma tools right from Agent Builder! All we need is an Agent with the Rube MCP provided in its tools.

This is a very naive example, and we've just touched the surface.

Conclusion

Obviously, there are a ton of new ideas you can get done once you have Figma set up inside the Agent Builder with Rube MCP. This is just a straightforward agent we built.

The sky is the limit! See all the ideas you can build with the help of Figma MCP.

If you are already a bit familiar with tools like n8n or Zapier, this will feel just the same. There's little to no learning curve, so now all I say is go ahead and build some crazy production agents, and happy hacking!

That's all for this! I will see you in the next one.

FAQs

1. What is OpenAI Agent Builder?

Agent Builder is part of OpenAI’s new AgentKit platform. It lets anyone create and test AI agents using a visual drag-and-drop interface, similar to tools like n8n or Zapier. You can connect data sources, add tools, and design full workflows without writing code.

2. What is Rube MCP, and why should I use it?

Rube MCP is a hosted Model Context Protocol (MCP) server that connects your AI agents to over 500 apps like Figma, Slack, and Gmail. Instead of manually setting up APIs or servers, you can plug in Rube once and instantly give your agent access to a wide range of integrations.

3. How do I connect Rube MCP to Agent Builder?

Inside OpenAI’s Agent Builder, go to the MCP section and click + Server. Use the Rube MCP URL (https://rube.app/mcp) and paste the API key from your Rube account. Once connected, you’ll be able to use Rube’s integrations directly inside your agent workflows.

4. What can I do with Figma once it’s connected through Rube MCP?

With the Figma MCP integration, your agent can explore your design files, retrieve frames or layers, and even automate routine design-related tasks. This lets your AI agent collaborate with your design team or extract visual context for other workflows.