Skip to main content

MCP Resources Overview

Phoenix provides MCP resources that enable rich UI integrations with AI assistants, particularly for the OpenAI Apps SDK.

What are MCP Resources?​

MCP resources are static or dynamic content that MCP clients can access through standardized URIs. They enable:

  • UI component templates
  • Configuration files
  • Static assets
  • Dynamic content generation

Available Resources​

UI Templates​

Phoenix provides UI templates for building rich interfaces in OpenAI Apps SDK applications.

Resource URI Pattern: phoenix://ui-templates/{template-name}

Available Templates​

company-card

  • URI: phoenix://ui-templates/company-card
  • Description: Card component for displaying company information
  • Use case: Company profile displays, search results, dashboards

technology-stack

  • URI: phoenix://ui-templates/technology-stack
  • Description: Component for visualizing a company's technology stack
  • Use case: Technology analysis views, competitive intelligence

intent-signals

  • URI: phoenix://ui-templates/intent-signals
  • Description: Widget for displaying intent signals and scores
  • Use case: Sales dashboards, buying signal alerts

spending-analysis

  • URI: phoenix://ui-templates/spending-analysis
  • Description: Charts and visualizations for spending data
  • Use case: Budget analysis, spending trend reports

Using Resources​

OpenAI Apps SDK​

Resources are designed for use with OpenAI Apps SDK applications:

import { MCPClient } from '@openai/mcp-client';

const client = new MCPClient({
  serverUrl: 'https://phoenix.hginsights.com/api/ai/YOUR_API_KEY/mcp',
  transport: 'http' // Phoenix uses HTTP/SSE transport
});

// Fetch a UI template
const template = await client.getResource('phoenix://ui-templates/company-card');

// Use the template in your React component
<TemplateRenderer template={template} data={companyData} />

Template Structure​

Phoenix UI templates follow this structure:

{
  "uri": "phoenix://ui-templates/company-card",
  "mimeType": "application/json",
  "content": {
    "type": "component",
    "schema": {
      // Component prop schema
    },
    "template": {
      // React-like component definition
    }
  }
}

Resource Categories​

UI Components​

Pre-built UI components for common use cases:

  • Company information cards
  • Technology stack visualizations
  • Intent signal displays
  • Spending analysis charts

Configuration Templates​

Template configurations for common setups:

  • MCP client configurations
  • Tool workflow definitions
  • Search query templates

Integration Examples​

Company Profile Display​

// Fetch company data
const company = await phoenixMCP.callTool('company_firmographic', {
  companyDomain: 'salesforce.com'
});

// Get UI template
const cardTemplate = await phoenixMCP.getResource(
  'phoenix://ui-templates/company-card'
);

// Render with data
<TemplateRenderer
  template={cardTemplate}
  data={company}
/>

Technology Stack Visualization​

// Fetch technology data
const techStack = await phoenixMCP.callTool('company_technographic', {
  companyDomain: 'salesforce.com'
});

// Get visualization template
const stackTemplate = await phoenixMCP.getResource(
  'phoenix://ui-templates/technology-stack'
);

// Render visualization
<TemplateRenderer
  template={stackTemplate}
  data={techStack}
/>

Template Customization​

All templates support customization through props:

<TemplateRenderer
  template={template}
  data={data}
  options={{
    theme: 'dark',
    showMetadata: true,
    compactView: false,
    customColors: {
      primary: '#0070f3',
      secondary: '#ff4081'
    }
  }}
/>

Resource URI Patterns​

Phoenix resources follow these URI patterns:

  • UI Templates: phoenix://ui-templates/{template-name}
  • Configurations: phoenix://config/{config-type}
  • Assets: phoenix://assets/{asset-path}

Supported MIME Types​

  • application/json - JSON data and configurations
  • text/html - HTML templates
  • text/javascript - JavaScript components
  • text/css - Stylesheets

Dynamic Resources​

Some resources support dynamic parameters in the URI:

phoenix://ui-templates/company-card?theme=dark&compact=true
phoenix://config/workflow?industry=technology&size=enterprise

Caching​

Resources are cached based on their type:

  • UI Templates: 24 hours (templates rarely change)
  • Configuration Templates: 1 hour
  • Dynamic Resources: 15 minutes

Best Practices​

1. Use Appropriate Templates​

Choose templates that match your use case:

  • company-card for profile views
  • technology-stack for technical analysis
  • intent-signals for sales intelligence
  • spending-analysis for financial insights

2. Handle Loading States​

Always handle resource loading gracefully:

const [template, setTemplate] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
  client.getResource(uri)
    .then(setTemplate)
    .catch(handleError)
    .finally(() => setLoading(false));
}, [uri]);

3. Error Handling​

Resources may fail to load:

try {
  const template = await client.getResource(uri);
  return <TemplateRenderer template={template} data={data} />;
} catch (error) {
  return <FallbackComponent error={error} />;
}

4. Customize Thoughtfully​

Start with default templates, then customize as needed. Excessive customization may break on template updates.

Limitations​

  • Resources are read-only
  • No server-side rendering support yet
  • Limited to JSON, HTML, JS, and CSS MIME types
  • Maximum resource size: 1MB

Coming Soon​

Additional resources in development:

  • Chart templates for analytics
  • Dashboard layouts
  • Report templates
  • Custom data visualizations
  • Interactive workflow builders

Next Steps​