Talk to the agent from your app

​

How the pane works

• Only the app’s own agent. The pane talks to the agent the web app belongs to, never another one. The page cannot pick a different agent or conversation.
• Only for organization members. Anyone who can open the app can use its pane; nobody else can.
• One conversation per person per app. Each person has one ongoing conversation with the app’s agent, their own. Two people using the same app never see each other’s messages. The conversation also appears among the person’s chats in Lua Workspace, titled from its first message, and stays there if the app is deleted. There is no reset.
• The agent knows where the person is. Every message carries the app’s name and the page’s path, and any context the page adds.
• Billed like Workspace chat. Pane conversations are real usage, under the same plan and limits as chat in Lua Workspace.
• On by default. Every web app has a pane unless its builders turn it off. A person using the app can collapse it, not remove it.
• Not in a preview. A preview has no pane, because the agent it would reach is the live one.

​

New apps already have it

​

Add it to an older app

cd src/apps/<name>/web
npm install @lua-ai-global/app-chat @lua-ai-global/app-client@~0.0.3

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { lua } from '@lua-ai-global/app-client';
import { AgentPaneLayout } from '@lua-ai-global/app-chat';
import { App } from './App';
import './index.css';

document.documentElement.classList.toggle('dark', lua.theme === 'dark');
lua.onInit((init) => document.documentElement.classList.toggle('dark', init.theme === 'dark'));

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AgentPaneLayout>
      <App />
    </AgentPaneLayout>
  </StrictMode>
);
void lua.start();

@import '@lua-ai-global/ui/styles.css';
@import '@lua-ai-global/app-chat/styles.css';
@source '../node_modules/@lua-ai-global/ui/dist';

​

Dock it or place it

import { AgentPane } from '@lua-ai-global/app-chat';

export function App() {
  return (
    <main className="grid grid-cols-2 gap-4 p-6">
      <section>{/* your page */}</section>
      <div className="h-[600px]">
        <AgentPane variant="inline" />
      </div>
    </main>
  );
}

​

Tell the agent what is on screen

<AgentPaneLayout context={() => ({ ticketId: currentTicketId(), filter: currentFilter() })}>
  <App />
</AgentPaneLayout>

import { useAgentPane } from '@lua-ai-global/app-chat';

export function TicketActions({ id }: { id: string }) {
  const pane = useAgentPane();
  return (
    <button onClick={() => pane.ask(`Summarise ticket ${id}`, { context: { ticketId: id } })}>
      Ask the agent
    </button>
  );
}

​

Refresh the page after a reply

<AgentPaneLayout onTurnEnd={() => window.dispatchEvent(new Event('tickets:refresh'))}>
  <App />
</AgentPaneLayout>

useEffect(() => lua.chat.onTurnEnd(() => load()), []);

​

Build your own chat with lua.chat

import { lua, LuaApiError } from '@lua-ai-global/app-client';

export async function askAgent(text: string, onText: (delta: string) => void): Promise<string | undefined> {
  if (!(await lua.chat.available())) return undefined; // the app turned its pane off

  const turn = lua.chat.send(text, { context: { ticketId: '42' } });
  try {
    for await (const chunk of turn) {
      if (chunk.type === 'text-delta') onText(chunk.delta);
    }
    return await turn.text; // every text delta, joined
  } catch (error) {
    if (error instanceof LuaApiError && error.code === 'TURN_IN_FLIGHT') return undefined;
    throw error;
  }
}

// The latest messages, oldest first; pass `before` back for the page before.
const { messages, before } = await lua.chat.history({ limit: 50 });

​

Test it locally

lua apps dev ops-dashboard
lua apps dev ops-dashboard --chat-env production

• Sandbox, by default. The pane talks to your agent with the project’s local skills, processors and persona, as lua chat -e sandbox does. They are pushed to the sandbox on the first message; when that push fails, the message fails and the next one tries again.
• Production with --chat-env production. The pane talks to the agent that is live, as lua chat -e production does.
• A conversation of its own. The local pane uses a conversation kept apart from your conversation in the live app, so testing never mixes into it.
• Restart after changing a skill. Your local skills are pushed once per run. Stop lua apps dev with Ctrl+C and start it again to chat with the change. Edits to the page and to routes reload as usual.

​

Turn it off

export default defineWebApp({
  name: 'ops-dashboard',
  agentPane: false,
  pages: { root: './web' },
  routes: {
    // …
  },
});

​

Show the agent’s images

export default defineWebApp({
  name: 'ops-dashboard',
  pages: {
    root: './web',
    csp: { imgSrc: ['https://images.example-shop.com'] },
  },
  routes: {
    // …
  },
});

​

Limits

​

If it isn’t working

​

Next steps