> For the complete documentation index, see [llms.txt](https://docs.frayme.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frayme.ai/examples/salesforce-pipeline.md).

# Sales pipeline

A CRM cockpit composed from one sentence — KPI row, stage funnel, at-risk analysis, and a searchable opportunity table with a close-the-deal agent action.

## The ask

> Pull up last quarter's opportunities from Salesforce.

The agent fetches the pipeline from the CRM, then calls Frayme to turn it into an interface: 47 open opportunities worth £4.86M, three flagged at risk, every deal searchable live and closeable from its row.

## What comes back

| Piece             | Component                             | Behavior                                                                                     |
| ----------------- | ------------------------------------- | -------------------------------------------------------------------------------------------- |
| KPI row           | `StatGroup` + `Stat`                  | Pipeline value, win rate, deals at risk                                                      |
| Stage funnel      | `FunnelChart`                         | Prospecting → Closed won, with stage percentages                                             |
| At-risk panel     | `Alert` + `BarList` behind a `Switch` | Flip "At-risk analysis" and the panel folds away — conditional visibility on a state binding |
| Opportunity table | `DataTable` + search `Input`          | Filters as you type, row actions on each deal                                                |

The funnel is a single operation on the stream:

```json
{"op":"add","path":"/elements/funnel","value":{"type":"FunnelChart","props":{
  "stages":[
    {"label":"Prospecting","value":128},
    {"label":"Qualified","value":74},
    {"label":"Proposal","value":41},
    {"label":"Negotiation","value":22},
    {"label":"Closed won","value":16}
  ],
  "showPercent":true,"palette":"cool","height":"300px"}}}
```

## The interesting mechanic: search is local, closing a deal is not

Typing in the search box filters the `DataTable` instantly — that interaction resolves inside the renderer via a state binding and never leaves the page. But *Mark closed-won* on the Acme renewal is a declared action:

```json
{"op":"add","path":"/actions","value":{"closeWon":{"kind":"agent"}}}
```

Pressing it (and confirming the modal) hands the event back to the agent, which returns a second full screen: a success banner, a revised funnel, and an updated KPI row. In the live demo you can watch the agent think through the update before the new operations stream in.

## Compose it yourself

Declare the action so Frayme guarantees the button is wired:

```ts
import Frayme from '@frayme/api';

const frayme = new Frayme({ apiKey: process.env.FRAYME_API_KEY });

const stream = frayme.compose.stream({
  prompt: "Pull up last quarter's opportunities from Salesforce.",
  ui_type: 'dashboard',
  data: { opportunities: [/* your CRM rows, rendered verbatim */] },
  actions: [
    {
      name: 'closeWon',
      description: 'Mark the selected opportunity closed-won in the CRM',
      role: 'approve',
      required: true,
      kind: 'agent',
    },
  ],
});
```

When the user fires `closeWon`, your agent receives it, performs the CRM update, and calls compose again with `mode: 'continue_journey'` and the fired action in `action_context` — that second call is what produces the confirmation screen.

## Try it

Open [frayme.ai/examples](https://frayme.ai/examples) and select **Q2 pipeline — Salesforce**. Type in the search box, flip the at-risk switch, then close the Acme renewal.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frayme.ai/examples/salesforce-pipeline.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.