### Terminal Installation Guide Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/03_Common/14_Terminal.md

Displays a multi-step installation process with commands and their outputs in a terminal format.

```csharp
Layout.Vertical()
    | new Terminal()
        .Title("Install MyApp")
        .AddCommand("npm install myapp")
        .AddOutput("added 42 packages in 3.2s")
        .AddCommand("myapp init")
        .AddOutput("Configuration created at ./myapp.config.json")
        .AddCommand("myapp start")
        .AddOutput("Server running at https://localhost:3000")
```

--------------------------------

### Basic Blade Navigation Setup

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/03_Common/12_Blades.md

Demonstrates the fundamental setup for blade navigation using `UseBlades` for the root view and `IBladeContext` for managing the blade stack. Includes examples of pushing new blades with default and custom widths, and navigating back.

```csharp
public class BladeNavigationDemo : ViewBase
{
    public override object? Build()
    {
        return UseBlades(() => new NavigationRootView(), "Home");
    }
}

public class NavigationRootView : ViewBase
{
    public override object? Build()
    {
        var blades = UseContext<IBladeContext>();
        var index = blades.GetIndex(this);

        return Layout.Horizontal().Height(Size.Units(50))
        | (Layout.Vertical()
            | Text.Block($"This is blade level {index}")
            | new Button($"Push Blade {index + 1}", onClick: _ =>
                blades.Push(this, new NavigationRootView(), $"Level {index + 1}"))
            | new Button($"Push Wide Blade", onClick: _ =>
                blades.Push(this, new NavigationRootView(), $"Wide Level {index + 1}", width: Size.Units(100)))
            | (index > 0 ? new Button("Go Back", onClick: _ => blades.Pop()) : null));
    }
}
```

--------------------------------

### Build Frontend with npm

Source: https://github.com/ivy-interactive/ivy-framework/wiki/Home

Install frontend dependencies, build the project, and start the development server using npm commands.

```bash
cd frontend
npm install
npm run build
npm run dev
```

--------------------------------

### Ivy CLI Quick Start Commands

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/01_CLIOverview.md

These are the basic commands to get started with an Ivy project. Ensure Ivy.Console is installed first.

```bash
>ivy init
>ivy upgrade
>ivy db add
>ivy auth add
>ivy deploy
```

--------------------------------

### Install Frontend Dependencies

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/widgets/Ivy.Widgets.Leaflet/README.md

Run this command in the frontend directory to install necessary dependencies.

```bash
cd frontend
npm install
```

--------------------------------

### Install .NET EF Tools

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/02_Init.md

Install the Entity Framework Core tools globally if they are missing.

```bash
>dotnet tool install -g dotnet-ef
>dotnet tool install -g dotnet-user-secrets
```

--------------------------------

### Info Callout Examples

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/01_Primitives/12_Callout.md

Provides examples of using `Callout.Info` for general information, tips, and helpful guidance. Includes examples with and without titles.

```csharp
public class InfoCalloutView : ViewBase
{
    public override object? Build()
    {
        return Layout.Vertical().Gap(4)
            | Callout.Info("Welcome to the new dashboard! Here you can monitor all your system metrics in real-time.")
            | Callout.Info("Pro tip: Use the search bar to quickly find what you're looking for.", "Quick Tip")
            | Callout.Info("This feature is currently in beta. Please report any issues you encounter.", "Beta Feature")
            | Callout.Info("Remember to save your work frequently. Auto-save is enabled every 5 minutes.", "Workflow Reminder");
    }
}
```

--------------------------------

### Example Program.cs Auth0 Configuration

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/04_Authentication/02_Auth0.md

This example shows how `UseAuth<Auth0AuthProvider>()` might be generated in Program.cs for Email/Password and Google authentication. Ensure the selected options match your Auth0 dashboard configuration.

```csharp
server.UseAuth<Auth0AuthProvider>(c => c.UseEmailPassword().UseGoogle());
```

--------------------------------

### Basic FileInput Setup

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/04_Inputs/10_FileInput.md

Demonstrates the basic setup of a FileInput widget by connecting a state variable to an upload context. This automatically handles file data management and progress tracking.

```csharp
public class BasicFileInputDemo : ViewBase
{
    public override object? Build()
    {
        var fileState = UseState<FileUpload<byte[]>?>();
        var upload = UseUpload(MemoryStreamUploadHandler.Create(fileState));
        return fileState.ToFileInput(upload);
   }
}
```

--------------------------------

### UseBlades Navigation Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/01_HookIntroduction.md

Demonstrates creating a multi-level blade navigation interface using UseBlades. This example shows how to push new blades onto the stack and navigate back.

