Skip to main content

Getting Started

Welcome to brokerize! This guide will walk you through the first steps to integrate the brokerize platform into your application. As a partner, you get access to a complete multi-brokerage solution with pre-built UI components and a powerful API.

Overview of the brokerize Ecosystem​

The brokerize ecosystem consists of several core components that work seamlessly together:

🔧 @brokerize/client​

  • JavaScript/TypeScript library for API communication
  • Authentication and session management
  • WebSocket support for real-time updates
  • Complete TypeScript type definitions

More Details: brokerize client Documentation

🎨 @brokerize/elements​

  • Pre-built UI components for trading interfaces
  • Framework agnostic (React, Vue, Angular, Vanilla JS)
  • Fully customizable themes
  • Web Components standard

🌐 brokerize API​

  • RESTful API for all brokerage functions
  • WebSocket streams for real-time data
  • Comprehensive OpenAPI documentation
  • Multi-broker support

Quick Start Options​

Show Details

This repository is a minimalistic showcase for integrating @brokerize/elements in a website or web application.

Prerequisites: Tokens​

You need a CLIENT_ID for accessing the brokerize API (usually you start off with the test system under https://api-preview.brokerize.com). This can be created on app-preview.brokerize.com/admin. For detailed instructions, see the article Create Client ID. Note that you have to register as a user first.

If it is applicable for your client, brokerize support will provide you with a COGNITO_CLIENT_ID (if your client is enabled to work for registered brokerize users). This is usually not the case and the config option can be ignored.

To install the dependencies, just run:

npm install

Configuration​

Add your CLIENT_ID (and, if applicable, COGNITO_CLIENT_ID) to the config.js file.

Run the example​

Due to CORS restrictions, the example should usually be run on some URL like http://localhost:8080. If you have created the CLIENT_ID on your own, you can configure the allowed origins and redirect URIs under app-preview.brokerize.com/admin.

Just serve the content, for example by running:

npx http-server -p 8080

Available examples​

How to log in to a broker​

By default, new client ids may only access the "demo broker". Therefore, the BrokerList will only present one broker logo ("brokerize") to allow testing of the UI components. Once your frontend is ready to be tested, the client can be enabled to work with all our supported brokers. The demo broker is supposed to simulate many edge cases that are hard to reproduce in real broker environments. See Demo Broker for a description of the demo broker's behavior.

In order to log in to a demo account, you first need to create one. Just follow these simple steps:

  1. Navigate to app-preview.brokerize.com
  2. There, either register/login or use a guest login
  3. In the top navigation bar, select "Demo broker"
  4. There you can simply create a demo account
  5. Copy the generated Account Name
  6. Back in the example app (http://localhost:8080), log in to the demo broker using the account name and password 42 (or 1337 if you want to test 2-factor login process).

Option 2: New Integration from Scratch​

Show Details

For a new integration into your existing project:

npm install @brokerize/elements @brokerize/client

Implementation Approaches​

🚀 Main Component (Recommended)​

The simplest solution - an all-in-one component:

The Main Component is a single web component (<brokerize-main>) that combines all trading functionalities. After short configuration, you add an HTML tag to your page and immediately get a complete trading interface with broker selection, portfolio view and order functions. This solution is perfect for standard use cases where you need a functional trading integration quickly.

Advantages:

  • ⚡ Fast integration without much effort
  • 🔄 All features work directly together
  • 🎨 Theming possible

More Details: Main Component Documentation

🔧 Custom Components (For Advanced Customizations)​

Maximum flexibility through individual components:

Custom Components allow you to use individual brokerize components separately and position them individually. Instead of an all-in-one solution, you get access to specific components like broker list, portfolio table or order form, which you can arrange according to your wishes. This approach is ideal when you want to create a customized user interface or integrate only certain trading features into your existing application.

Advantages:

  • 🎯 Selective functionality
  • 🏗️ Custom layouts
  • 🔀 Own user guidance

More Details: Custom Components Documentation

Environments​

Preview Environment (Development & Testing)​

For development and testing, use our preview environment:

API Endpoint: https://api-preview.brokerize.com
Web App: https://app-preview.brokerize.com

Production Environment​

For live applications:

API Endpoint: https://api.brokerize.com
Web App: https://app.brokerize.com

Production Access

For production credentials, contact our partner team.

Next Steps​

1. Gain Hands-On Experience​

git clone https://github.com/brokerize/elements-example
cd elements-example && npm install && npm start

2. Explore Documentation​

3. Plan Integration​

  • Choose between Main Component or Custom Components
  • Define your theme and branding
  • Plan your user flow

4. Get Support​

  • Technical Questions: Use our documentation
  • Partnership: Contact our partner team
  • Updates: Follow our Changelog
Recommendation

Start with the elements-example repository and the Main Component. This combination offers the fastest way to a functional integration.

Welcome to the brokerize ecosystem! 🚀