API-driven analytics integration

TL;DRCopy Anchor Link

Toucan AI supports a "headless" integration model where analytics data is fetched directly via API, allowing you to render visualizations using your own custom UI components.

When to use thisCopy Anchor Link

Choose this method when you require total control over the user interface, need to combine Toucan AI data with other internal data sources, or must build complex interactivity not supported by standard UI components.

Functional OverviewCopy Anchor Link

Unlike web component or SDK embedding, this approach does not include a Toucan AI user interface. Instead, your application acts as the presentation layer, requesting raw or structured data from the Toucan AI backend.

• Direct API Interaction: Use REST or GraphQL endpoints to retrieve dashboard configurations, chart metadata, or query results.
• Token-Based Security: Every request must be authorized with a server-generated embed token to maintain data isolation and RLS.
• Client-Side Rendering: Your application is responsible for mapping the API response to your preferred charting library (e.g., D3.js, Chart.js, or Highcharts).

Implementation ExampleCopy Anchor Link

The following standard fetch request demonstrates how to retrieve dashboard data using a secure embed token:

fetch('https://toucanai.cloud/api/v1/dashboards/your-dashboard-id', {
	method: 'GET',
	headers: {
		'Authorization': 'Bearer YOUR_EMBED_TOKEN'
	}
})
	.then(res => res.json())
	.then(data => {
		// Implement custom rendering logic here
		console.log(data);
	});

Architectural ConsiderationsCopy Anchor Link