Skip to main content
Outfox MCP includes a Generative UI layer powered by json-render. When you ask Outfox to visualize data — campaign trends, platform comparisons, audience breakdowns — the AI generates a structured UI spec and your MCP client renders it as an interactive chart, right inside the conversation.

​
Where it works

Generative UI uses the MCP Apps protocol extension. Not all MCP clients support it yet.

Supported today

  • Claude (desktop + web)
  • ChatGPT (desktop)
  • VS Code (GitHub Copilot Chat)
  • Cursor
  • Goose
  • Postman

Not yet supported

  • Claude Code (CLI — text only)
  • Windsurf
  • Zed
  • Other MCP clients without MCP Apps support
In clients that don’t support MCP Apps, the render_ui tool still works — it returns the raw JSON spec as text. The AI can read and summarize the data, but you won’t see the visual chart.

​
How it works

1

You ask a question

“Show me campaign performance for the last 6 months”
2

AI fetches data

The AI calls existing Outfox tools like meta_ads_get_insights, meta_ads_get_metadata, or search_inspiration to gather the raw data.
3

AI calls render_ui

Instead of dumping JSON, the AI calls the render_ui tool with a structured spec describing which charts and components to display, with what data.
4

Your client renders it

The MCP client loads an interactive iframe and renders the chart. You can hover for tooltips, see legends, and interact with the visualization.

​
Available chart types

Outfox ships three chart components built with Recharts, plus all standard shadcn/ui components (Card, Table, Badge, etc.) for layout and structure.

​
LineChart

Best for: trends over time — impressions, spend, CTR, conversions. 
"Show me a line chart of impressions and clicks by month"

​
BarChart

Best for: comparing across categories — platform spend, A/B test results, budget allocation. 
"Compare ad spend across Facebook, Instagram, and TikTok as a bar chart"

​
AreaChart

Best for: volume and composition — cumulative spend, audience reach, funnel stages. 
"Show cumulative reach across channels as a stacked area chart"

​
What you’ll see

When generative UI is working, you’ll see an interactive chart panel appear directly in your conversation:
  • Dark themed to match the Outfox brand (dark background, amber accents)
  • Tooltips on hover showing exact values
  • Legends identifying each data series
  • Responsive — fills the available width in your client
The chart appears as a rendered panel below the AI’s text response. It’s not an image — it’s a live, interactive widget.

​
Example prompts

Try these with your MCP client:
“Get my campaigns for brand X and show me a line chart of impressions over time”The AI will call meta_ads_get_metadata to list campaigns and meta_ads_get_insights for performance, then render_ui with a LineChart.
“Search inspiration for skincare ads and show me a bar chart of how many are on each platform”The AI will call search_inspiration with the query, aggregate by platform, then render_ui with a BarChart.
“Show me the status of all my brand analyses”The AI can combine data tools with shadcn Card/Badge components to render a status dashboard.

​
Powered by open standards

Generative UI is built on the MCP Apps protocol extension and json-render. Charts are rendered with Recharts; layout components come from shadcn/ui. Any MCP client that adopts the MCP Apps spec will see the rendered widgets automatically — no Outfox-specific integration required.