Custom Code Generation and Technical Assistant

Custom Code Generation extends standard UML-to-code generation by letting you describe additional components in plain English. The Technical Assistant is your AI-powered guide that understands your project context and generates dashboards, forms, charts, API integrations, and more—all tailored to your domain model.

This tutorial shows how to use both features to build a complete application faster.

What is the Technical Assistant?

The Technical Assistant is an AI chat interface built into EcosystemCode. It’s context-aware—it knows your current project, diagrams, and entities. You can use it to:

• Suggest attributes and methods for class elements
• Add elements to diagrams based on descriptions
• Generate entire diagrams from system descriptions
• Create new projects from conversation
• Generate custom extensions (dashboards, forms, charts, etc.)

Traditional approach:
  UML → Generate → Manually add dashboard, forms, integrations

With Technical Assistant:
  UML → Generate → Ask assistant "Create a dashboard for Orders" → Done

The assistant understands your domain. If you have an Order entity with status, total, and createdAt fields, asking for “an orders dashboard” automatically references those fields.

What is Custom Code Generation?

Custom Code Generation goes beyond the standard clean architecture output. While standard generation creates:

• Domain entities from class diagrams
• Use cases from sequence diagrams
• Controllers and routes from your API design
• Repository interfaces and implementations

Custom Code Generation adds plugins—user-generated components that extend your application:

How It Works: Natural Language to Code

The Technical Assistant parses your requests and infers what you want to build:

User: "Create a dashboard showing order metrics and sales trends"

Assistant detects:
  ├─ Intent: Generate extension
  ├─ Plugin type: Dashboard
  ├─ Target entities: Order, Sale
  └─ Requested components: metrics, trend chart

You review the generated configuration, then click Generate. The system produces:

• React components for the dashboard
• Data fetching hooks
• API routes for aggregations
• Styled components matching your project theme

Tutorial: Building Custom Components

Step 1: Open the Technical Assistant

In any project page, click the chat icon in the bottom-right corner. The assistant opens in a panel:

┌─────────────────────────────────────────────────┐
│  Technical Assistant                      _ □ × │
├─────────────────────────────────────────────────┤
│                                                 │
│  Hi! I can help you model, validate, and       │
│  generate code. What would you like to build?  │
│                                                 │
├─────────────────────────────────────────────────┤
│  Ask about your diagrams...              [Send] │
└─────────────────────────────────────────────────┘

The assistant adapts to your current page:

• Landing page: Create projects, ask about features
• Diagram editor: Add elements, suggest fields, generate related diagrams
• Project settings: Configure generation options, enable plugins

Step 2: Generate a Dashboard

Let’s create a dashboard for a project management system with Task, Project, and User entities.

Prompt:

Create a dashboard showing task completion metrics, 
tasks by status distribution, and project progress over time

What the assistant generates:

1. Task Completion Metric — Count of completed tasks
2. Tasks by Status Chart — Pie chart showing TODO, IN_PROGRESS, DONE distribution
3. Project Progress Chart — Line chart showing completion trends

The assistant responds with a confirmation card:

┌───────────────────────────────────────────────────────┐
│  📊 Dashboard Extension                               │
├───────────────────────────────────────────────────────┤
│  Name: Task Analytics Dashboard                       │
│  Type: Dashboard                                      │
│                                                       │
│  Components:                                          │
│  • Task completion metric (count)                     │
│  • Tasks by status (pie chart)                        │
│  • Project progress (line chart)                      │
│                                                       │
│  Target entities: Task, Project                       │
│                                                       │
│  [Generate Extension]  [Edit Configuration]           │
└───────────────────────────────────────────────────────┘

Click Generate Extension to add it to your project.

Step 3: Generate a Custom Form

Forms are essential for data entry. The assistant generates forms that match your entities:

Prompt:

Build a wizard form for creating new projects with 
team selection and initial task setup

Generated output:

• Step 1: Project details (name, description, deadline)
• Step 2: Team selection (multi-select from User entity)
• Step 3: Initial tasks (repeatable task entry)
• Step 4: Review and submit

Form types supported:

Step 4: Generate API Integrations

Connect to external services without writing boilerplate:

Prompt:

Create an API integration to fetch customer data from 
https://api.example.com/customers using bearer token authentication

Generated components:

// Generated: src/adapters/external/CustomerApiAdapter.ts
export class CustomerApiAdapter implements CustomerPort {
  private readonly baseUrl = 'https://api.example.com';
  
