> ## Documentation Index
> Fetch the complete documentation index at: https://docs.architect.new/llms.txt
> Use this file to discover all available pages before exploring further.

# How It Works

> Architect looks deceptively simple. Under the hood, it gives you granular control over the data your app reasons over, the agents that power it, and the design it ships with.

At a glance, Architect is just a prompt box. But before you ever hit send, you can shape three things that make the difference between a generic app and exactly the one you need: the **data** your agents draw on, the **design** they're wrapped in, and the **agents** themselves. This page walks through those controls.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/architect-homepage-zoomed.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=e6ac9846442e71f15062f7ce77347594" alt="Main Interface" width="1542" height="746" data-path="images/architect-homepage-zoomed.png" />
</Frame>

## Context Injection (RAG)

Your app shouldn't start empty. Ground your agents in your own proprietary data using the **Attach** feature — open the **+** menu in the prompt box and add your files. Architect detects the file type and wires it into the right place automatically:

* **Unstructured data (PDF / DOCX / TXT):** Automatically chunked and embedded into a vector database, so your agents can semantically search and cite your documents when they answer.
* **Structured data (CSV / Excel):** Loaded into a dataframe that a data-analyst agent can query, aggregate, and visualize.

The result is an app that reasons over *your* content from the very first message — no manual ingestion pipeline required.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/homepage-add-files.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=21489365a9b2786efcd5a4b911180af7" alt="Attachment Interface" width="1650" height="992" data-path="images/homepage-add-files.png" />
</Frame>

## Visual Personality

Architect doesn't just generate code — it designs it. The **Theme Engine** injects a full design system (Tailwind config + fonts + component styling) into the code it writes, so every app comes out looking polished and on-brand rather than like a default template.

You have two ways to set the look:

* **Pick a preset** — choose from 45+ ready-made themes covering everything from clean and minimal to bold and editorial.
* **Bring your own** — turn your company's design guidelines into a reusable theme by importing them from Figma, a PDF, a GitHub repo, or a zip. See [Bring Your Own Design System](/build/custom-theme).

Select a theme from the **+** menu before you build, and Architect applies it consistently across the whole generated app.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/homepage-select-theme.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=a32be8e9ffd246454d7dad9e81e4f817" alt="Theme Selector" width="1590" height="834" data-path="images/homepage-select-theme.png" />
</Frame>

## Prompt Library

Struggling to articulate your requirements? Architect provides a context-aware **Prompt Library** in the homepage sidebar — a curated set of pre-engineered prompts known to produce high-quality agentic workflows. Browse by role or task, load one with a click, and edit it to fit your context. See [Prompt Library](/build/prompt-library) for more.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/prompt_library.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=4f1f32eb27eeeff3dd0e0cc1cf1b79bd" alt="Templates" width="2940" height="1664" data-path="images/prompt_library.png" />
</Frame>

## Add Studio Agents

Already have agents built in Lyzr Studio? You don't need to rebuild them. Architect lets you import any existing Studio agent directly into your app, so you can compose new experiences on top of work you've already done — your custom prompts, tools, and knowledge bases all carry over as-is.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/homepage-import-agent.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=401ce4a5a97f0a0a8cd8dadccc0fed3c" alt="Add studio agents option in the homepage menu" width="1544" height="876" data-path="images/homepage-import-agent.png" />
</Frame>

From the **+** menu on the homepage, select **Add studio agents** to browse and pick from your existing agents. Architect wires the selected agent into the app it generates, intelligence intact.

<Frame>
  <img src="https://mintcdn.com/lyzr-636197f6/waK5HZo52hovWKdQ/images/import-studio-agent.png?fit=max&auto=format&n=waK5HZo52hovWKdQ&q=85&s=340524ad6cece85bbac3d99cbde5533a" alt="Choose Agent modal showing the list of existing Studio agents" width="2940" height="1668" data-path="images/import-studio-agent.png" />
</Frame>
