Skip to content
Moka

Tutorial: your first demo

In this tutorial you’ll build a “Support desk” demo: a model that answers customers in your brand voice, uses real tools, shows a booking form, and can be shared with one command. It takes about 10 minutes.

1. Create the project

Section titled “1. Create the project”

  1. Scaffold a project and install:

    Terminal window
    npm create moka@latest support-desk
    cd support-desk && npm install
    • Directorysupport-desk/
      • moka.json the whole demo: models, servers, skills, workspaces
      • package.json
      • Directoryskills/
        • Directorybrand-voice/
          • SKILL.md
          • examples.md
        • Directoryincident-report/
          • SKILL.md
      • .env.example

  2. Give it a key and start it:

    Terminal window
    export OPENAI_API_KEY=sk-...
    npm start

2. Pick the model

Section titled “2. Pick the model”

Open the model menu in the top bar. The template ships with OpenAI, Anthropic and Ollama profiles that read keys from the environment (env:OPENAI_API_KEY). Pick the one you have a key for.

Need something else? Settings → Models → Add model and choose a preset, or Custom / Enterprise gateway for any OpenAI-compatible endpoint. Hit Test to confirm it works. → Models & providers

3. Add a real MCP server

Section titled “3. Add a real MCP server”
  1. Settings → MCP servers → Add server → Gallery → Filesystem.
  2. Change the last argument from . to the folder you want the model to see.
  3. Click Save & reconnect — the dot turns green and its tools are listed. Switch off any tool you don’t want the model to use.

Try: “What files are in the project folder, and what does the README say?” Open the Inspector and click the tools/call events to see the exact JSON-RPC messages. → MCP servers

4. Use a skill

Section titled “4. Use a skill”

The Support bot workspace already enables the brand-voice skill. Ask:

A customer says their beans arrived two weeks late. Write a reply.

In the inspector you’ll see a load_skill call: the model read skills/brand-voice/SKILL.md because its description matched the task, then followed it. Edit SKILL.md and ask again — no restart needed. → Skills

5. Add generative UI

Section titled “5. Add generative UI”

Every workspace gives the model a render_ui tool, so it can answer with real UI. Ask:

Show me a form to reschedule the delivery: date, time window and a notes field.

The model renders an A2UI form. Fill it in and press the button — the values come back to the model as a [ui action] message and it continues the conversation.

The demo server also includes an MCP App: ask “roll 3 dice” and you’ll get an interactive dice roller that calls tools on its own. → Generative UI

6. Polish the demo

Section titled “6. Polish the demo”
  1. Settings → Workspaces → Support bot: tweak the system prompt and starter prompts — they show up as one-click chips on an empty chat.
  2. Press ⌘ . for presenter mode: bigger text, no side panels.
  3. Try Compare to run the same prompt against two models side by side.

7. Share it

Section titled “7. Share it”

Everything you changed lives in moka.json. Keys stay in env vars, so it’s safe to commit:

Terminal window
git init && git add . && git commit -m "Support desk demo"

Anyone can now clone the repo and run npm install && npm start. Or hand it to your platform team as a Docker deployment.