Skip to main content

Build your first app

To build an app without writing code, use App → Create an app in the client instead (Apps overview). This tutorial shows what a minimal app contains, so you can review or edit one.

Goal: build a small app with one page. The user pastes a list of changes, and the app asks the side panel to turn it into release notes.

Before you start: the client is connected and a model is configured. You have the SoduWork source, for the SDK file.

1. Create the files​

release-notes-helper/
├─ soduwork-plugin-draft.json
└─ ui/
   ├─ index.html
   ├─ app.js
   └─ soduwork-app.js      copy from client/sdk/soduwork-app.js

ui/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Release notes</title>
  <script src="soduwork-app.js"></script>
</head>
<body>
  <h1>Release notes</h1>
  <textarea id="changes" rows="10" cols="60" placeholder="One change per line"></textarea>
  <p><button id="send">Write release notes</button> <span id="status"></span></p>
  <script src="app.js"></script>
</body>
</html>

ui/app.js

const app = window.soduWorkApp;
const status = text => { document.getElementById('status').textContent = text; };

document.getElementById('send').onclick = async () => {
  const changes = document.getElementById('changes').value.trim();
  if (!changes) return status('Add at least one change.');
  const receipt = await app.chat.send({
    text: 'Write release notes from these changes:\n' + changes,
    requestId: app.createRequestId(),
  });
  // ok means the side panel accepted the message, not that the reply is finished.
  status(receipt.ok ? 'Sent to the side panel.' : receipt.reason);
};

app.events.onRefresh(() => status(''));

2. Write the draft​

soduwork-plugin-draft.json

{
  "template": "app",
  "key": "release-notes-helper",
  "name": "Release notes helper",
  "version": "1.0.0",
  "author": "Your team",
  "appCategory": "office",
  "description": "Paste a list of changes and ask the side panel to turn it into release notes.",
  "instructions": "Turn the change list the user sends into release notes grouped by New, Improved and Fixed. Do not invent changes.",
  "ui": {
    "contributions": [
      {
        "id": "main",
        "title": "Release notes",
        "slot": "workspace.navigation",
        "source": {
          "type": "package",
          "entry": "ui/index.html",
          "openMode": "workspace",
          "bridge": { "version": 1, "capabilities": ["context.read", "conversation.send", "composer.control"] }
        }
      }
    ]
  },
  "resources": [
    { "path": "ui/index.html", "kind": "ui" },
    { "path": "ui/app.js", "kind": "ui" },
    { "path": "ui/soduwork-app.js", "kind": "ui" }
  ]
}
PartWhy
instructionsHow the side panel's agent should handle what the page sends
appCategoryoffice, game, robot or other
source.type: "package"The page ships inside the plugin; no server needed
bridge.capabilitiesconversation.send allows chat.send. Declare only what you call
resourcesEvery file the page loads, with kind ui

3. Import​

In the client, open Plugins, choose Add plugin → Import plugin, and select soduwork-plugin-draft.json. The client collects the files listed in resources from the same folder, runs the pre-check and installs the app. A missing file or a path outside the folder is reported as an error.

4. Open and try it​

Open App in the left bar and choose Release notes helper. Type a few changes and choose Write release notes. The text appears in the side panel, and the agent writes the notes there.

Check that it worked​

  • The page shows Sent to the side panel.
  • The side panel replies with notes grouped by New, Improved and Fixed.

Next​

Edit this page