  async fetchCustomer(id: string): Promise<Customer> {
    const response = await fetch(`${this.baseUrl}/customers/${id}`, {
      headers: {
        'Authorization': `Bearer ${this.getToken()}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new ApiError('Failed to fetch customer', response.status);
    }
    
    return this.mapToCustomer(await response.json());
  }
  
  // ... error handling, retry logic, response mapping
}

The integration includes:

• Authentication handling (Bearer, API key, Basic)
• Error handling with retries
• Response mapping to your domain types
• TypeScript types for the external API

Step 5: Generate Charts

For standalone visualizations:

Prompt:

Create a radar chart comparing team performance 
across velocity, quality, and collaboration metrics

Supported chart types:

• Bar, Line, Area
• Pie, Donut
• Radar
• Scatter, Heatmap
• Treemap, Funnel
• Gauge

Each chart is generated with:

• Data fetching from your entities
• Responsive layout
• Theme-aware styling
• Loading and error states

Using the Technical Assistant for Modeling

Beyond extensions, the assistant helps with your core UML modeling:

Suggest Fields for Classes

Prompt (on Class Diagram page):

Suggest attributes and methods for the Order entity

Response:

┌───────────────────────────────────────────────────────┐
│  Suggested fields for Order                           │
├───────────────────────────────────────────────────────┤
│  Attributes:                                          │
│  ☑ id: OrderId                                        │
│  ☑ customerId: CustomerId                             │
│  ☑ items: OrderItem[]                                 │
│  ☑ status: OrderStatus                                │
│  ☑ total: Money                                       │
│  ☐ shippingAddress: Address                           │
│  ☐ createdAt: Date                                    │
│                                                       │
│  Methods:                                             │
│  ☑ addItem(item: OrderItem): void                     │
│  ☑ calculateTotal(): Money                            │
│  ☐ ship(): void                                       │
│                                                       │
│  [Apply Selected]  [Dismiss]                          │
└───────────────────────────────────────────────────────┘

Select the fields you want and click Apply Selected to add them to your diagram.

Add Elements to Diagrams

Prompt:

Add a PaymentService class that handles payment processing

The assistant creates the element with appropriate stereotypes, methods, and relationships to existing entities.

Generate Entire Diagrams

Prompt:

Generate a sequence diagram for the checkout workflow

The assistant creates a new diagram with:

• Participants from your class diagram
• Logical message flow
• Return values and guards
• Notes for complex steps

Style Options

When generating UI components, you can specify styling preferences:

Prompt:

Create a modern dashboard with dark theme for inventory management

Generated Code Structure

Custom-generated components follow the same clean architecture as your main codebase:

Generated Project:
├── src/
│   ├── domain/           # From UML class diagrams
│   ├── application/      # From UML sequence diagrams
│   ├── adapters/         # Generated adapters + API integrations
│   ├── infrastructure/   # Controllers, routes
│   │
│   └── extensions/       # Custom-generated components
│       ├── dashboards/
│       │   └── TaskAnalyticsDashboard/
│       │       ├── TaskAnalyticsDashboard.tsx
│       │       ├── hooks/
│       │       │   └── useTaskMetrics.ts
│       │       └── components/
│       │           ├── TaskCompletionCard.tsx
│       │           ├── StatusPieChart.tsx
│       │           └── ProgressLineChart.tsx
│       │
│       ├── forms/
│       │   └── ProjectWizardForm/
│       │       ├── ProjectWizardForm.tsx
│       │       ├── steps/
│       │       └── validation/
│       │
│       └── api-integrations/
│           └── CustomerApi/
│               ├── CustomerApiAdapter.ts
│               └── types.ts

Best Practices

1. Be specific about entities

Bad: “Create a dashboard” Good: “Create a dashboard for Orders showing status distribution and daily revenue”

2. Reference your domain model

The assistant knows your entities. Use their names:

✓ "Generate a form for creating Tasks with Project assignment"
✗ "Generate a generic task entry form"

3. Specify the style early

"Create a minimal, light-themed dashboard for HR metrics"

4. Iterate in conversation

The assistant remembers context. You can refine:

You: "Create an orders dashboard"
Assistant: [generates dashboard]
You: "Add a filter by date range"
Assistant: [adds date range filter to same dashboard]

5. Use for exploration

Ask the assistant to explain before generating:

"What charts would make sense for a sales pipeline?"

Plugin Types Reference

Dashboard

Prompt: "Create a dashboard for [Entity] with [metrics/charts]"

Generates:
- Metric cards with real-time data
- Charts (bar, line, pie, etc.)
- Data grid with filtering
- Refresh controls

Form

Prompt: "Build a [simple/wizard/continuous] form for [Entity]"

Generates:
- Form fields from entity attributes
- Validation rules
- Submit handling
- Success/error states

Chart

Prompt: "Create a [type] chart showing [metric] by [dimension]"

Generates:
- Chart component with data fetching
- Responsive container
- Legend and tooltips
- Loading skeleton

API Integration

Prompt: "Connect to [URL] to [action] using [auth type]"

Generates:
- Adapter implementing port interface
- Authentication handling
- Error handling with retries
- Type definitions

Custom Page

Prompt: "Build a [template] page for [purpose]"

Templates: blank, sidebar, tabs, split

Generates:
- Page layout component
- Nested sections (charts, forms, tables)
- Navigation integration

Backend Service

Prompt: "Create an API endpoint for [action]"

Generates:
- Controller with route
- Service implementation
- Request/response types
- Validation middleware

Frequently Asked Questions

Can I regenerate a component?

Yes. Each plugin stores its original prompt. Go to Project Settings → Plugins, find the component, and click Regenerate.

Do generated components use my entities?

Yes. The assistant reads your class diagrams and generates code that references your actual domain types.

What about styling consistency?

Generated components use CSS variables from your main stylesheet. They automatically match your theme.

Can I customize generated code?

Absolutely. The generated code is yours to modify. It follows the same patterns as the rest of your codebase.

How do I add multiple dashboards?

Each prompt creates a new plugin instance. You can have multiple dashboards, each with different focus areas.

Next Steps

• Try the Technical Assistant: Interactive Demo
• Generate a dashboard: Ask “Create a dashboard for [your entity]”
• Learn about standard generation: Model-Driven Development Tutorial
• Generate clean architecture: TypeScript Clean Architecture Generator

Ready to extend your generated codebase? Start building free.