Assembly allows you to create internal tools that can significantly enhance your team’s productivity and data insights. This guide will walk you through the process of using Assembly to build complex dashboards and other internal tools, leveraging popular libraries like recharts, Lucide-react, @xyflow/react (ReactFlow), and shadcn.

​
Getting Started

Before diving into building internal tools with Assembly, ensure you have:

  1. Access to Assembly
  2. A clear understanding of your internal tool requirements
  3. Familiarity with some frontend frameworks and libraries (e.g., React, recharts)

If you’re new to Assembly, check out our Quickstart Guide to set up your environment.

​
Key Libraries

Assembly can help you work with several powerful libraries to create sophisticated internal tools:

recharts

A composable charting library built on React components

Lucide-react

A beautiful and consistent icon set with React components

@xyflow/react (ReactFlow)

A library for building node-based editors, workflows and interactive diagrams

shadcn/ui

A collection of re-usable components built with Radix UI and Tailwind CSS

​
Building Internal Tools Workflow

​
1. Requirements Gathering

Start by clearly defining the requirements for your internal tool. Assembly can help you organize and refine these requirements:

1

Define Objectives

Ask Assembly to help clarify your tool’s objectives:

“I need to create an internal dashboard for our sales team. Can you help me outline the key objectives this dashboard should achieve?”

2

Identify Key Features

Use Assembly to brainstorm and prioritize features:

“Based on these objectives, what key features would you recommend for our sales dashboard? Please prioritize them based on importance and complexity.”

3

Data Requirements

Determine the necessary data for your tool:

“For each of these features, what data will we need? Can you create a list of required data points and potential data sources?“

​
2. Design and Layout

Leverage Assembly to help design the user interface of your internal tool:

​
3. Component Development

Use Assembly to help develop individual components of your internal tool:

1

Chart Creation

Ask Assembly to generate a recharts component:

“Can you create a React component using recharts to display monthly sales data as a line chart? Include tooltips and a legend.”

2

Interactive Diagrams

Request help with ReactFlow for workflow visualizations:

“I need a component that visualizes our sales pipeline using ReactFlow. Can you create a basic flow diagram with nodes for ‘Lead’, ‘Opportunity’, ‘Proposal’, and ‘Closed’?”

3

UI Components

Use Assembly to implement shadcn/ui components:

“Can you create a responsive navigation menu using shadcn/ui components? It should include links to ‘Dashboard’, ‘Reports’, and ‘Settings’.“

​
4. Data Integration

Assembly can assist in connecting your components to data sources:

​
5. Interactivity and Advanced Features

Enhance your internal tool with interactive elements:

1

Filtering and Sorting

Ask Assembly to implement data manipulation features:

“Can you add filter and sort capabilities to our sales data table? Use shadcn/ui components for the UI elements.”

2

Drill-down Functionality

Request help with creating detailed views:

“I want users to be able to click on a data point in our sales chart and see a detailed breakdown. Can you implement this drill-down functionality?”

3

Export and Sharing

Get assistance with data export features:

“Add a feature to export the current dashboard view as a PDF or CSV. Can you implement this using a library compatible with our React setup?”

​
Best Practices for Building Internal Tools with Assembly

  1. Modular Design: Encourage Assembly to create modular, reusable components to facilitate easy updates and maintenance.

  2. Performance Optimization: Regularly ask Assembly for suggestions on optimizing the performance of your internal tool, especially when dealing with large datasets.

  3. Accessibility: Ensure your internal tools are accessible. Ask Assembly to incorporate accessibility best practices in the generated components.

  4. Error Handling: Implement robust error handling. Use Assembly to generate appropriate error states and messages for various scenarios.

  5. Documentation: Ask Assembly to help document the tool’s features, data flow, and any complex logic to aid future maintenance.

  6. Testing: Leverage Assembly to create unit tests for critical components and functions in your internal tool.

Explore More Use Cases

Discover other ways Assembly can enhance your development workflows

Unit Testing with AssemblyCore Development with Assembly