```csharp
public class BladeNavigationDemo : ViewBase
{
    public override object? Build()
    {
        return UseBlades(() => new NavigationRootView(), "Home");
    }
}

public class NavigationRootView : ViewBase
{
    public override object? Build()
    {
        var blades = UseContext<IBladeContext>();
        var index = blades.GetIndex(this);

        return Layout.Horizontal().Height(Size.Units(50))
        | (Layout.Vertical()
            | Text.Block($"This is blade level {index}")
            | new Button($"Push Blade {index + 1}", onClick: _ =>
                blades.Push(this, new NavigationRootView(), $"Level {index + 1}"))
            | new Button("Push Wide Blade", onClick: _ =>
                blades.Push(this, new NavigationRootView(), $"Wide Level {index + 1}", width: Size.Units(100)))
            | (index > 0 ? new Button("Go Back", onClick: _ => blades.Pop()) : null));
    }
}
```

--------------------------------

### Install Frontend Dependencies

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/widgets/Ivy.Widgets.ActivityHeatmap/README.md

Installs frontend dependencies using pnpm. This is a prerequisite for building the frontend assets.

```bash
cd frontend
pnpm install
```

--------------------------------

### Comprehensive Responsive Layout Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/02_Layouts/10_ResponsiveDesign.md

A detailed example showcasing various responsive properties including gap, padding, visibility, orientation, density, size, and grid columns across different breakpoints.

```csharp
Layout.Vertical()
    .Gap(2.At(Breakpoint.Mobile).And(Breakpoint.Desktop, 6))
    .Padding(new Responsive<Thickness?>
    {
        Mobile = new Thickness(8),
        Desktop = new Thickness(24)
    })
    | new Badge("Large screens").HideOn(Breakpoint.Mobile, Breakpoint.Tablet)
    | new Badge("Phones").ShowOn(Breakpoint.Mobile)
    | (Layout.Horizontal()
        .Orientation(Orientation.Vertical.At(Breakpoint.Mobile)
            .And(Breakpoint.Desktop, Orientation.Horizontal))
        | new Button("Density")
            .Density(Density.Large.At(Breakpoint.Mobile)
                .And(Breakpoint.Desktop, Density.Medium))
        | new Box(Text.P("Sized box"))
            .Width(Size.Full().At(Breakpoint.Mobile)
                .And(Breakpoint.Desktop, Size.Half()))
            .Height(Size.Units(56).At(Breakpoint.Mobile)
                .And(Breakpoint.Desktop, Size.Units(40)))
            .Background(Colors.Primary))
    | (Layout.Grid()
        .Columns(1.At(Breakpoint.Mobile)
            .And(Breakpoint.Tablet, 2)
            .And(Breakpoint.Desktop, 3))
        | new Card("One")
        | new Card("Two")
        | new Card("Three"))
```

--------------------------------

### Install Refitter Tool

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-create-any-connection/SKILL.md

Installs the Refitter .NET tool globally. This is a prerequisite for generating API clients.

```bash
dotnet tool install --global refitter
```

--------------------------------

### Install dotnet-svcutil Tool

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-create-soap-connection/SKILL.md

Ensure the dotnet-svcutil tool is installed globally. This is a prerequisite for generating the SOAP client.

```bash
dotnet tool install --global dotnet-svcutil
```

--------------------------------

### Composed UI Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/ivyml/Ivy.IvyML/Docs/IVYML.md

A complex example combining Box, StackLayout, TextBlock, Separator, Badge, Progress, and Button components to create a project status display.

```xml
<Box Width="400px" Padding="6">
  <StackLayout>
    <TextBlock Content="Project Status" Variant="H3" />
    <TextBlock Content="Sprint 12 is 75% complete." Variant="Muted" />
    <Separator />
    <StackLayout>
      <Badge Title="Auth service" Variant="Success" />
      <Badge Title="Dashboard UI" Variant="Warning" />
      <Badge Title="API docs" Variant="Info" />
    </StackLayout>
    <Progress Value="75" />
    <StackLayout Orientation="Horizontal">
      <Button Title="View Details" Variant="Outline" />
      <Button Title="Mark Complete" Variant="Success" />
    </StackLayout>
  </StackLayout>
</Box>
```

--------------------------------

### Start Spanner Emulator on Windows

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/05_DatabaseIntegration/02_GoogleSpanner.md

Commands to start the Google Cloud Spanner emulator and initialize environment variables for Windows.

```bash
>gcloud emulators spanner start
>gcloud emulators spanner env-init > set_vars.cmd && set_vars.cmd
```

--------------------------------

### Project Initialization with Demo App and Custom Namespace

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/02_Init.md

Initialize a project that includes a 'hello world' demo app and a custom namespace.

```bash
>ivy init --helloworld --namespace MyDemoProject
```

