> For the complete documentation index, see [llms.txt](https://docs.elsaworkflows.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elsaworkflows.io/application-types/elsa-studio.md).
# Elsa Studio
Elsa Studio is a Blazor application that let's you manage workflows through a UI. The application is essentially a SPA that connects to an Elsa Server as its back-end.
## Setup
To setup Elsa Studio, we'll go through the following steps:
{% hint style="warning" %}
**Deprecation warning**
The `blazorwasm-empty` template is [dicontinued since .NET 8.0](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new-sdk-templates).\
If you are using .NET 8.0+, you can just use `blazorwasm` instead of `blazorwasm-empty`.
{% endhint %}
1. **Create a New Blazor Webassembly App**
Execute the following command in the terminal:
```bash
dotnet new blazorwasm -n "ElsaStudioBlazorWasm"
```
\\
2. **Add Elsa Studio Packages**
Navigate to the root directory of your project and integrate the following Elsa Studio packages:
```
cd ElsaStudioBlazorWasm
dotnet add package Elsa.Studio
dotnet add package Elsa.Studio.Core.BlazorWasm
dotnet add package Elsa.Studio.Authentication.ElsaIdentity.BlazorWasm
dotnet add package Elsa.Studio.Authentication.ElsaIdentity.UI
dotnet add package Elsa.Studio.Authentication.OpenIdConnect.BlazorWasm
dotnet add package Elsa.Studio.Localization.BlazorWasm
dotnet add package Elsa.Api.Client
```
3. **Modify Program.cs**
Open the `Program.cs` file and replace its existing content with the code provided below:
**Program.cs**
```csharp
using Elsa.Studio.Authentication.ElsaIdentity.BlazorWasm.Extensions;
using Elsa.Studio.Authentication.ElsaIdentity.HttpMessageHandlers;
using Elsa.Studio.Authentication.ElsaIdentity.UI.Extensions;
using Elsa.Studio.Authentication.OpenIdConnect.BlazorWasm.Extensions;
using Elsa.Studio.Authentication.OpenIdConnect.HttpMessageHandlers;
using Elsa.Studio.Contracts;
using Elsa.Studio.Core.BlazorWasm.Extensions;
using Elsa.Studio.Dashboard.Extensions;
using Elsa.Studio.Extensions;
using Elsa.Studio.Localization.BlazorWasm.Extensions;
using Elsa.Studio.Localization.Models;
using Elsa.Studio.Models;
using Elsa.Studio.Shell;
using Elsa.Studio.Shell.Extensions;
using Elsa.Studio.Workflows.Designer.Extensions;
using Elsa.Studio.Workflows.Extensions;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
// Build the host.
var builder = WebAssemblyHostBuilder.CreateDefault(args);
var configuration = builder.Configuration;
// Register root components.
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");
builder.RootComponents.RegisterCustomElsaStudioElements();
// Choose authentication provider.
// Supported values: "OpenIdConnect" or "ElsaIdentity".
var authProvider = configuration["Authentication:Provider"];
if (string.IsNullOrWhiteSpace(authProvider))
authProvider = "ElsaIdentity";
Type authenticationHandler;
if (authProvider.Equals("ElsaIdentity", StringComparison.OrdinalIgnoreCase))
{
// Elsa Identity (username/password against Elsa backend) + login UI at /login.
builder.Services.AddElsaIdentity();
builder.Services.AddElsaIdentityUI();
authenticationHandler = typeof(ElsaIdentityAuthenticatingApiHttpMessageHandler);
}
else if (authProvider.Equals("OpenIdConnect", StringComparison.OrdinalIgnoreCase))
{
// OpenID Connect.
builder.Services.AddOpenIdConnectAuth(options =>
{
configuration.GetSection("Authentication:OpenIdConnect").Bind(options);
});
authenticationHandler = typeof(OidcAuthenticatingApiHttpMessageHandler);
}
else
{
throw new InvalidOperationException($"Unsupported Authentication:Provider value '{authProvider}'. Supported values are 'OpenIdConnect' and 'ElsaIdentity'.");
}
// Register shell services and modules.
var backendApiConfig = new BackendApiConfig
{
ConfigureBackendOptions = options => builder.Configuration.GetSection("Backend").Bind(options),
ConfigureHttpClientBuilder = options => options.AuthenticationHandler = authenticationHandler
};
var localizationConfig = new LocalizationConfig
{
ConfigureLocalizationOptions = options => configuration.GetSection("Localization").Bind(options)
};
builder.Services.AddCore();
builder.Services.AddShell();
builder.Services.AddRemoteBackend(backendApiConfig);
builder.Services.AddDashboardModule();
builder.Services.AddWorkflowsModule();
builder.Services.AddLocalizationModule(localizationConfig);
// Build the application.
var app = builder.Build();
await app.UseElsaLocalization();
// Run each startup task.
var startupTaskRunner = app.Services.GetRequiredService();
await startupTaskRunner.RunStartupTasksAsync();
// Run the application.
await app.RunAsync();
```
4. **Remove Unnecessary Files**
For a cleaner project structure, delete the following directories and files:
* wwwroot/css
* Pages
* App.razor
* MainLayout.razor
* MainLayout.razor.css
* \_Imports.razor
5. **Generate appsettings.json**
Within the `wwwroot` directory, create a new `appsettings.json` file and populate it with the following content:
wwwroot/appsettings.json
```json
{
"Backend": {
"Url": "https://localhost:5001/elsa/api"
},
"Authentication": {
"Provider": "OpenIdConnect",
"OpenIdConnect": {
"Authority": "https://login.microsoftonline.com/{tenant-id}/v2.0",
"ClientId": "{client-id}",
"AuthenticationScopes": [
"openid",
"profile",
"offline_access"
],
"BackendApiScopes": [
"api://{backend-api-client-id}/elsa-server-api"
]
}
},
"Localization": {
"DefaultCulture": "en-US",
"SupportedCultures": [
"en-US"
]
}
}
```
`AuthenticationScopes` are requested during sign-in. `BackendApiScopes` are requested when Studio obtains an access token for the Elsa Server API. Some identity providers require the backend API scope in the original sign-in grant as well; if token acquisition or refresh fails for the backend API scope, include the same scope in both `AuthenticationScopes` and `BackendApiScopes`.
Because this example is a Blazor WebAssembly host, register `{studio-url}/authentication/login-callback` as the redirect URI and `{studio-url}/authentication/logout-callback` as the logout callback URI. Studio initiates logout at `{studio-url}/authentication/logout`.
6. **Update index.html**
To conclude the setup, open the `index.html` file and replace its content with the code showcased below:
**wwwroot/index.html**
```html
Elsa Studio
```
## Launch the Application
To see your application in action, execute the following command:
```bash
dotnet run --urls https://localhost:6001
```
Your application is now accessible at [https://localhost:6001](https://localhost:6001/).
By default, you can log in using:
```
username: admin
password: password
```
## Source Code
The source code for this chapter can be found [here](https://github.com/elsa-workflows/elsa-guides/tree/main/src/installation/elsa-studio/ElsaStudioBlazorWasm)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.elsaworkflows.io/application-types/elsa-studio.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.