Embedding

A machine’s page surface can be embedded in any website. mashin provides native SDKs for popular frameworks, so the component feels native to your app. No web components, no shadow DOM, no styling conflicts.

React

npm install @mashin/react

import { MashinPage, MashinComponent } from "@mashin/react";

// Full page
<MashinPage
  machine="dashboard"
  cell="https://your-cell.mashin.cloud"
  auth="msk_your_key"
/>

// Single component in your layout
<MashinComponent
  machine="summarizer"
  cell="https://your-cell.mashin.cloud"
  auth="msk_your_key"
  input={{ text: articleBody }}
/>

The React SDK fetches the component spec from your cell’s API, renders using native React components, handles events, and subscribes to WebSocket for real-time updates. AI-powered components render with a skeleton first and stream in when ready.

Vue

npm install @mashin/vue

<template>
  <MashinPage
    machine="dashboard"
    cell="https://your-cell.mashin.cloud"
    :auth="mashinKey"
  />
</template>

<script setup>
import { MashinPage } from "@mashin/vue"
</script>

Phoenix

mix.exs

{:mashin_phoenix, "~> 0.1"}

<.mashin_page
  machine="dashboard"
  cell="https://your-cell.mashin.cloud"
  auth={@mashin_key}
/>

Rails

# Gemfile
gem "mashin-rails"

<%= mashin_page "dashboard",
      cell: "https://your-cell.mashin.cloud",
      auth: ENV["MASHIN_API_KEY"] %>

iframe (any framework)

For frameworks without an SDK, iframe always works:

<iframe
  src="https://your-cell.mashin.cloud/dashboard?embed=true&auth=msk_your_key"
  style="width: 100%; height: 400px; border: none;"
></iframe>

The ?embed=true parameter strips the page chrome (no header, no footer).

API (full control)

For developers who want to render everything themselves:

const { output } = await fetch("https://your-cell.mashin.cloud/api/run", {
  method: "POST",
  headers: {
    "Authorization": "Bearer msk_your_key",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ query: "monthly revenue" })
}).then(r => r.json());
// Render output.revenue, output.orders with your own templates

Configuring embed access

In your machine source, declare which domains can embed:

expresses
  page
    title: "Dashboard"
    auth: oauth, api_key
    embed: "https://myapp.com", "https://staging.myapp.com"

The embed: config sets CORS headers and Content Security Policy for the declared domains.

Authentication

All SDK components handle auth the same way:

// API key (simple, for trusted environments)
<MashinPage machine="dashboard" auth="msk_your_key" />

// OAuth (secure, redirects to cell login)
<MashinPage machine="dashboard" auth="oauth" />

See also

• Custom Components - Build your own components
• Surface authentication - auth, scopes, allow
• Surfaces overview - All surface types