--------------------------------

### Streamlit st.pills Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-convert-streamlit/references/st.pills.md

Demonstrates how to use st.pills for multi-select options in Streamlit. Ensure Streamlit is installed and imported.

```python
import streamlit as st

options = ["North", "East", "South", "West"]
selection = st.pills("Directions", options, selection_mode="multi")
st.markdown(f"Your selected options: {selection}.")
```

--------------------------------

### Basic UseQuery Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/02_Core/09_UseQuery.md

Demonstrates the basic usage of UseQuery with a key and a fetcher function. Shows how to handle loading states and display fetched data, including options to revalidate or invalidate the cache.

```csharp
public class BasicQueryView : ViewBase
{
    public override object? Build()
    {
        var query = UseQuery(
            key: "user-profile",
            fetcher: async ct =>
            {
                await Task.Delay(1000, ct);
                return new { Name = "Alice", Email = "alice@example.com" };
            });

        if (query.Loading) return "Loading...";

        return Layout.Vertical()
            | query //query has a Build extension that produces a debug view
            | query.Value?.Name
            | query.Value?.Email
            | (Layout.Horizontal() 
                | new Button("Revalidate", _ => query.Mutator.Revalidate()).Variant(ButtonVariant.Primary) 
                | new Button("Invalidate", _ => query.Mutator.Invalidate()).Variant(ButtonVariant.Primary)) 
                ;
    }
}
```

--------------------------------

### Full AppShell Configuration with Wallpaper and Tabs

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/11_AppShell.md

A complete example demonstrating how to define a custom WelcomeScreenApp, register it, and configure AppShellSettings to use it as the wallpaper, along with enabling tab navigation.

```csharp
public class WelcomeScreenApp : ViewBase
{
    public override object? Build()
        => Layout.Center(
            new Image("/ivy/img/brand-logo.svg").AltText("My Brand"),
            Text.H1("Welcome to My System")
        );
}

var server = new Server();
server.AddAppsFromAssembly();

var appShellSettings = AppShellSettings.Default()
    .WallpaperApp<WelcomeScreenApp>()
    .UseTabs();

server.UseAppShell(() => new DefaultSidebarAppShell(appShellSettings));
await server.RunAsync();
```

--------------------------------

### Basic DateRangeInput Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/04_Inputs/08_DateRangeInput.md

Demonstrates the fundamental usage of DateRangeInput to select a date range. The selected start and end dates can be accessed from the state.

```csharp
public class BasicDateRangeDemo : ViewBase
{
    public override object? Build()
    {
        var dateRangeState = UseState(() => (from: DateTime.Today.AddDays(-7), to: DateTime.Today));
        var start = dateRangeState.Value.Item1;
        var end = dateRangeState.Value.Item2;
        var span = $"That's {(end-start).Days} days";
        return Layout.Vertical()
                | dateRangeState.ToDateRangeInput()
                | Text.P(span).Large();
    }
}
```

--------------------------------

### Build Frontend and Backend

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/widgets/Ivy.Widgets.AnimatedStatusLabel/README.md

Install frontend dependencies and build the project, then build the .NET solution.

```bash
cd frontend && pnpm install && pnpm build
cd .. && dotnet build
```

--------------------------------

### Successful Startup Output

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/03_Run.md

Example of the terminal output when `ivy run` starts successfully, indicating hot reload is enabled and the application is accessible.

```terminal
dotnet watch 🔥 Hot reload enabled.
dotnet watch 💡 Press Ctrl+R to restart.
dotnet watch 🔨 Building /path/to/Project.csproj ...
dotnet watch 🔨 Build succeeded
Ivy is running on https://localhost:5010
```

--------------------------------

### Include Demo App

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/02_Init.md

Use the `--hello` option to include a simple demo application in your new Ivy project, which can be helpful for getting started.

```terminal
>ivy init --hello
```

--------------------------------

### Configure Authentication Providers

Source: https://context7.com/ivy-interactive/ivy-framework/llms.txt

Register authentication providers in Program.cs using server.UseAuth<TProvider>() and configure their options. This example shows setup for Supabase and Basic Authentication.

```csharp
// Program.cs — Supabase example
server.UseAuth<SupabaseAuthProvider>();
server.Services.Configure<SupabaseAuthOptions>(builder.Configuration.GetSection("Supabase"));

// Program.cs — Basic auth (username/password)
server.UseAuth<BasicAuthProvider>();
server.Services.Configure<BasicAuthOptions>(opt =>
{
    opt.Users = new[] { new BasicAuthUser("admin", "secret") };
});
```

--------------------------------

### Create New .NET Console Application

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/01_GettingStarted/02_Installation.md

