# 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.Login.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.Dashboard.Extensions;
using Elsa.Studio.Shell;
using Elsa.Studio.Shell.Extensions;
using Elsa.Studio.Workflows.Extensions;
using Elsa.Studio.Contracts;
using Elsa.Studio.Models;
using Elsa.Studio.Core.BlazorWasm.Extensions;
using Elsa.Studio.Extensions;
using Elsa.Studio.Login.BlazorWasm.Extensions;
using Elsa.Studio.Login.HttpMessageHandlers;
using Elsa.Studio.Workflows.Designer.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();
// Register shell services and modules.
var backendApiConfig = new BackendApiConfig
{
ConfigureBackendOptions = options => builder.Configuration.GetSection("Backend").Bind(options),
ConfigureHttpClientBuilder = options => options.AuthenticationHandler = typeof(AuthenticatingApiHttpMessageHandler)
};
builder.Services.AddCore();
builder.Services.AddShell();
builder.Services.AddRemoteBackend(backendApiConfig);
builder.Services.AddLoginModule();
builder.Services.UseElsaIdentity();
builder.Services.AddDashboardModule();
builder.Services.AddWorkflowsModule();
// Build the application.
var app = builder.Build();
// 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"
}
}
```
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: 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.