# How to Implement Import and Export Functionality for Prompts and Configurations in Prompt-Optimizer

> Implement import and export for prompt optimizer. Leverage DataManager to serialize data to JSON and handle file uploads/downloads for efficient prompt and configuration management.

- Repository: [且炼时光/prompt-optimizer](https://github.com/linshenkx/prompt-optimizer)
- Tags: how-to-guide
- Published: 2026-02-23

---

**You can implement import and export functionality in prompt-optimizer by leveraging the existing `DataManager` class in the core layer, which aggregates data from all services (templates, models, preferences, history) and exposes `exportData()` and `importData()` methods that serialize to JSON, while the UI layer uses `DataImportExportManager` to handle file downloads and uploads.**

The prompt-optimizer repository by linshenkx provides a robust architecture for managing AI prompt workflows. When users need to migrate their workspace or backup their configurations, implementing import and export functionality becomes essential. This guide demonstrates how to utilize the existing core services and UI managers to enable seamless data portability for prompts, model configurations, and user preferences.

## Understanding the Core Architecture for Data Export and Import

### The DataManager Orchestration Layer

At the center of the export/import system is `DataManager` located in [`packages/core/src/services/data/manager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/data/manager.ts). This class acts as a central coordinator that collects data from all domain-specific services and bundles them into a single JSON structure.

The `exportData()` method aggregates state from five core services:

```typescript
// packages/core/src/services/data/manager.ts
export class DataManager {
  async exportData(): Promise<string> {
    const data: Record<string, any> = {};
    data['history']   = await this.historyManager.exportData();
    data['models']    = await this.modelManager.exportData();
    data['templates'] = await this.templateManager.exportData();
    data['settings']  = await this.preferenceService.exportData();
    data['contexts']  = await this.contextRepo.exportData();
    return JSON.stringify({ version: 1, data }, null, 2);
  }
}

```

The resulting JSON includes a version identifier for future migration compatibility and pretty-printed formatting for human readability.

### Individual Service Export Methods

Each domain service in the core layer implements standardized `exportData()` and `importData()` methods that handle type-specific serialization:

| Service | File Path | Export Return Type | Import Parameter | Contents |
|---------|-----------|-------------------|------------------|----------|
| **Model** | [`packages/core/src/services/model/manager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/model/manager.ts) | `Promise<TextModelConfig[]>` | `TextModelConfig[]` | User-defined text model configurations |
| **Template** | [`packages/core/src/services/template/manager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/template/manager.ts) | `Promise<Template[]>` | `Template[]` | Prompt templates (system and user prompts) |
| **Preference** | [`packages/core/src/services/preference/service.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/preference/service.ts) | `Promise<Record<string, string>>` | `Record<string, string>` | UI preferences and global settings |
| **History** | [`packages/core/src/services/history/manager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/history/manager.ts) | `Promise<PromptRecord[]>` | `PromptRecord[]` | Full prompt execution history |
| **Context** | [`packages/core/src/services/context/repo.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/context/repo.ts) | `Promise<ContextBundle>` | `ContextBundle` | Variable contexts and saved workspaces |

These methods ensure type safety and validation during the import process, rejecting malformed data before it reaches the application state.

## Implementing the UI Layer with DataImportExportManager

### Creating the Export Workflow

The UI layer abstracts core functionality through `DataImportExportManager` in [`packages/ui/src/services/DataImportExportManager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/ui/src/services/DataImportExportManager.ts). This class provides thin wrappers that components can call directly:

```typescript
// packages/ui/src/services/DataImportExportManager.ts
export class DataImportExportManager {
  constructor(private readonly dataManager: DataManager) {}

  /** Returns a JSON string that can be saved as a file */
  async exportAll(): Promise<string> {
    return this.dataManager.exportData();
  }

  /** Takes a JSON string (from a file) and restores the state */
  async importAll(json: string): Promise<void> {
    await this.dataManager.importData(json);
  }
}

```

To implement the download functionality in a Vue component, construct a Blob and trigger a browser download:

```vue
<!-- packages/web/src/components/toolbar/ExportImportBar.vue -->
<template>
  <NSpace justify="end">
    <NButton @click="exportAll">{{ t('toolbar.exportAll') }}</NButton>

    <NUpload
      :show-file-list="false"
      :before-upload="handleImport"
      accept="application/json"
    >
      <NButton>{{ t('toolbar.importAll') }}</NButton>
    </NUpload>
  </NSpace>
</template>

<script setup lang="ts">
import { DataImportExportManager } from '@/services/DataImportExportManager';
import { useToast } from '@/composables/ui/useToast';
import { dataManager } from '@/services/coreInstance';

const manager = new DataImportExportManager(dataManager);
const toast = useToast();

async function exportAll() {
  const json = await manager.exportAll();
  const blob = new Blob([json], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `prompt-optimizer-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
  a.click();
  URL.revokeObjectURL(url);
  toast.success('Export completed');
}

function handleImport(file: File) {
  const reader = new FileReader();
  reader.onload = async () => {
    try {
      await manager.importAll(reader.result as string);
      toast.success('Import completed');
    } catch (e) {
      toast.error('Import failed - invalid file format');
    }
  };
  reader.readAsText(file);
  return false;
}
</script>

```

### Handling File Imports

The import process reverses the export flow. The `DataManager.importData()` method parses the JSON and distributes sections to their respective services:

```typescript
// packages/core/src/services/data/manager.ts
async importData(raw: string): Promise<void> {
  const { version, data } = JSON.parse(raw);
  // Version compatibility check omitted for brevity
  
  await this.historyManager.importData(data['history']);
  await this.modelManager.importData(data['models']);
  await this.templateManager.importData(data['templates']);
  await this.preferenceService.importData(data['settings']);
  await this.contextRepo.importData(data['contexts']);
}

```

Each service validates its incoming data before applying it to the application state, ensuring type safety and preventing corruption from malformed imports.

## Desktop Integration with Electron IPC

For the desktop version of prompt-optimizer, the core services run through Electron IPC proxies. The `DataImportExportManager` works identically, but the underlying `DataManager` calls are forwarded to the main process:

```typescript
// electron/main.ts (simplified)
import { ipcMain } from 'electron';
import { DataManager } from '@prompt-optimizer/core';

const dataManager = new DataManager(/* injected services */);

ipcMain.handle('export-all', async () => {
  return dataManager.exportData();
});

ipcMain.handle('import-all', async (_e, json: string) => {
  await dataManager.importData(json);
});

```

The renderer process accesses these through service proxies:

```typescript
// packages/core/src/services/model/electron-proxy.ts
export class ModelElectronProxy implements ModelService {
  async exportData(): Promise<TextModelConfig[]> {
    return (this.electronAPI as any).model.exportData();
  }
  async importData(data: TextModelConfig[]): Promise<void> {
    return (this.electronAPI as any).model.importData(data);
  }
}

```

This architecture ensures that the same `DataImportExportManager` works across web and desktop environments without modification.

## Summary

Implementing import and export functionality for prompts and configurations in prompt-optimizer leverages the existing layered architecture:

- **Core Layer**: `DataManager` in [`packages/core/src/services/data/manager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/core/src/services/data/manager.ts) orchestrates export/import across all domain services (templates, models, preferences, history, contexts)
- **Service Layer**: Each manager implements `exportData()` and `importData()` with type-safe serialization
- **UI Layer**: `DataImportExportManager` in [`packages/ui/src/services/DataImportExportManager.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/ui/src/services/DataImportExportManager.ts) provides thin wrappers for components
- **Desktop Layer**: Electron IPC proxies forward calls to the main process for file system access

## Frequently Asked Questions

### How does prompt-optimizer handle version compatibility during import?

The `DataManager.exportData()` method embeds a version identifier (currently `version: 1`) in the JSON root object. During import, the `importData()` method can check this version field to handle migrations or reject incompatible formats. Each core service also performs runtime validation on its incoming data structure before applying changes.

### Can I export only specific data types instead of everything?

While the `DataManager` provides a comprehensive `exportData()` method that bundles all services, you can access individual service managers directly through the same API. For example, calling `templateManager.exportData()` returns only prompt templates, and `modelManager.exportData()` returns only model configurations. The `DataImportExportManager` can be extended with selective export methods that call these specific services.

### What file format does prompt-optimizer use for exports?

Prompt-optimizer uses **JSON** as the primary export format. The exported file contains a structured object with version metadata and nested data sections for history, models, templates, settings, and contexts. For variable management specifically, the UI also supports **CSV** and **TXT** formats through the `VariableManagerModal` component, but the global export/import functionality relies on JSON.

### How do I handle import errors in the UI?

The `DataImportExportManager.importAll()` method propagates validation errors from the core services. In your UI component, wrap the import call in a try-catch block to catch parsing errors or validation failures. The [`VariableManagerModal.vue`](https://github.com/linshenkx/prompt-optimizer/blob/main/VariableManagerModal.vue) component demonstrates this pattern by showing toast notifications for success states and error dialogs for failures, which you can replicate in your global import handler.