Creates a new .NET console application and navigates into its directory. This is the starting point for manual Ivy project setup.

```bash
>dotnet new console -n MyIvyApp
>cd MyIvyApp
```

--------------------------------

### JobScheduler with Linear Dependencies

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/04_ApiReference/Ivy/JobScheduler.md

Illustrates setting up a JobScheduler where jobs have linear dependencies, ensuring that a job only starts after its prerequisites have finished. This example uses `DependsOn` to define the execution order and `ToView()` for UI rendering.

```csharp
public class DependencyGraphDemo : ViewBase
{
    public override object? Build()
    {
        var scheduler = UseRef(BuildScheduler).Value;
        var refresh = UseRefreshToken();

        UseEffect(() => scheduler.Subscribe(_ => refresh.Refresh()));

        return Layout.Vertical()
            | new Button("Run Pipeline", onClick: async _ => await scheduler.RunAsync())
            | scheduler.ToView();
    }

    private static JobScheduler BuildScheduler()
    {
        var scheduler = new JobScheduler(maxParallelJobs: 1);

        var extract = scheduler.CreateJob("Extract Data")
            .WithAction(async (_, _, progress, token) =>
            {
                await Task.Delay(300, token);
                progress.Report(1);
            })
            .Build();

        var transform = scheduler.CreateJob("Transform Data")
            .DependsOn(extract)
            .WithAction(async (_, _, progress, token) =>
            {
                await Task.Delay(300, token);
                progress.Report(1);
            })
            .Build();

        scheduler.CreateJob("Load Data")
            .DependsOn(extract, transform)
            .WithAction(async (_, _, progress, token) =>
            {
                await Task.Delay(300, token);
                progress.Report(1);
            })
            .Build();

        return scheduler;
    }
}
```

--------------------------------

### Simple Service Usage

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/02_Core/11_UseService.md

Access a single service like IClientProvider to display notifications or interact with client features. This example shows how to use UseService to get the client and then use it within a button's click handler.

```csharp
public class SimpleServiceView : ViewBase
{
    public override object? Build()
    {
        var client = UseService<IClientProvider>();
        var count = UseState(0);

        return Layout.Vertical()
            | Text.P($"Button clicked {count.Value} times")
            | new Button("Show Toast", onClick: _ =>
            {
                count.Set(count.Value + 1);
                client.Toast($"Notification #{count.Value}", "Service Demo");
            });
    }
}
```

--------------------------------

### Basic UseContext and CreateContext Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/02_Core/12_UseContext.md

Demonstrates creating a context with AppSettings and consuming it in a SettingsConsumer component. Ensure the context is created in a parent component before being consumed by a child.

```csharp
public record AppSettings(string Theme, int FontSize);

public class SettingsProvider : ViewBase
{
    public override object? Build()
    {
        CreateContext(() => new AppSettings("dark", 14));
        return new SettingsConsumer();
    }
}

public class SettingsConsumer : ViewBase
{
    public override object? Build()
    {
        var settings = UseContext<AppSettings>();
        return Text.Block($"Theme: {settings.Theme}, Size: {settings.FontSize}px");
    }
}
```

--------------------------------

### Ivy Table with Basic Column Configuration

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-convert-streamlit/references/st.column_config.progresscolumn.md

Illustrates a basic Ivy Table setup with a 'Volume' column, specifying its header and right alignment. This example highlights the absence of a built-in progress column type in Ivy tables.

```csharp
// Table with basic column configuration (no built-in progress column)
new Table<Sale>(sales)
    .Header(p => p.Volume, "Sales volume")
    .Align(p => p.Volume, Align.Right)
```

--------------------------------

### Authentication-Enabled Application Setup

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/01_Program.md

Sets up a server with Supabase authentication, enabling email/password and Google OAuth login.

```csharp
var server = new Server();
server.UseCulture("en-US");
server.UseHotReload();
server.AddAppsFromAssembly();
server.UseAppShell();
server.UseAuth<SupabaseAuthProvider>(c =>
    c.UseEmailPassword().UseGoogle());
await server.RunAsync();
```

--------------------------------

### Accessing Brokered OAuth Provider Tokens

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/04_Authentication/02_Supabase.md

Example of retrieving and using brokered session tokens, such as Google's access token, to make authenticated API calls. Ensure the relevant OAuth provider NuGet package is installed.

```csharp
var authService = UseService<IAuthService>();
var result = await authService.GetBrokeredSessionsAsync();

if (result.Sessions?.TryGetValue(OAuthProviders.Google, out var googleSession) == true)
{
    using var httpClient = new HttpClient();
    httpClient.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", googleSession.AuthToken?.AccessToken);

    var response = await httpClient.GetAsync("https://www.googleapis.com/drive/v3/files");
    // Process response...
}
```

