Beru Learning

One of the most common bottlenecks in software development is the frontend team being blocked while waiting for the backend team to build and deploy an API. Traditional mocking tools can help, but they often require you to manually create static data files, which can be tedious and don't always cover realistic edge cases.

You can use a Large Language Model (LLM) as a powerful, dynamic mocking tool. With the right prompt, you can generate rich, varied, and realistic JSON data structures in seconds, allowing you to build and test your UI without writing a single line of backend code. This guide provides a practical workflow for any developer looking to speed up their process.

The Core Idea: Prompting for Structured Data

LLMs are excellent at understanding and generating structured data like JSON. The workflow involves giving the model a clear definition of the data you need and asking it to produce instances of that data. This is far faster than creating mock files by hand, especially for complex, nested objects.

Step 1: Define Your Data Schema

Before you can ask for data, you need to know what it should look like. You can define this in a few ways:

Using a TypeScript interface: This is a great, precise way to define the shape of your data.
Using a JSON Schema: A formal way to describe the structure of your JSON.
Providing an example object: The simplest method. Just write out one example of the JSON object you expect from the API.

For this guide, we'll use a simple example object for a user profile:

{  "id": "c7b3d8e0-5e0b-4b0f-8b3a-1b9f1b3e4d5e",  "username": "alex_w",  "email": "alex.w@example.com",  "isActive": true,  "lastLogin": "2023-10-26T10:00:00Z"}

Step 2: Write a Prompt for a Single Object

Start by asking the LLM to generate one new, realistic object based on your example. This tests whether the model understands the structure.

Prompt:

Based on the following example JSON object, generate one new, unique, and realistic user profile object. Ensure the id is a valid UUID and the lastLogin is a valid ISO 8601 date.
[Paste your example object here]

The model should return a new object with different, plausible data that still matches the schema.

Step 3: Generate a List of Varied Data

A single object isn't enough to build a UI. The real power comes from generating a list of objects that represent different states. Now, expand your prompt to ask for an array of varied objects.

Prompt:

Generate a JSON array containing 10 unique and realistic user profile objects. Use the same structure as the example below. Make sure to include a mix of active and inactive users, and vary the usernames and login dates widely.
[Paste your example object here]

You now have a rich dataset to populate lists, tables, and other UI components, allowing you to test how your layout handles different data lengths and values.

Step 4: Prompt for Edge Cases and Error States

A robust UI must handle more than just perfect data. Use the LLM to generate data that represents edge cases and potential errors. This is where this technique truly shines over static mock files.

Prompt for edge cases:

Generate a JSON array of 5 user profiles that represent edge cases. Include at least one user with a very long username, one with a null lastLogin date, and one that is missing the email field entirely.

You can also ask for mock API error responses:

Generate a JSON object representing a 404 Not Found error response from an API. It should include 'status' and 'message' keys.

By testing these cases, you can build a more resilient frontend that doesn't break when the API returns something unexpected.

Frequently Asked Questions

Which LLM is best for this?

Models with strong coding and reasoning abilities, like OpenAI's GPT-4, Anthropic's Claude 3 Opus, or Google's Gemini Advanced, are excellent for this task. They are very good at adhering to complex formatting instructions.

How can I ensure the data is realistic?

The more specific your prompt, the better. Instead of just asking for a "name," ask for a "plausible American-style first and last name." Add constraints like "the 'age' field should be a number between 18 and 65."

Can I automate this process?

Yes. For a more advanced setup, you can integrate an LLM API into your development server. You could create an endpoint (e.g., `/api/mock/users`) that, when called, sends a prompt to the LLM API and returns the generated JSON. This creates a truly dynamic mock server.

Key Takeaways

You can use an LLM as a fast and flexible mock API server to accelerate frontend development.
Start by providing the LLM with a clear schema of your data, either as a code interface or a simple example object.
Prompt the LLM to generate lists of varied and realistic data to populate your UI components.
Use prompts to specifically request edge cases, null values, or missing fields to test the resilience of your UI.
This workflow is a development tool. The generated data is synthetic and should never be used in production.

A Developer’s Workflow for API Mocking with an LLM