Skip to main content

​
Components

​
MioProvider

Wraps your React tree and ensures Mio is initialized exactly once.
app/providers.tsx
'use client';

import type { ReactNode } from 'react';
import { MioProvider } from '@mio-xyz/sdk/react';

export function Providers({ children }: { children: ReactNode }) {
  return (
    <MioProvider
      config={{
        clientId: process.env.NEXT_PUBLIC_MIO_CLIENT_ID!,
        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/api/mio/callback`,
        exchangeTokenUrl: '/api/exchange-token'
      }}
    >
      {children}
    </MioProvider>
  );
}
​
config.clientId
string
required
OAuth application ID from the Mio dashboard. Exposed to the browser.
​
config.redirectUrl
string
required
Absolute URL where Mio sends users back after the connection flow. Must match the value configured in the Mio dashboard.
​
config.exchangeTokenUrl
string
required
Backend endpoint that swaps authorization codes for tokens.

​
Hook: useMio()

Returns state helpers for driving the OAuth flow and Mio Context lookups.

​
Return values

​
isLoading
boolean
required
True while a request (connect, callback, context, summary) is in flight.
​
error
string | null
required
Last error message produced by the hook.
​
connect
() => Promise <void>
required
Kicks off the OAuth flow. Redirects immediately.
​
handleMioCallback
() => Promise <MioOauth2TokenResponse>
required
Parses the authorization code and exchanges it via the configured backend.
​
getContext
(options: GetContextRequestOptions) => Promise <string>
required
Fetches Mio Context for the given user and query.
​
getContextSummary
(options: MioSDKOptions) => Promise <string | null>
required
Fetches the latest stored Mio Context summary for the user.

​
Example usage

components/MioActions.tsx
'use client';

import { useEffect, useState } from 'react';
import { useMio } from '@mio-xyz/sdk/react';

export function MioActions() {
  const { connect, handleMioCallback, getContext, isLoading, error } = useMio();
  const [accessToken, setAccessToken] = useState<string | null>(null);

  useEffect(() => {
    handleMioCallback()
      .then(tokens => setAccessToken(tokens.accessToken))
      .catch(() => undefined);
  }, [handleMioCallback]);

  return (
    <div>
      <button onClick={connect} disabled={isLoading}>
        {isLoading ? 'Redirecting…' : 'Connect with Mio'}
      </button>
      <button
        onClick={() =>
          accessToken &&
          getContext({ query: 'Tell me about the user’s professional history', accessToken })
        }
        disabled={!accessToken || isLoading}
      >
        Get Mio Context
      </button>
      {error ? <p className="text-red-500">{error}</p> : null}
    </div>
  );
}
Because the hook invokes the same underlying SDK as Mio, it automatically respects whatever configuration and environment overrides you pass to Mio.init on the client.