--------------------------------

### Install Ivy CLI

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/README.md

Installs the Ivy CLI globally using the .NET tool installer.

```bash
dotnet tool install -g Ivy.Console
```

--------------------------------

### Configure and Run Server with Volume

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/15_Volume.md

Configure a FolderVolume for your application during server startup. This sets up the root directory for your application's data files.

```csharp
var server = new Server();

// Configure a volume for your application
var volume = new FolderVolume("/data/myapp");
server.UseVolume(volume);

await server.RunAsync();
```

--------------------------------

### Install Vite+ on macOS/Linux

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/README.md

Installs Vite+ using a curl command. Ensure you restart your terminal after installation.

```bash
curl -fsSL https://vite.plus | bash
```

--------------------------------

### Building Ivy.Analyser from Source

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Analyser/README.md

Provides the command-line instructions to clone the repository, build the analyzer, run tests, and pack the project.

```bash
git clone <repository-url>
cd Ivy.Analyser
dotnet build
dotnet test
dotnet pack
```

--------------------------------

### Install Vite+ on Windows (PowerShell)

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/README.md

Installs Vite+ using a PowerShell command. Ensure you restart your terminal after installation.

```powershell
irm https://vite.plus/ps1 | iex
```

--------------------------------

### Full Data Seeder Example in C#

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-generate-db-connection/references/DataSeederPrompt.md

This C# code demonstrates a comprehensive data seeder for an application, utilizing Bogus for data generation and Entity Framework Core for database interactions. It seeds various entities such as DealStates, Genders, Industries, Startups, Partners, Founders, and Deals, ensuring data is only added if tables are empty. It includes setup for relationships between entities.

```csharp
using Bogus;
using Microsoft.EntityFrameworkCore;
using System;

namespace ProjectNamespace;

public class DataSeeder
{
    public async System.Threading.Tasks.Task SeedAsync(DataContext context)
    {
        if (!await context.DealStates.AnyAsync())
        {
            var dealStateNames = new[] { "Sourced", "Due Diligence", "Investment Committee", "Term Sheet", "Closing", "Portfolio", "Exit", "Passed" };
            var newDealStates = dealStateNames.Select(name => new DealState { Name = name }).ToList();
            context.DealStates.AddRange(newDealStates);
            await context.SaveChangesAsync();
        }

        if (!await context.Genders.AnyAsync())
        {
            var genderNames = new[] { "Male", "Female", "Other" };
            var newGenders = genderNames.Select(name => new Gender { Name = name }).ToList();
            context.Genders.AddRange(newGenders);
            await context.SaveChangesAsync();
        }

        if (!await context.Industries.AnyAsync())
        {
            var industryNames = new[] { "Technology", "Healthcare", "Finance", "Consumer", "Ecommerce", "SaaS", "Biotech", "Robotics", "AI", "Blockchain" };
            var newIndustries = industryNames.Select(name => new Industry { Name = name }).ToList();
            context.Industries.AddRange(newIndustries);
            await context.SaveChangesAsync();
        }

        var dealStates = await context.DealStates.ToArrayAsync();
        var genders = await context.Genders.ToArrayAsync();
        var industries = await context.Industries.ToArrayAsync();

        if (!await context.Startups.AnyAsync())
        {
            var newStartups = new Faker<Startup>()
                .RuleFor(s => s.Name, f => {
                    var companyName = f.Company.CompanyName();
                    return companyName.Substring(0, Math.Min(100, companyName.Length));
                })
                .RuleFor(s => s.CreatedAt, f => f.Date.Between(DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                .RuleFor(s => s.UpdatedAt, (f, x) => f.Date.Between(x.CreatedAt ?? DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                .RuleFor(s => s.IndustryId, f => f.PickRandom(industries).Id)
                .Generate(200);
            context.Startups.AddRange(newStartups);
            await context.SaveChangesAsync();
        }

        var startups = await context.Startups.ToArrayAsync();

        if (!await context.Partners.AnyAsync())
        {
            var newPartners = new Faker<Partner>()
                .RuleFor(p => p.Name, f => f.Person.FullName)
                .RuleFor(p => p.Email, f => f.Internet.Email())
                .RuleFor(p => p.CreatedAt, f => f.Date.Between(DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                .RuleFor(p => p.UpdatedAt, (f, x) => f.Date.Between(x.CreatedAt ?? DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                .Generate(15);
            context.Partners.AddRange(newPartners);
            await context.SaveChangesAsync();
        }

        var partners = await context.Partners.ToArrayAsync();

        var faker = new Faker();

        if (!await context.Founders.AnyAsync())
        {
            var newFounders = new List<Founder>();
            foreach (var startup in startups)
            {
                var count = faker.Random.Int(1, 3);
                var startupFounders = new Faker<Founder>()
                    .RuleFor(f => f.Name, x => x.Name.FullName())
                    .RuleFor(f => f.Email, x => x.Internet.Email())
                    .RuleFor(f => f.GenderId, x => x.PickRandom(genders).Id)
                    .RuleFor(f => f.Age, x => x.Random.Int(20, 60))
                    .RuleFor(f => f.CreatedAt, f => f.Date.Between(DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                    .RuleFor(f => f.UpdatedAt, (f, x) => f.Date.Between(x.CreatedAt ?? DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow))
                    .RuleFor(f => f.StartupId, _ => startup.Id)
                    .Generate(count);
                newFounders.AddRange(startupFounders);
            }
            context.Founders.AddRange(newFounders);
            await context.SaveChangesAsync();
        }

        var founders = await context.Founders.ToArrayAsync();

        if (!await context.Deals.AnyAsync())
        {
            var newDeals = new List<Deal>();
            for (int i = 0; i < 200; i++)
            {
                newDeals.Add(new Deal
                {
                    CreatedAt = faker.Date.Between(DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow),
                    UpdatedAt = faker.Date.Between(DateTime.UtcNow.AddMonths(-2), DateTime.UtcNow),
                    StartupId = faker.PickRandom(startups).Id,
                    PartnerId = faker.PickRandom(partners).Id,
                    DealAmount = faker.Random.Int(100_000, 10_000_000),

```

