Using LangChain to Automatically Generate Front‑End Code from Documentation

In recent years many AI tools have emerged to improve work efficiency, such as ChatPDF for document summarization and browser extensions that extract information from web pages. This guide explores how to apply similar logic to automatically generate usable front‑end page code from a user‑provided requirement or API document.

1. Research and Preparation

All operations rely on OpenAI’s API, so an API key must be obtained from the OpenAI website. Each account receives a $5 credit, sufficient for learning and experimentation.

During usage, several limitations of ChatGPT were identified:

Large texts exceed the token limits of current models (4k, 8k, 16k).

The model cannot access real‑time information (no internet).

Short‑term memory: once the token limit is exceeded the model forgets previous context.

Multi‑task support is weak; the model can become confused when asked to perform many tasks simultaneously.

2. Why Use LangChain

LangChain provides a set of tools that give LLMs “arms” to interact with external resources. It is a rapidly growing open‑source project (second fastest‑growing repo on GitHub, 54.7k stars as of July 2023) and supports both Node.js and Python. The examples below use the Node.js SDK.

3. Reading Local Documents

LangChain can load various file formats (csv, docx, epub, json, markdown, pdf, txt). The example demonstrates loading a mock Word document that contains API specifications.

Two code snippets illustrate the process:

const loader = new DocxLoader("/path/to/api.docx");
const docs = await loader.load();

After loading, a simple search query returns the relevant section of the document.

4. Reading Web Pages

Because ChatGPT cannot browse, the guide uses Puppeteer to crawl a web‑based API documentation site (e.g., apifox). The workflow is:

Launch a headless Chromium instance with Puppeteer.

Navigate to the target page and wait for the main content (e.g., #main) to load.

Extract the HTML of each API node (identified by classes starting with ui-tree-node).

Use Cheerio to strip tags, classes, and IDs, leaving clean text.

Pass the cleaned text to LangChain for splitting, vector storage, and retrieval.

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://h861y5qddl.apifox.cn/');
const html = await page.$eval('#main', el => el.innerHTML);
const $ = cheerio.load(html);
const text = $('*').text();

5. Implementation Steps

5.1 Initialize OpenAI Model

The temperature parameter (0‑1) controls output randomness. For deterministic results (e.g., code generation) set temperature = 0. Higher values are used for creative tasks such as jokes or simulated customer service.

5.2 Initialize Headless Browser

Puppeteer is used for web crawling; appropriate wait times or element listeners are required for non‑SSR pages.

5.3 Text Splitting + Vector Store

Long texts are split into manageable chunks (e.g., 1k tokens each) and embedded into a vector store. This enables similarity search to retrieve the most relevant fragments.

5.4 Create RetrievalQAChain

Setting verbose = true prints the chain’s reasoning steps, helping to refine prompts.

Example query:

"Summarize the following information:
1. All API endpoints
2. Request parameters"

The chain returns a concatenated string of results, which can be further formatted.

6. Prompt Design

A good prompt includes:

Task description

Instructions

Examples

Constraints (e.g., output only code)

Context (optional)

End‑of‑Prompt marker

Example template (wrapped in code tags):

Context: <article>{formatContent}</article>
Prompt: generate ts code by interface
Instructions: You are a skilled front‑end engineer, proficient in TypeScript. Generate the corresponding code based on the context. Ignore the "*" symbol in the context.
Examples:
  Input: /api/v1/[xxx]
  Output: {listRequest}
Constraints:
  - Do not generate any content other than code.
  - Do not duplicate TypeScript interfaces.
Task: Generate TypeScript declarations and request interfaces.
End of Prompt

7. Final Output

Running the LLM with the above prompt produces clean, ready‑to‑use TypeScript files. Two example files are shown:

typing.ts

export interface AddDictionaryRequest { name?: string; key?: string; val?: string; }
export interface AddDictionaryResponse { id?: number; }
export interface DeleteDictionaryRequest { ids: number[]; }
export interface DeleteDictionaryResponse { object: {}; }
export interface EditDictionaryRequest { id: number; name?: string; key?: string; val?: string; }
export interface EditDictionaryResponse { id?: number; }
export interface GetDictionaryRequest { id: number; }
export interface GetDictionaryResponse { config?: { id?: number; name?: string; key?: string; val?: string; created_at?: string; updated_at?: string; }; }
export interface ListDictionaryRequest { key?: string; name?: string; page?: number; page_size?: number; }
export interface ListDictionaryResponse { headers?: { label?: string; key?: string; sort?: boolean; tips?: string; merge?: boolean; mergeField?: string; }[]; rows?: {}; sums?: {}; counts?: number; }

index.ts

import type { AddDictionaryRequest, AddDictionaryResponse, DeleteDictionaryRequest, DeleteDictionaryResponse, EditDictionaryRequest, EditDictionaryResponse, GetDictionaryRequest, GetDictionaryResponse, ListDictionaryRequest, ListDictionaryResponse } from "./typing.ts";
import request from "@/utils/request";
/** Add dictionary */
export async function addDictionary_api(params: AddDictionaryRequest): Promise<AddDictionaryResponse> { return request.post("/api/waldon/test-dictionary/add", params); }
/** Delete dictionary */
export async function deleteDictionary_api(params: DeleteDictionaryRequest): Promise<DeleteDictionaryResponse> { return request.post("/api/waldon/test-dictionary/delete", params); }
/** Edit dictionary */
export async function editDictionary_api(params: EditDictionaryRequest): Promise<EditDictionaryResponse> { return request.post("/api/waldon/test-dictionary/edit", params); }
/** Get dictionary */
export async function getDictionary_api(params: GetDictionaryRequest): Promise<GetDictionaryResponse> { return request.get("/api/waldon/test-dictionary/get", params); }
/** List dictionary */
export async function listDictionary_api(params: ListDictionaryRequest): Promise<ListDictionaryResponse> { return request.get("/api/waldon/test-dictionary/list", params); }

After obtaining the generated code, it can be written to project files using Node.js’s fs module.

8. Summary

LangChain is a versatile framework that enables reading local documents, crawling web pages, splitting text, storing vectors, and building RetrievalQA chains. It is not tied to any specific LLM, so alternative models (including domestic ones) can be swapped in if needed. The guide demonstrates two core use‑cases—document‑based API extraction and web‑page scraping—and provides a complete prompt template for high‑quality TypeScript code generation.

Additional resources such as tutorials, videos, and reference links are listed at the end of the original document.