# LinkedIn Post - Nano Banana Pro MCP Server
---
## Post Option 1 (Shorter - Recommended)
**I built an MCP server that lets you create entire websites with custom AI-generated graphics - all from Claude Code**
The game has changed.
I just built Nano Banana Pro - an MCP server that bridges Claude Code with Google's Gemini image generation.
What this unlocks:
You can now build a complete website AND generate all its custom graphics without ever leaving your terminal.
- Hero images? Generated on the fly
- Product mockups? One prompt away
- Custom icons and illustrations? Done in seconds
- Need to iterate on a design? Just keep talking
I built the entire MCP server in Claude Code.
Then I used that same MCP to generate the graphics for this very post.
It's MCP servers all the way down.
The stack:
- TypeScript (~500 lines)
- Model Context Protocol (MCP)
- Google Gemini 2.0 Flash API
- Docker deployment
This is what the future of web development looks like:
One conversation. Full website. Custom graphics. Zero context switching.
Open source: [GITHUB LINK]
What would you build if you never had to leave your IDE?
#AI #MCP #ClaudeCode #WebDevelopment #Gemini #OpenSource #FutureOfCoding
---
## Post Option 2 (Longer - Story Format)
**I built an MCP server with Claude Code. Then I used that MCP to build a website with custom graphics. Here's the whole story.**
Two weeks ago, I was frustrated.
Every time I needed an image for a project, I had to:
- Leave my coding environment
- Open an image generation tool
- Generate, download, import
- Repeat 50 times
So I decided to fix it. With Claude Code.
**The Build**
I asked Claude to help me create an MCP server - a bridge between Claude Code and Google's Gemini image generation API.
The result: Nano Banana Pro
6 tools. ~500 lines of TypeScript. Full image generation capabilities.
But here's where it gets interesting...
**The Meta Moment**
Once the MCP was running, I realized I could now build ANYTHING with custom graphics without leaving Claude Code.
So I tested it by building a complete website:
- Homepage with a stunning AI-generated hero image
- Product pages with custom mockups
- Blog section with unique illustrations
- All the icons and visual elements
Every single graphic was generated through a conversation.
"Create a hero image with..."
"Now make a product mockup of..."
"Generate an icon for..."
One terminal. One conversation. One complete website with custom visuals.
**What This Means**
This is the new workflow:
1. Describe what you want to build
2. Claude writes the code
3. Claude generates the graphics (via MCP)
4. You ship
No Figma. No stock photos. No context switching.
The MCP server I built with Claude Code now lets Claude Code build things that weren't possible before.
That's the power of MCP.
**The Technical Bits**
For the curious:
- TypeScript + @modelcontextprotocol/sdk
- Google Gemini 2.0 Flash API
- Supports up to 4K resolution
- 10 aspect ratios
- Iterative editing (keep refining without re-uploading)
- Reference image support for style transfer
- Dockerized for easy deployment
Full source code: [GITHUB LINK]
What would you build if image generation was just another tool in your terminal?
#AI #MCP #ClaudeCode #WebDevelopment #Gemini #ImageGeneration #OpenSource #DeveloperTools #FutureOfCoding #AIEngineering
---
## Post Option 3 (Punchy - High Engagement)
**I never left my terminal.**
Built an MCP server with Claude Code.
That MCP connects to Gemini's image generation.
Now I c
an build entire websites WITH custom graphics in a single conversation.
Hero images. Product mockups. Icons. Illustrations.
All generated on command. All from my terminal.
Here's the wild part:
The images in this post? Generated by the same MCP I'm telling you about.
It's MCPs all the way down.
500 lines of TypeScript.
Unlimited creative possibilities.
Open source: [GITHUB LINK]
The future of development isn't AI OR design tools.
It's AI-powered design tools INSIDE your development environment.
#AI #MCP #ClaudeCode #Gemini #OpenSource
---
## Hashtag Options
**Core hashtags (always include):**
- #AI
- #MCP
- #ClaudeCode
- #OpenSource
**Story-focused hashtags:**
- #FutureOfCoding
- #WebDevelopment
- #BuildInPublic
**Technical hashtags:**
- #TypeScript
- #DeveloperTools
- #AIEngineering
- #ModelContextProtocol
**Discovery hashtags:**
- #Gemini
- #ImageGeneration
- #GoogleAI
- #Anthropic
---
## Image Descriptions (For This Post)
**Image 1 (16:9 - Hero/Cover):**
Futuristic visualization of Claude Code terminal connected to a website being built, with a glowing banana MCP connector bridging them. Streams of code and images flow through the connection. Deep purple and gold color scheme.
**Image 2 (1:1 - Square Carousel):**
Infographic showing the complete workflow: Developer prompt -> Claude Code -> MCP Server (banana icon) -> Gemini API -> Generated graphics -> Finished website. Clean minimalist design with blue and orange gradients.
**Image 3 (4:3 - Showcase):**
Split-screen showing Claude Code terminal on left with commands, and a gorgeous finished website with AI-generated graphics on right. Dark mode aesthetic with neon purple, cyan, and gold accents. Subtle banana mascot in corner.
---
## Posting Strategy
**Best times to post:**
- Tuesday-Thursday, 8-10 AM your timezone
- Alternatively: Sunday evening (7-9 PM) for Monday morning visibility
**Engagement tips:**
1. Respond to every comment in the first 2 hours
2. Ask a question at the end to drive comments
3. Pin a comment with the GitHub link
4. Tag relevant people/companies if appropriate (@Anthropic, @Google)
**Carousel recommendation:**
Use all 3 images as a carousel for maximum engagement. Order:
1. Hero image (16:9) - Attention grabber
2. Workflow infographic (1:1) - Education
3. Showcase split-screen (4:3) - Proof/Results
---
## Call-to-Action Options
- "What would you build if you never had to leave your IDE?"
- "What MCP tools are you building?"
- "Is this the future of web development?"
- "Drop a comment if you want me to build something live on stream"
