# Super Assist

> A ready-made assistant panel for React apps that reads your pages and presses your buttons, in one package. Pages introduce themselves to it and lend it their actions; a project's agent on Super Assist answers, so the host writes no backend.

To set super-assist up in an app, follow [start.md](https://superassist.app/start.md). Every link below is the page's Markdown; add `.md` to any docs URL for the same. [llms-full.txt](https://superassist.app/llms-full.txt) holds every page in one file. In Claude Code, the Super Assist plugin installs with `/plugin marketplace add mertdogar/super-assist-templates` then `/plugin install super-assist@super-assist`; other agents install its skill with `npx skills add mertdogar/super-assist-templates` and add the MCP server at https://superassist.app/mcp.

## Tutorials

- [Add an assistant to a Next.js app](https://superassist.app/tutorials/add-an-assistant.md): Sign up on Super Assist, create an agent and a project, and put the project's assistant beside a Next.js page it reads and acts on.

## Dashboard

- [Agents and skills](https://superassist.app/dashboard/agents-and-skills.md): Create the agent that answers in your app, write its instructions, pick its model, and give it skills, databases and knowledge bases.
- [Knowledge bases](https://superassist.app/dashboard/knowledge-bases.md): Give an agent a help center or files to answer from, follow each source's runs, and see what it cites under the answer.
- [Templates](https://superassist.app/dashboard/templates.md): Install a ready-made agent with its skills and databases in one step, replace its placeholders, and attach a knowledge base.
- [Handoffs](https://superassist.app/dashboard/handoffs.md): What happens when an agent hands a conversation to a person, how the end user's panel shows it, and how a member reads the thread, replies and closes it.
- [Journeys](https://superassist.app/dashboard/journeys.md): Walk end users through your app toward a goal, one step at a time: write a journey from your pages, choose what starts it, publish it, try it in your app, and read how far end users get.

## Components

- [Confirm card](https://superassist.app/components/cards/confirm-card.md): The card that asks the user before a consequential action or tool goes ahead, and stays as a receipt.
- [Choices card](https://superassist.app/components/cards/choices-card.md): The card that asks the user a question with two to four answers they pick with one click.
- [Links card](https://superassist.app/components/cards/links-card.md): The card that shows the pages show_links offers to open, each with a title and a gist.
- [Table card](https://superassist.app/components/cards/table-card.md): The card show_table renders, records of one kind as rows and the fields they share as columns.
- [Spec card](https://superassist.app/components/cards/spec-card.md): The card show_spec renders, one thing's properties as label and value rows.
- [Comparison card](https://superassist.app/components/cards/comparison-card.md): The card show_comparison renders, two or three options side by side on the same traits, with the one the assistant recommends.
- [Sources card](https://superassist.app/components/cards/sources-card.md): The card under an answer that cites the knowledge base passages the agent's searches found, one numbered chip per source.
- [AssistedProvider](https://superassist.app/components/package/assisted-provider.md): Wraps the app in the runtime and lends what every page shares, with the cards that show its tools. With useAssisted.
- [AssistedPage](https://superassist.app/components/package/assisted-page.md): Introduces a page, or a dialog over it, to the assistant, with its name, its instructions and its content on demand.
- [AssistedAction](https://superassist.app/components/package/assisted-action.md): Lends an element of an assisted page as an action the assistant presses, rings or asks about. With useAssistedAction, ring and useRing.
- [AssistedInput](https://superassist.app/components/package/assisted-input.md): Lends an input, textarea, native select, checkbox or switch as a field the assistant fills. With useAssistedInput.
- [AssistedField](https://superassist.app/components/package/assisted-field.md): Lends a control that keeps its value in state, such as a custom picker, as a field the assistant fills through your setter.
- [useAssistedTool](https://superassist.app/components/package/use-assisted-tool.md): Lends a tool that runs in the browser, scoped to its page under an AssistedPage and global elsewhere.
- [AssistedDevtools](https://superassist.app/components/package/assisted-devtools.md): The devtools with an Assisted pages tab that shows what the open page lends.
- [Roots and window](https://superassist.app/components/panel/roots-and-window.md): AssistedPanel and its roots Floating, Sheet and Embedded, the Main column, the Launcher that opens a closed panel, the host-placed Trigger and the window controls.
- [Header](https://superassist.app/components/panel/header.md): The Header and Footer rows and the parts that sit in them, Icon, Title, PageLine, Close and Devtools.
- [Threads](https://superassist.app/components/panel/threads.md): The thread parts, Threads, ThreadMenu, ThreadSelect, ThreadDrawerToggle, ThreadDrawer, ThreadTitle, NewThread and DeleteThread, and the four picker styles.
- [Conversation](https://superassist.app/components/panel/conversation.md): The Conversation and the parts inside it, EmptyState, Messages, FollowUps, ScrollToBottom, HistorySkeleton, ConversationSearch and its toggle.
- [Composer](https://superassist.app/components/panel/composer.md): The Composer and the parts inside it, Input with its slash commands, Attachments, AddAttachment, Dictate, ModelSelector and Send.
- [Data parts](https://superassist.app/components/panel/data-parts.md): The parts that show and set what the model runs with, SettingsToggle, SettingsPanel, ContextDisplay, ContextBreakdown and QuotaBanner.

## How-to guides

- [Use the hosted runtime](https://superassist.app/how-to/use-the-hosted-runtime.md): Choose the agent that answers, name the signed-in user, point the runtime at another Super Assist origin or at a route of your own, keep the open thread in the URL, and handle a refused connection.
- [Connect a coding agent](https://superassist.app/how-to/give-agents-the-docs.md): Install the Super Assist plugin in Claude Code or the skill in another agent, add the MCP server by URL, run setup and sync, and disconnect an agent under Account.
- [Set up through the API](https://superassist.app/how-to/set-up-through-the-api.md): Install or create the agent, create the project, post the app's pages and draft journeys through the API, from a coding agent on the MCP server or with an organization key and curl.
- [Make a page assisted](https://superassist.app/how-to/make-a-page-assisted.md): Introduce a page or a dialog to the assistant with AssistedPage.
- [Add actions and group row actions](https://superassist.app/how-to/add-actions.md): Let the assistant press things on the page with AssistedAction, one per element or one per row.
- [Lend a form's fields](https://superassist.app/how-to/lend-form-fields.md): Let the assistant fill a page's inputs, selects and switches with AssistedInput, or any control with AssistedField.
- [Make an action consequential](https://superassist.app/how-to/make-an-action-consequential.md): Have the assistant ring an action for the user to press, or ask in the panel before it presses.
- [Lend a tool](https://superassist.app/how-to/lend-a-tool.md): Lend the assistant a tool with useAssistedTool, scoped to a page or global.
- [Add go_to_page](https://superassist.app/how-to/add-go-to-page.md): Let the assistant open other pages of the app and show links to them.
- [Place the panel](https://superassist.app/how-to/place-the-panel.md): Render AssistedPanel floating, as a sheet or embedded, size its window, and open it from a launcher, your own trigger or code.
- [Rearrange the panel's parts](https://superassist.app/how-to/rearrange-the-panel.md): Compose AssistedPanel from its parts to move, swap or leave out the header, the threads, the conversation, the composer and the data parts.
- [Make your own part](https://superassist.app/how-to/make-your-own-part.md): Replace a part of the panel with your own component, built on useAssisted, useAui, useAuiState and the primitives, and drop it where the part went.
- [Swap a card](https://superassist.app/how-to/swap-a-card.md): Replace one of the package's cards, the confirm, choices, links, table, spec, comparison or sources card, with a component of your own through cards on AssistedProvider.
- [Show a table, a spec or a comparison](https://superassist.app/how-to/show-structured-answers.md): Have the assistant answer with a table, a spec sheet or a side-by-side comparison through the show tools, and steer when it uses them.
- [Mount the devtools](https://superassist.app/how-to/mount-devtools.md): Add the devtools with the Assisted pages tab to see what each page lends, from the panel's header or as a launcher.

## Reference

- [@super-assist/react](https://superassist.app/reference/react.md): The package's entries and peers, useAssistedRuntime, and every export with the page that documents it.
- [@super-assist/react/styles.css](https://superassist.app/reference/styles.md): The panel's compiled stylesheet, its scoped reset, its class prefix, and the --super-assist-* tokens with their shadcn fallbacks.
- [@super-assist/react/devtools](https://superassist.app/reference/devtools.md): The devtools entry and its Assisted pages tab.
- [Model context](https://superassist.app/reference/model-context.md): The system text, tools and answers the library lends the assistant through the model context, and the cards its tools render.

## Explanation

- [How a turn is answered](https://superassist.app/explanation/how-a-turn-is-answered.md): What happens between a message in the panel and its reply, from the project and its agent to the agent's skills and databases and what the page lends.
- [Why content is read on demand](https://superassist.app/explanation/content-on-demand.md): Why an assisted page's content never enters the prompt unasked, and the assistant reads it through get_page_content.
- [Why consequential actions ring](https://superassist.app/explanation/consequential-actions.md): Why an action whose effect the user should own is pointed out to the user, or asked about, instead of pressed.
- [How model context composes](https://superassist.app/explanation/model-context.md): How the universal instructions, the open page's note, its tools and actions, and global tools add up to one request.
- [Parts and the default composition](https://superassist.app/explanation/parts-and-the-default-composition.md): Why the panel is made of parts, how containers fall back to their defaults, where parts stop and slots begin, and why the default panel looks the way it does.