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

# Overview

> Build production-ready applications with Archie's blueprint-first flow, integrated backend, visual editing, and full-stack code generation.

Build production-ready applications by going from idea to blueprint to deployed code. Define what to build, generate it, customize it, and ship it — all in one place.

## Start building with Archie

<CardGroup cols={2}>
  <Card title="Blueprint" icon="lightbulb" href="/features/blueprint/overview">
    Define what you're building before you build it. Personas, features, architecture, and tech stack — all generated from your idea.
  </Card>

  <Card title="Specifications" icon="file-lines" href="/features/specifications/overview">
    Detailed specifications generated from your blueprint. Coming soon.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Frontend" icon="browser" href="/features/frontend/overview">
    Customize the generated UI with the visual editor, the chat, or by editing code directly.
  </Card>

  <Card title="Backend" icon="server" href="/features/backend/overview">
    Archie Core — your managed backend with database, APIs, authentication, and integrations built in.
  </Card>
</CardGroup>

## How Archie works

Archie generates a structured plan before any code is written. You describe what you want to build in plain language. Archie produces a blueprint covering modules, user types, system services, integrations, and tech stack. You edit the blueprint until it matches your intent — that is where your time goes.

When the blueprint is ready, Archie runs the build. The output is a real full-stack application: a frontend hosted on a global CDN, a backend running on Archie Core (PostgreSQL or MySQL with auto-generated GraphQL and REST APIs, authentication, file storage, RBAC), and the wiring between them.

After the build, you keep iterating. Talk to Archie to apply changes. Use the visual editor for layout and copy. Push to GitHub and edit code locally. The blueprint is your control surface for structural changes; the running app is where everything else happens.

## Assets

Every project has an Assets surface for images, videos, documents, and other files that your app uses or displays. Upload from the project, browse with search and filters, and reference assets from the visual editor, frontend code, or custom backend functions. Files are served from the storage provider configured in your blueprint. See [Assets](/features/assets/overview).

## Develop and debug your app

<Tabs>
  <Tab title="Talk to Archie">
    The chat is the primary modality for editing the running app. Describe a change in plain language ("add a search field to the orders page", "make the dashboard sidebar collapsible") and Archie applies it across the relevant files. The chat understands the project's structure and generates code that matches the existing patterns.
  </Tab>

  <Tab title="Visual editor">
    The visual editor is point-and-click. Click an element in the live preview, the inspector panel surfaces its properties — text, color, padding, position — and changes apply live. Useful for layout tweaks, copy edits, image swaps, and component-level styling. See [Visual editor](/features/frontend/visual-editor).

    <img src="https://mintcdn.com/archie-e998dbf6/JNerAbEOM8n69x8B/features/blueprint/visual-editor-inspector.png?fit=max&auto=format&n=JNerAbEOM8n69x8B&q=85&s=672932dde782c2e257a0fab61e168871" alt="Visual editor with an element selected and the inspector panel" width="2880" height="1800" data-path="features/blueprint/visual-editor-inspector.png" />
  </Tab>

  <Tab title="GitHub integration">
    GitHub integration provides two-way sync. Archie pushes generated code to a repository you choose, and pulls back any commits made outside Archie. Branch-based deployments, pull request reviews, and standard Git workflows all work. See [Connecting GitHub](/features/github/connecting).
  </Tab>

  <Tab title="Activity and logs">
    The activity feed shows every action across your project — builds, deployments, blueprint edits, comments. Logs from the backend stream live across services and environments. Filter by environment, service, or severity. See [Logs](/features/backend/logs).
  </Tab>

  <Tab title="Project structure">
    Generated apps follow a predictable structure: `app/` for routes (Next.js or your stack's equivalent), `components/` for reusable UI, `lib/` for utilities, `schema/` for the data model. The backend exposes the same model through GraphQL and REST automatically. See the [Backend overview](/features/backend/overview) for the full layout.

    <img src="https://mintcdn.com/archie-e998dbf6/JNerAbEOM8n69x8B/features/blueprint/file-tree-directories.png?fit=max&auto=format&n=JNerAbEOM8n69x8B&q=85&s=f682849672e1017696e3246e3614ed6b" alt="Project file tree with generated source directories" width="2880" height="1800" data-path="features/blueprint/file-tree-directories.png" />
  </Tab>
</Tabs>

## Explore

<CardGroup cols={2}>
  <Card title="Edit your data model" icon="database" href="/features/backend/data-model">
    Add tables, fields, and relationships. APIs regenerate automatically.
  </Card>

  <Card title="Customize the UI" icon="paintbrush" href="/features/frontend/visual-editor">
    Visual editor for layout and copy, IDE for code, chat for everything in between.
  </Card>

  <Card title="Add an integration" icon="plug" href="/features/backend/integrations/overview">
    Stripe, SendGrid, Twilio, Slack, Shopify, or build your own.
  </Card>

  <Card title="Manage environments" icon="layer-group" href="/features/backend/environments/overview">
    Development, staging, production, and beyond — with CI/CD between them.
  </Card>

  <Card title="Get an API key" icon="key" href="/features/backend/settings/api-keys">
    Authenticate external clients with scoped, per-environment API keys.
  </Card>

  <Card title="Connect GitHub" icon="github" href="/features/github/connecting">
    Two-way code sync, pull requests, and branch-based deployments.
  </Card>
</CardGroup>