Dev Portal Embeds Quickstart

1) Installing Speakeasy Components

note

You can alternatively see our NPM package for the full list of supported Speakeasy developer portal embeds and instructions.

npm install @speakeasy-api/react-embeds
#or 
yarn add @speakeasy-api/react-embeds

2) Authenticating Speakeasy Components

note

The following instructions are intended for those who want to get up and running quickly to begin testing. Before pushing your dev portal embeds, we recommend that people generate tokens via their SDK implementation. Refer to the SDK for the language you're using.

To get up and running quickly, use the dashboard at https://app.speakeasyapi.dev to generate a temporary token.

Once logged into the dashboard, select the Embed Tokens link from the navigation area on the left. On this page, there is a button labeled Create Access Token, which opens a modal that will generate a token. Note that access tokens generated through the dashboard must be restricted to a single Customer ID.

Note: access tokens generated through any of these methods are read-only.

3) Add the embed to your Developer Portal

export const App = () => {

    const embedToken = "TOKEN_GENERATED_IN_STEP 2"
  
    return (
        <>
            <h1>View your data</h1>
            <SpeakeasyRequestsComponent
                accessToken={embedToken}
            />
        </>
    )
}

If you have multiple components that are using the same access token, a SpeakeasyConfigure component can simplify the integration

const App = () => {

    const embedToken = "TOKEN_GENERATED_IN_STEP 2"

    return (
        <>        
          <h1>View your data</h1>
          <SpeakeasyConfigure
            accessToken={embedToken}
          >
            <SpeakeasyApiComponent />
            <SpeakeasyRequestsComponent />
          </SpeakeasyConfigure>
        <>
    );
}