--------------------------------

### Run Backend with dotnet watch (Ivy.Samples)

Source: https://github.com/ivy-interactive/ivy-framework/wiki/Home

Start the Ivy.Samples backend in watch mode using 'dotnet watch' for testing components.

```bash
cd Ivy.Samples
dotnet watch
```

--------------------------------

### Build Frontend

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/widgets/Ivy.Widgets.Leaflet/README.md

Execute this command to build the frontend assets.

```bash
npm run build
```

--------------------------------

### Install Frontend Dependencies with Vite+

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/frontend/README.md

Installs all necessary frontend project dependencies after Vite+ is installed. This command should be run from the frontend directory.

```bash
vp i
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/frontend/README.md

Installs the necessary browser binaries for Playwright end-to-end testing. This command should be run after `vp install` and from the frontend directory.

```bash
vp exec playwright install --with-deps
```

--------------------------------

### Ask for API Guidance

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-create-db-connection/SKILL.md

If you need help with creating a DbContext or registering a database connection, use the `ivy ask` command with relevant queries.

```bash
ivy ask "How do I create a DbContext?"
ivy ask "How do I register a database connection?"
```

--------------------------------

### Install Ivy CLI

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/01_GettingStarted/01_Introduction.md

Installs the Ivy CLI globally using the .NET SDK. Ensure you have the .NET 10 SDK installed before running this command.

```terminal
>dotnet tool install -g Ivy.Console
```

--------------------------------

### Create New Ivy Project

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/README.md

Initializes a new Ivy project. The --hello flag likely includes a sample application.

```bash
ivy init --hello
```

--------------------------------

### State Initialization Examples

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/02_Views.md

Illustrates different ways to initialize state using UseState: direct value, lazy initialization with a function, and state that does not trigger rebuilds.

```csharp
// Direct value
var count = UseState(0);

// Lazy initialization (called only once)
var expensiveData = UseState(() => ComputeExpensiveData());

