Carbonara Connector for AI agents.
1 live capability
Create professional code screenshots for documentation and social media.
Waiting for input…
Why people use Carbonara
Carbonara for Professional Code Documentation
This Connector changes that. You just give your agent the code and tell it how you want it to look. It handles the themes, the window controls, and the shadows. You get a polished PNG every time without the manual headache.
What Vinkius changes
You get professional code screenshots without ever opening a dedicated image editor.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 6,100+ Connectors
- Real-world use case 01
Social Media Sharing
A dev wants to share a React hook on X.
- Real-world use case 02
Documentation Updates
A technical writer needs to update a tutorial.
- Real-world use case 03
Tutorial Slides
An educator wants to highlight a specific SQL query.
Complete set · 1capability
The complete Carbonara capability set.
These are the exact actions your AI can choose when you ask it to work with Carbonara.
01
1 capability in this set.
Part of 1 available through Carbonara.
- 01 Capability
Cook code image
Converts a code snippet into a high-quality PNG image with your specified styling. This makes it easy to share clean code on social media or in documentation.
Set up in minutes
One URL. Then ask Carbonara to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Carbonara from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it Carbonara, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Carbonara for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Carbonara URL.
- Step 03
Save and start
Save the connection and enable Carbonara in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"carbonara": {
"url": "https://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using Carbonara
Open Agent mode in chat and ask: "Using Carbonara, help me...". 1 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"carbonara": {
"url": "https://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using Carbonara
Ask Copilot: "Using Carbonara, help me...". 1 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"carbonara": {
"url": "https://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using Carbonara
Open Cascade and ask: "Using Carbonara, help me...". 1 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"carbonara": {
"url": "https://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using Carbonara
Ask Cline: "Using Carbonara, help me...". 1 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add carbonara --transport http "https://edge.vinkius.com/vk_preview_0XnYwPmDpzM2q6md1Jg1e6TZ6XxnAdczMFbgBlwp/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using Carbonara
Ask Claude: "Using Carbonara, show me...". 1 tools are ready
Where the request belongs
Work Carbonara can move forward.
Technical writers, developers, and educators who need to share code visually. It solves the problem of ugly copy-pasted code in docs or social media.
Technical Writer
Creating consistent illustrations for documentation and blog posts.
Software Engineer
Sharing readable snippets in team chats or on social media platforms.
Coding Educator
Generating clear visual aids for programming tutorials and slides.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsHTMLCSSToImage
Generate high-quality images and PDFs from HTML/CSS or URLs directly from your AI agent.
Urlbox
Render websites as high-quality screenshots and PDFs with a cloud API that handles responsive layouts and dynamic content.
PagePixels
Capture website screenshots and generate visual previews programmatically with an API that handles rendering at any resolution.
ScreenshotOne
Capture website screenshots. audit visual content and generate PDFs via AI.
Ideogram (AI Image Generation)
Generate and edit images via Ideogram. the industry leader for rendering text within AI-generated visuals.
Ideogram
Generate stunning images from text prompts with an AI model that excels at typography, logos, and photorealistic compositions.
Bring your own AI
Change the model, client or framework. Keep Carbonara connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about Carbonara.
The practical details behind the request, access and result.
Can Carbonara MCP create images with different themes?
Yes, you can choose from popular presets like 'seti' or define custom styles to match your brand.
Does Carbonara MCP support multiple programming languages?
It handles automatic detection for most languages, so your syntax highlighting will always look correct.
How do I get the images from Carbonara MCP?
Your AI client will provide a base64 encoded PNG that you can save or share instantly.
Can I add window controls to my Carbonara MCP images?
Yes, you can add macOS-style close, minimize, and maximize buttons to your code snapshots.
Is Carbonara MCP good for technical documentation?
It's ideal for docs because it ensures every code snippet looks consistent and professional.
Can I highlight specific lines in a Carbonara MCP image?
You can tell your agent exactly which lines to emphasize to make your tutorials easier to follow.
Can I customize the syntax highlighting theme and font?
Yes! You can use the theme parameter (e.g., 'seti') and fontFamily or fontSize to match your preferred style perfectly.
Is it possible to highlight specific lines of code in the image?
Absolutely. Use the selectedLines parameter to provide a comma-separated list of line numbers (e.g., '3,5,6') that you want to emphasize.
Can I add window controls like the ones on macOS?
Yes, by setting windowControls to true, the generated image will include the classic close, minimize, and maximize buttons.
One connection away
Give your agent a direct line to Carbonara.
Connect Carbonara once. Keep it beside 6,100+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available