# Web Agents

A Web Agent is an AI agent that runs inside your web app and does things in it for the signed-in user: creates the contact, opens the right screen, answers from your documents. Faustine builds it from the app's front-end code. You manage it in the portal under [**Web Agents**](https://auth.faustine.ai/go?to=%2Fweb-assistants).

## How it works

Faustine reads your repository and writes one action for each thing a user can do in the app. An action is JavaScript that calls your app's API the way the app does. It runs in the user's browser, inside your page, with the user's session. The agent can do what that user can do by hand and nothing else. It has no credentials of its own.

Your site loads the agent with a script tag or an npm package. The user talks to it in a widget, and the model decides which actions to run. The model is one from your own model provider, so your provider bills you for the tokens.

Changes you make in the portal go into a draft. Publishing the draft creates a version, and each environment serves one version.

## The parts of a Web Agent

| Part | What it is | Where in the portal |
| --- | --- | --- |
| Module and action | What the analysis found the app can do, grouped by feature. | **Actions** |
| Authentication and navigation | How the app keeps a user signed in and how it moves between screens. | **Actions**, in the **Assistant** group |
| Variable | A configuration value the actions read, such as the API base URL, with a value for each environment. | **Variables** |
| Persona and knowledge | How the agent describes your app and itself, and the documents it answers from. | **Assistant** |
| Chat model | The model that answers in the widget. | **Assistant** > **AI Model** |
| Look and feel | The widget, its launcher and its colors. | **Look & feel** |
| Version | A published snapshot of the actions, the persona and the look. The draft is the next version. | **Versions** |
| Environment | A named place such as Staging or Production. Each serves one version on the domains you allow. | The agent's header |

![An agent's Overview tab, with its counts, the source of its code and the Install the assistant card.](https://docs.faustine.ai/images/web-agents/overview-light.png)

## From code to a working agent

1. [Create a Web Agent](https://docs.faustine.ai/web-agents/create-a-web-agent/): pick the framework, name the agent and [connect your code](https://docs.faustine.ai/web-agents/connect-your-code/), or [upload a ZIP](https://docs.faustine.ai/web-agents/upload-a-zip/).
2. Run [the analysis](https://docs.faustine.ai/web-agents/analysis/) and [choose what to analyze](https://docs.faustine.ai/web-agents/choose-what-to-analyze/).
3. Review the [actions](https://docs.faustine.ai/web-agents/actions/): [turn off or test](https://docs.faustine.ai/web-agents/test-an-action/) the ones you want to check, and [require confirmation](https://docs.faustine.ai/web-agents/require-confirmation/) where the user has to agree first.
4. Shape the agent: [the persona](https://docs.faustine.ai/web-agents/persona/), [knowledge](https://docs.faustine.ai/web-agents/knowledge-files/), [web search](https://docs.faustine.ai/web-agents/web-search/), [the chat model](https://docs.faustine.ai/web-agents/chat-model/) and its [appearance](https://docs.faustine.ai/web-agents/appearance/).
5. [Publish a version](https://docs.faustine.ai/web-agents/publish-a-version/) and add the agent to your site. See [Installation](https://docs.faustine.ai/web-agents/installation/).
6. Watch it work in [the logs](https://docs.faustine.ai/web-agents/logs/) and cover it with [tests](https://docs.faustine.ai/web-agents/tests/).

When your code changes, [keep the agent up to date](https://docs.faustine.ai/web-agents/keep-up-to-date/).

## Supported frameworks

| Kind of app | Frameworks |
| --- | --- |
| Single Page Application | React, Angular, Vue, Svelte, SolidJS, Preact, Alpine.js, vanilla JavaScript |
| Server Side Rendering | Next.js, with the App Router or the Pages Router |

The code comes from GitHub, GitLab, Bitbucket or a ZIP file.

## Change what the analysis wrote

Everything the analysis generates can be edited.

- [Edit an action](https://docs.faustine.ai/web-agents/edit-an-action/) to change its description or its code.
- [Authentication](https://docs.faustine.ai/web-agents/authentication/) and [Navigation](https://docs.faustine.ai/web-agents/navigation/) each have their own code and description.
- [Set variables for each environment](https://docs.faustine.ai/web-agents/variables/) when Staging and Production call different backends.
- [The Advanced editor](https://docs.faustine.ai/web-agents/advanced-editor/) changes any of them from a conversation, with your repository open beside it.
- [Add reference repositories and API docs](https://docs.faustine.ai/web-agents/reference-repositories/) when the front-end code alone does not show a contract.

## Next steps

- [Build your first Web Agent](https://docs.faustine.ai/web-agents/build-your-first-web-agent/): the whole path on an example app.
- [Create a Web Agent](https://docs.faustine.ai/web-agents/create-a-web-agent/): start with your own app.
- [Installation](https://docs.faustine.ai/web-agents/installation/): the ways to load the agent in your site.
- [The Guide](https://docs.faustine.ai/web-agents/guide/): an agent that shows users how to use the app.