// State that doesn't trigger rebuilds
var cache = UseState(new Dictionary<string, object>(), buildOnChange: false);
```

--------------------------------

### Basic FeedbackInput Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/04_Inputs/13_FeedbackInput.md

Demonstrates the basic usage of the FeedbackInput widget with default settings.

```csharp
public class BasicFeedbackDemo : ViewBase
{
    public override object? Build()
    {
        var rating = UseState(3);
        return rating.ToFeedbackInput();
    }
}
```

--------------------------------

### Verify Ivy CLI Installation

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/01_GettingStarted/01_Introduction.md

Checks if the Ivy CLI has been installed correctly by displaying its version.

```terminal
>ivy --version
```

--------------------------------

### UseWebhook Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/01_HookIntroduction.md

Demonstrates how to create an HTTP endpoint using UseWebhook to receive external requests and update component state. The endpoint URL is displayed, and call counts are tracked.

```csharp
public class WebhookDemo : ViewBase
{
    public override object? Build()
    {
        var callCount = UseState(0);
        var lastCalled = UseState(() => (DateTime?)null);
        
        var webhook = UseWebhook(_ =>
        {
            callCount.Set(callCount.Value + 1);
            lastCalled.Set(DateTime.Now);
        });
        
        return Layout.Vertical()
            | Text.P("Webhook Endpoint").Bold()
            | Text.Code(webhook.GetUri().ToString())
            | Text.P("Call this URL from external systems to trigger the handler").Small()
            | new Separator()
            | Text.P($"Called: {callCount.Value} times").Large()
            | (lastCalled.Value.HasValue 
                ? Text.P($"Last called: {lastCalled.Value.Value:HH:mm:ss}").Small()
                : Text.P("No calls yet").Small());
    }
}
```

--------------------------------

### Example Usage of SOAP Client

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-create-soap-connection/SKILL.md

Demonstrates how to obtain and use a SOAP client service within a view. Ensure the client is registered in `RegisterServices`.

```csharp
public class SomeView : ViewBase
{
    public object? Build()
    {
        var client = UseService<[ServiceClientClassName]>();
        // Call SOAP operations, e.g.:
        // var result = await client.SomeOperationAsync(request);
        ...
    }
}
```

--------------------------------

### Basic Project Initialization

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/02_Init.md

Use this command to create a new Ivy project in the current directory.

```bash
>mkdir MyIvyProject
>cd MyIvyProject
>ivy init
```

--------------------------------

### Basic UseNavigation Hook Usage

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/09_Navigation.md

Demonstrates how to obtain the navigator instance and perform navigation by URI, by type, and with arguments.

```csharp
var navigator = UseNavigation();

// Navigate by URI
navigator.Navigate("app://hooks/core/usestate");

// Navigate by type
navigator.Navigate(typeof(MyApp));

// Navigate with arguments
navigator.Navigate(typeof(MyApp), new MyArgs(123));
```

--------------------------------

### Verify Vite+ Installation

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/README.md

Checks if Vite+ is installed correctly by displaying its version. This command should be run after restarting your terminal.

```bash
vp --version
```

--------------------------------

### Run Sample App

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/widgets/Ivy.Widgets.ActivityHeatmap/README.md

Runs the sample application for the widget. This is useful for testing and demonstration purposes.

```bash
cd .samples
dotnet run
```

--------------------------------

### Install Vite+ CLI

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/README.md

Installs the Vite+ CLI globally using npm. This CLI is used for frontend orchestration.

```bash
npm install -g vite-plus
```

--------------------------------

### Retool Button Group Legacy Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-convert-retool/references/button-group-legacy.md

Example of controlling the visibility and scrolling of a Retool Button Group component.

```toolscript
buttonGroup1.setHidden(false);
buttonGroup1.scrollIntoView({ behavior: "smooth", block: "center" });
```

--------------------------------

### UseQuery Options and Conventions

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/claude-plugin/skills/ivy-create-using-reference-connection/references/AGENTS.md

Demonstrates key conventions for UseQuery keys and common options for configuring query behavior, such as KeepPrevious and RefreshInterval.

```csharp
var query = UseQuery(
    key: "my-data",
    fetcher: async (ct) => await LoadDataAsync(ct)
);
```

```csharp
var query = context.UseQuery(
        key: (nameof(UseMyRecords), filter),
        fetcher: async ct => { /*fetch*/ },
        tags: [typeof(T[])],
        options: new QueryOptions { KeepPrevious = true }
    );
```

--------------------------------

### Basic UseClipboard Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/02_Core/22_UseClipboard.md

This example demonstrates how to use the UseClipboard hook to copy a greeting message to the clipboard when a button is clicked.

```csharp
public class UseClipboardDemo : ViewBase
{
    public override object? Build()
    {
        var copyToClipboard = UseClipboard();

        return new Button("Copy greeting", _ =>
        {
            copyToClipboard("Hello, World!");
        });
    }
}
```

--------------------------------

### Adding Individual Applications

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/02_Concepts/01_Program.md

Illustrates methods for adding applications to the server individually, either by their type, by setting a default, or by using an AppDescriptor for more detailed configuration.

```csharp
// Add by type
server.AddApp(typeof(MyApp));
```

```csharp
// Add by type and set as default
server.AddApp(typeof(MyApp), isDefault: true);
```

```csharp
// Add using AppDescriptor
server.AddApp(new AppDescriptor
{
    Id = "my-app",
    Title = "My Application",
    ViewFunc = (context) => new MyView(),
    Group = ["Apps", "MyApp"],
    IsVisible = true
});
```

--------------------------------

### Example Generated Theme CSS

Source: https://github.com/ivy-interactive/ivy-framework/wiki/Framework-Design

An example of the CSS output generated by GenerateThemeCss, including variables for light and dark modes.

```css
<style id="ivy-custom-theme">
:root {
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --background: #ffffff;
  --foreground: #09090b;
  /* ... 40+ variables */
}
.dark {
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --background: #09090b;
  --foreground: #fafafa;
  /* ... */
}
</style>
```

--------------------------------

### Basic JobScheduler Setup and Execution

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/04_ApiReference/Ivy/JobScheduler.md

Demonstrates how to create a JobScheduler, define jobs with actions and dependencies, and trigger their execution. Use `UseRef` to hold the scheduler instance and `UseRefreshToken` with `UseEffect` to update the UI on job status changes. The `ToView()` extension method renders a hierarchical job monitor.

```csharp
public class JobsDashboard : ViewBase
{
    public override object? Build()
    {
        var scheduler = UseRef(BuildScheduler).Value;
        var refresh = UseRefreshToken();

        UseEffect(() => scheduler.Subscribe(_ => refresh.Refresh()));

        return Layout.Vertical()
            | new Button("Start Jobs", onClick: async _ => await scheduler.RunAsync())
            | scheduler.ToView();
    }

