Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/manusapis/Agix/llms.txt

Use this file to discover all available pages before exploring further.

Agix is a standard Vite + React TypeScript project with one Office-specific requirement: the development server must be served over HTTPS, because Excel will refuse to load add-in content from plain HTTP origins. This guide walks through every step from a fresh clone to a working task pane inside Excel, and covers the production deployment path at the end.

​
Prerequisites

Before starting, make sure you have the following:
  • Node.js 18 or later — check with node -v
  • npm — bundled with Node.js; check with npm -v
  • Microsoft Excel 2016 or later (Desktop) — or Excel on the web in a Chromium-based browser
  • A trusted local HTTPS certificate — required so Office accepts https://localhost:3000
Office Add-ins will not load over an untrusted HTTPS connection. Before running the dev server, generate a locally trusted certificate using mkcert:
mkcert -install          # installs the local CA into your system trust store
mkcert localhost         # generates localhost.pem and localhost-key.pem
Then reference the generated files in your vite.config.ts server.https option. Without this step, Excel will display a security warning and refuse to render the task pane.

​
Install dependencies

npm install
This installs React 18, @microsoft/office-js, Vite, TypeScript, and all dev dependencies declared in package.json.

​
Available scripts

All development tasks run through npm run <script>: 
{
  "dev":       "vite",
  "start":     "vite",
  "build":     "vite build",
  "preview":   "vite preview",
  "typecheck": "tsc --noEmit",
  "lint":      "eslint src --ext ts,tsx"
}
ScriptWhat it does
dev / startStarts the Vite dev server at https://localhost:3000 with HMR
buildCompiles and bundles the add-in into dist/
previewServes the dist/ output locally for a production smoke-test
typecheckRuns tsc --noEmit — type-checks the whole project without emitting files
lintRuns ESLint across src/ for .ts and .tsx files

​
Vite configuration

vite.config.ts contains three important settings: 
// vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),  // enables @/ imports throughout src/
    },
  },
  build: {
    outDir: "dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        taskpane: resolve(__dirname, "taskpane.html"),  // React task pane
        commands: resolve(__dirname, "commands.html"),  // Ribbon command handler
      },
    },
  },
  server: {
    port: 3000,
    https: true,  // Office requires HTTPS — pair with a trusted cert
  },
});
The dual input declaration tells Rollup to produce two independent bundles. taskpane.html boots the React application; commands.html loads a lightweight script that handles ribbon button actions without opening the full task pane.

​
Full development and sideload workflow

1
Install dependencies
2
npm install
3
Start the development server
4
npm run dev
5
Vite starts at https://localhost:3000. Keep this terminal running — Office will hot-reload the task pane whenever you save a source file.
6
Verify the server is reachable
7
Open https://localhost:3000/taskpane.html in a browser. If you see the Agix UI without a certificate warning, your HTTPS setup is correct. If the browser shows a warning, revisit the mkcert step in the Prerequisites section.
8
Sideload the manifest in Excel
9
  • Open Excel (Desktop or on the web).
  • Go to Insert → My Add-ins.
  • Click Manage My Add-ins, then Upload My Add-in.
  • Browse to the project root and select manifest.xml.
  • Click Upload.
    • 10
    Open the task pane
    11
    In the Home ribbon, a new Agix AI group will appear. Click Open Agix to open the task pane. Enter your API key in the provider selector and start chatting.
    12
    Type-check and lint before committing
    13
    npm run typecheck
npm run lint
    14
    Run both before opening a pull request. The TypeScript compiler will catch any ProviderId or ConnectorType exhaustiveness issues introduced by a new provider or connector.

    ​
    The manifest.xml file

    manifest.xml in the project root is the Office Add-in manifest. It tells Excel where to find the add-in’s HTML files and how to display it in the ribbon. The key URL resources it declares are: 
    <bt:Urls>
  <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
  <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
</bt:Urls>
    If you change the Vite port or serve the add-in from a different host, update all https://localhost:3000 references in manifest.xml accordingly and re-sideload.

    ​
    Production deployment

    When the add-in is ready to ship, build a production bundle and host the output on any static HTTPS server:
    1
    Run the production build
    2
    npm run build
    3
    Vite compiles, tree-shakes, and bundles both entry points into dist/. The output is completely static — HTML, JS, and CSS files with no server-side runtime required.
    4
    Smoke-test the build locally
    5
    npm run preview
    6
    vite preview serves dist/ on a local port so you can verify the built output before deploying.
    7
    Host dist/ on an HTTPS server
    8
    Upload the contents of dist/ to any hosting platform that supports HTTPS — Azure Static Web Apps, Netlify, Vercel, GitHub Pages with a custom domain, or your own CDN. The only hard requirement is a valid TLS certificate on the domain.
    9
    Update manifest.xml with the production URLs
    10
    Replace every https://localhost:3000 reference in manifest.xml with your production domain:
    11
    <bt:Urls>
  <bt:Url id="Taskpane.Url" DefaultValue="https://your-domain.com/taskpane.html" />
  <bt:Url id="Commands.Url" DefaultValue="https://your-domain.com/commands.html" />
</bt:Urls>
    12
    Also update the <IconUrl>, <HighResolutionIconUrl>, <SupportUrl>, <AppDomain>, and <SourceLocation> elements to point to the production host.
    13
    Distribute the updated manifest
    14
    For internal distribution, share the updated manifest.xml and have users sideload it following the same steps as development. For AppSource distribution, submit the manifest and hosted files through the Microsoft Partner Center.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us