**Source URL:** https://limited.veevavault.dev/regulatory/vault-toolbox/toolbox-designer.md

# Vault Toolbox Designer

Vault Toolbox Designer is an open-source tool that allows Vault Admins and developers to extend Vault Toolbox using any code assist agent. It's specifically optimized for collaboration with AI agents, providing a structured framework for extending functionality through feature designs and automated workflows.

The following sections guide you through how to connect Toolbox Designer to your preferred AI agent, create new features, and test those features within the Vault Toolbox browser extension.

<Aside>Vault Toolbox is a collection of open-source tools created and maintained by the Vault Developer Support Team. While not official Veeva products, dedicated support for these tools can be accessed exclusively through the [Vault for Developers community on Veeva Connect](https://veevaconnect.com/communities/ATeJ3k8lgAA/about). Vault Product Support cannot assist with these open-source tools.</Aside>

## Prerequisites {#prerequisites}

To follow this tutorial, you need:

* The latest version of [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

* [Google Chrome](https://www.google.com/chrome/dr/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge/download?form=MA13FJ), or any Chromium-based web browser downloaded and installed

* An AI agent, such as [Gemini CLI](https://geminicli.com/docs/get-started/installation/) or [Claude Code](https://code.claude.com/docs/en/overview)

* A clone of the [Vault Toolbox repository](https://github.com/veeva/Vault-Toolbox) on your local machine

<Aside>While you can use any AI agent, Vault Toolbox Designer is specifically optimized for Gemini CLI and Claude Code.</Aside>

## Launching the AI Agent {#launching-the-ai-agent}

Once you have cloned the Vault Toolbox repository to your local machine, you must launch your preferred AI agent and onboard it using the below process.

Navigate to the repository within your terminal and execute the following commands to launch your preferred AI agent:

<Steps>
1. Navigate to the `frontend` folder.

```
cd frontend

```

2. Launch your agent.

<Tabs><TabItem label="Gemini CLI">
```
gemini

```
</TabItem><TabItem label="Claude Code">
```
claude

```
</TabItem></Tabs>
1. Execute the following command to initialize the agent and sync it with the project's standards:

```
:onboard

```

</Steps>
The AI agent outputs a summary of the onboarding process, confirms the [Vault Docs MCP](/mcp) is connected, updates the knowledge graph, and lists the available commands.

## Creating a Feature {#creating-a-feature}

Once the AI agent is launched and onboarded, you can start building a new feature by using the `:feature` command.

Paste the following example prompt into your terminal:

```
:feature Document Text is Document Text Viewer that allows a user to see a list of documents in their Vault. The user can then select a document and view the extracted text using Vault API.

List of documents is retrieved using VQL:
SELECT id, document_number__v, major_version_number__v, minor_version_number__v, name__v FROM documents

The text for the selected document is retrieved using Vault API:
/api/{version}/objects/documents/{doc_id}/versions/{major_version}/{minor_version}/text

```

The agent may ask clarifying questions and prompt you for additional information to further iterate the feature design. Toolbox Designer stores feature design documents in the `.agents/features` folder.

## Testing a Feature {#testing-a-feature}

To test your feature directly within the browser, you can ask the code assist agent to build and run the server on your behalf. Otherwise, perform the below steps within your terminal:

<Steps>
1. Navigate to the `frontend` folder in the Vault Toolbox repository.

```
cd frontend

```

2. Execute the following command to regenerate the `dist` folder:

```
npm run build

```

3. Open your preferred browser and navigate to the extensions manager page at the following URL:

<Tabs><TabItem label="Chrome">
```
chrome://extensions/

```
</TabItem><TabItem label="Microsoft Edge">
```
edge://extensions/

```
</TabItem></Tabs>
1. Click **Load unpacked** and select the `dist` folder. Once the Vault Toolbox extension has been installed, access Vault Toolbox from your **Extensions** (<Icon name="ph:puzzle-piece"></Icon>) menu in the top navigation bar of the browser. The Vault Toolbox login page appears in a new tab.

2. Log in to Vault Toolbox using your preferred [authentication method](/vault-toolbox/browser-extension/guides/authenticating-to-vault-toolbox).

3. Click <Icon name="ph:list"></Icon> to expand the navigation panel, then select the **Document Text** tool.

</Steps>
<ThemeImage srcLight="/images/toolbox/toolbox-designer/toolbox_designer_doctext_light.png" srcDark="/images/toolbox/toolbox-designer/toolbox_designer_doctext_dark.png" alt="Document Text tool built using Vault Toolbox Designer"></ThemeImage>
Observe the feature you built with Toolbox Designer. The Document Text tool should be capable of displaying the plain text of a document when selected from the list. Its appearance may vary slightly from the screenshot above, but the functionality should be identical.



---

**Previous:** [Available Project Generators](/regulatory/vault-toolbox/intellij-plugin/references/available-project-generators)