Chat-Driven Apps

class=class="text-emerald-300">"text-zinc-500 italic">// ---------------------------------------------------------------
class=class="text-emerald-300">"text-zinc-500 italic">// Full Chat-Driven App loop: user message → LLM → parse → dispatch
class=class="text-emerald-300">"text-zinc-500 italic">// ---------------------------------------------------------------

const SYSTEM_PROMPT = class="text-emerald-300">`
You are an assistant for an internal sales tool.
Emit structured actions like:
  [ACTION:fetch_sales_data item_id="<id>"]
  [ACTION:render_chart type="<line|bar>" target="results"]
The app will execute every action you emit.
`;

type Action = { name: string; args: Record<string, string> };

class=class="text-emerald-300">"text-zinc-500 italic">// 1. Call the LLM with the system prompt + user message.
async function callLLM(userMessage: string): Promise<string> {
  const res = await fetch(class="text-emerald-300">"https:class="text-zinc-500 italicclass="text-emerald-300">">//api.example.com/v1/chat/completions", {
    method: class="text-emerald-300">"POST",
    headers: { class="text-emerald-300">"Content-Type": class="text-emerald-300">"application/json" },
    body: JSON.stringify({
      model: class="text-emerald-300">"gpt-4o-mini",
      messages: [
        { role: class="text-emerald-300">"system", content: SYSTEM_PROMPT },
        { role: class="text-emerald-300">"user", content: userMessage },
      ],
    }),
  });
  const json = await res.json();
  return json.choices[0].message.content as string;
}

class=class="text-emerald-300">"text-zinc-500 italic">// 2. Parse: pull [ACTION:name key=class="text-emerald-300">"value" ...] tags out of the LLM output.
function parseActions(text: string): Action[] {
  const re = /\[ACTION:(\w+)([^\]]*)\]/g;
  const out: Action[] = [];
  for (const match of text.matchAll(re)) {
    const args: Record<string, string> = {};
    for (const kv of match[2].matchAll(/(\w+)=class="text-emerald-300">"([^"]*)class="text-emerald-300">"/g)) {
      args[kv[1]] = kv[2];
    }
    out.push({ name: match[1], args });
  }
  return out;
}

class="text-zinc-500 italicclass="text-emerald-300">">// 3. Dispatch: each action maps to a real app function.
const handlers: Record<string, (a: any) => Promise<any>> = {
  fetch_sales_data: async (a) => {
    const rows = await db.query("SELECT * FROM sales WHERE item_id = $1class="text-emerald-300">", [a.item_id]);
    return rows;
  },
  render_chart: async (a) => {
    ui.renderChart({ type: a.type, target: a.target });
  },
};

async function dispatch(actions: Action[]) {
  const results = [];
  for (const action of actions) {
    const fn = handlers[action.name];
    if (!fn) continue;
    results.push({ action: action.name, result: await fn(action.args) });
  }
  return results;
}

class="text-zinc-500 italicclass="text-emerald-300">">// 4. The full loop the chat surface invokes on every user turn.
export async function handleUserTurn(userMessage: string) {
  const llmOutput = await callLLM(userMessage);
  const actions   = parseActions(llmOutput);
  const results   = await dispatch(actions);
  return {
    visibleText: llmOutput.replace(/\[ACTION:[^\]]*\]/g, "class="text-emerald-300">").trim(),
    actions,
    results,
  };
}

class="text-zinc-500 italicclass="text-emerald-300">">// Example:
class="text-zinc-500 italicclass="text-emerald-300">">//   await handleUserTurn("fetch me sales data for item #123class="text-emerald-300">");
class="text-zinc-500 italicclass="text-emerald-300">">//
class="text-zinc-500 italicclass="text-emerald-300">">// LLM returns:
class="text-zinc-500 italicclass="text-emerald-300">">//   "Got it — pulling sales for item 123.
class=class="text-emerald-300">"text-zinc-500 italic">//    [ACTION:fetch_sales_data item_id=\class="text-emerald-300">"123\"]
class=class="text-emerald-300">"text-zinc-500 italic">//    [ACTION:render_chart type=\class="text-emerald-300">"line\" target=\class="text-emerald-300">"results\"]class="text-emerald-300">"
class="text-zinc-500 italicclass="text-emerald-300">">//
class="text-zinc-500 italicclass="text-emerald-300">">// The parser produces two Action objects, the dispatcher runs them,
class="text-zinc-500 italic">// and the chat renders the cleaned text plus the real app side effects.