Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • Generate your Extension App
  • Create Application
  • Start your App
  • Test your App
  • Next Steps

Was this helpful?

Export as PDF
  1. Extension Apps
  2. Getting Started

Getting Started with ADK

The App Developer Kit (ADK) is the preferred tooling for web developers to get started building extension apps on Symphony

Last updated 1 year ago

Was this helpful?

Generate your Extension App

The offers a fast way to bootstrap your Symphony extension app project.

Prerequisite: Install NodeJS first, either or via . You can also use other package managers like or , which the generator will attempt to use before falling back to npm.

First, install yeoman and the Symphony Generator.

$ npm i -g yo @finos/generator-symphony
$ yarn global add yo @finos/generator-symphony
$ bun add -g yo @finos/generator-symphony

Then, create a directory for your new app project and launch the generator.

$ mkdir my-app && cd $_
$ yo @finos/symphony

This will prompt you with a number of questions about your app and pod configuration. Type in your app ID, using arrow keys to scroll and press enter to move on to the next prompt.

When prompted for Select your type of application, choose Extension App (ADK). You then have a choice of different project types:

  • Basic - simple project to demonstrate initialization

  • App View - uses React with either JavaScript or TypeScript to create app views

  • Message Renderer - overrides rendering of messages with custom formatting

If you require an extension app that requires user identity, you will also need a backend that can perform the process. You should then select the Extension App + Circle of Trust (ADK + BDK) option, which will generate both the extension app project using ADK and a backend project using BDK that will perform the app authentication and validation.

 __   __     ___                 _
 \ \ / /__  / __|_  _ _ __  _ __| |_  ___ _ _ _  _
  \ V / _ \ \__ \ || | '  \| '_ \ ' \/ _ \ ' \ || |
   |_|\___/ |___/\_, |_|_|_| .__/_||_\___/_||_\_, |
                 |__/      |_|                |__/

Welcome to Symphony Generator v2.9.0
Project files will be generated in folder: /Users/user/code/my-app
______________________________________________________________________________________________________
? Enter your pod host develop2.symphony.com
? Select your project type Extension App (ADK)
? Enter your app id my-app
? Select your application type Basic

Using ADK Version: 1.3.0
   create package.json
   create bundle.json
   create webpack.config.js
   create src/index.js

bun install v1.0.3 (25e69c71)
 + @symphony-ui/adk-webpack@1.3.0
 + webpack@5.88.2
 + webpack-cli@5.1.4
 + webpack-dev-server@4.15.1
 + @symphony-ui/adk@1.3.0

 356 packages installed [3.91s]

Your Extension App project has been successfully generated!

To launch your project, first run: bun start
Then, visit https://localhost:4000/controller.html and dismiss the warning
Finally, visit https://develop2.symphony.com/?bundle=https://localhost:4000/bundle.json

Create Application

When you are ready to deploy your app permanently (or if you require Circle of Trust), follow the instructions on this page to setup your app.

Start your App

$ npm start # or yarn start or bun start

$ webpack-dev-server --mode=development
SYMPHONY ADK 1.3.0
Building application: my-app
Running at: /Users/user/code/my-app
<i> [webpack-dev-server] Generating SSL certificate...
<i> [webpack-dev-server] SSL certificate: /Users/user/code/my-app/node_modules/.cache/webpack-dev-server/server.pem
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:4000/
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.1.2:4000/
<i> [webpack-dev-server] On Your Network (IPv6): https://[fe80::1]:4000/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/user/code/my-app/node_modules/@symphony-ui/adk-webpack/dist' directory
Entrypoint controller 450 KiB = vendors.c3acceed.js 404 KiB controller.26a834b5.js 46.4 KiB
webpack compiled in 750 ms

Test your App

  1. Acknowledge the developer mode notice. Your app is now loaded.

Next Steps

Each project type in the generator corresponds to one of the guides below. Read the respective guide for explanations of how to use ADK.

A browser window should launch with the URL . If it doesn't, visit that page manually. Dismiss the security warning and close the page.

Visit to inject the running app temporarily into a pod for testing

Symphony Generator
directly
nvm
bun
yarn
Circle of Trust
Add an Extension App to a Symphony Pod
https://localhost:4000/controller.html
https://develop2.symphony.com/?bundle=https://localhost:4000/bundle.json
Build a Basic Extension App
Build an Extension App with App Views
Build an Extension App with Message Renderers