MCP lets AI tools like Claude Code, Cursor, Codex and others to connect to external data sources.
With Banani's MCP, your coding agent can pull the code, context and image of whatever screens you have selected inside our editor.
What you can do
Once connected, just select the screens you want in Banani and prompt your agent. Some examples:
Recreate selected Banani screens in my stack
Make a new React project using these designs
Build this design
Implement this page
Convert this to React
Here's an example of a project that was converted to a fully functioning app using Claude Code:
Setup
Go to the MCP page in Banani's sidebar. Pick your tool: Claude Code, Cursor, Codex, or Other, and click to generate an API key.
Your token is shown only once. If you lose it, delete the key on the MCP page and create a new one.
How to use it
Add Banani MCP to your coding tool (one-time setup)
Select screens in your Banani project
Ask your agent to work with them
What the agent can "see"
For each selected screen, your agent gets:
Screen name -- the name you gave it in Banani
Screen type -- whether the design is web or mobile
Full code -- simplified html/css of design
Theme tokens -- colors, border radii, and font family from your design's theme
It also gets the project name and URL so it has full context.
Managing your keys
You can view and delete your API keys on the MCP page under Your keys. Each key shows its prefix (e.g., `bnni_abc123...`) and can be deleted at any time.
Deleting a key immediately revokes access, any agent using that key will need a new one.