    private static JobScheduler BuildScheduler()
    {
        var scheduler = new JobScheduler(maxParallelJobs: 2);

        var initialize = scheduler.CreateJob("Initialize")
            .WithAction(async (_, _, progress, token) =>
            {
                await Task.Delay(300, token);
                progress.Report(1);
            })
            .Build();

        scheduler.CreateJob("Load Data")
            .DependsOn(initialize)
            .WithAction(async (_, _, progress, token) =>
            {
                await Task.Delay(500, token);
                progress.Report(1);
            })
            .Build();

        scheduler.CreateJob("Refresh Cache")
            .WithAction(async (_, _, progress, token) =>
            {
                for (var i = 0; i < 5; i++)
                {
                    await Task.Delay(100, token);
                    progress.Report((i + 1) / 5.0);
                }
            })
            .Build();

        return scheduler;
    }
}
```

--------------------------------

### Basic UseQuery with Error Handling

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/03_Hooks/02_Core/09_UseQuery.md

Demonstrates a basic UseQuery setup with loading and error states. The fetcher includes a simulated delay and a chance of network error. Error states are displayed using a Callout, with a retry button.

```csharp
var query = UseQuery(async ct =>
{
    await Task.Delay(1000, ct);
    if (Random.Shared.NextDouble() > 0.5)
        throw new Exception("Network error");
    return "Success!";
});

if (query.Loading)
    return Text.Literal("Loading...");

if (query.Error is { } error)
{
    return Layout.Vertical()
        | Callout.Error(error.Message)
        | new Button("Retry", _ => query.Mutator.Revalidate())
            .Variant(ButtonVariant.Outline);
}

return Layout.Vertical()
    | Text.Literal(query.Value ?? "")
    | new Button("Refresh", _ => query.Mutator.Revalidate())
        .Variant(ButtonVariant.Primary);

```

--------------------------------

### Code Documentation Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/02_Widgets/01_Primitives/01_TextBlock.md

Illustrates how to display code snippets within documentation using Text.Code, specifying the language.

```csharp
public class CodeDocDemo : ViewBase
{
    public override object? Build()
    {
        return Layout.Vertical()
            | Text.H3("TextHelper Class")
            | Text.P("The TextHelper class provides convenient methods for creating text elements:")
            | Text.Code("""
                public static TextBuilder H1(string content)
                {
                    return new TextBuilder(content, TextVariant.H1);
                }
                """, Languages.Csharp)
            | Text.Blockquote("Note: All Text helper methods return a TextBuilder that supports method chaining for modifiers.")
            | Text.P("Common modifiers include:")
            | Text.Block("• Color() - Set text color")
            | Text.Block("• Width() - Set text width")
            | Text.Block("• StrikeThrough() - Add strikethrough styling")
            | Text.Block("• NoWrap() - Prevent text wrapping");
    }
}
```

--------------------------------

### Install Cursor MCP Integration

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/02_Init.md

After project creation, use the `--cursor` flag to automatically install the Cursor MCP integration.

```terminal
>ivy init --cursor
```

--------------------------------

### Ivy Project Structure Example

Source: https://github.com/ivy-interactive/ivy-framework/blob/development/src/Ivy.Docs.Shared/Docs/01_Onboarding/03_CLI/01_CLIOverview.md

This illustrates the standard directory and file structure of an Ivy project, including key directories like Apps/, Connections/, and .ivy/.

```text
YourProject/
├── Program.cs              # Main project entry point
├── YourProject.csproj      # .NET project file
├── README.md               # Project documentation
├── Apps/                   # User interface code
├── Connections/            # Database connections
│   └── [ConnectionName]/   # Individual connection configs
├── .ivy/                   # Ivy-specific configuration, only created by Ivy CLI when necessary
└── .gitignore              # Git ignore file
```