Skip to main content

Give agents knowledge of your codebase with Context Graphs

When you ask an agent to build on top of your existing codebase, you'd want it to reuse the components, hooks, design tokens, types, and utilities your team already maintains. Kombai’s Context Graphs give the coding agent semantic context about those reusable items—including what they are for, how they behave, and what they depend on—so it can make more consistent use of your existing code.

In this walkthrough, we’ll index a reusable-code folder from our current project and and use that context in coding an account settings page.

Before you begin

You’ll need:

  • The Kombai desktop app installed and signed in, as described in the Kombai Quickstart.
  • Your project open in Kombai. Use the project switcher below the chat input to select a recent project, or choose Open folder… to open one from disk.
  • A subfolder in the current workspace that contains reusable code. Depending on your project, that might include components, hooks, stores, utilities, design tokens, assets, types, or API clients.

For this example, we'll assume all the shared UI is stored in src/components.

Build a Context Graph from your project

1. Start building the Context Graph

Click the Settings icon in Kombai’s top bar and search for Context Graphs in the left menu.

This page is where you add new context graphs or modify existing ones. Click Add your first context graph. If the project already has a graph, click + Add New instead.

2. Choose the source type

In the modal, select Reusable source code, then select Current workspace.

Kombai can also index reusable source from npm packages and stories from Storybook. For this first graph, we'll use a specific folder in the current workspace so that it's inspect the result against code we already know.

3. Select the reusable-code folder and build the graph

Browse to the subfolder you want Kombai to index, select it, and continue. In our example, that is src/components.

Choose the folder that actually contains the reusable items you want the agent to consider. Kombai not only looks for UI components but also searches common patterns for hooks, state management, utility functions, styling and design tokens, icons and assets, types, services, API clients, and other frontend patterns.

Click Build Context Graph.

Kombai first discovers reusable code items in the selected source. It then creates semantic context for each item, including its purpose, usage, behavior, dependencies, item type, and UI category.

4. Review Context Graph items

Once indexing finishes, the discovered items appear as accordions. Open a few accordions and read their summaries.

Check familiar items first. For example, open your primary Button, navigation component, or form hook and confirm that the summary matches how your team actually uses it. This review gives you a visible checkpoint before you rely on the graph in a coding task.

Use the graph in a coding task

Return to chat and describe the feature you want to build. You don’t need to manually refer to the finished graph in every prompt. The agent can access every Context Graph in the current project alongside your prompt, rules, commands, skills, and local files found through agentic search.

For our account settings example, we'll ask:

Build an account settings page using the existing form, button, and notification patterns from this project. Reuse our design tokens and avoid creating duplicate primitives.

When one indexed item is especially important, attach it explicitly:

  1. Type @ in the chat input.
  2. Select Indexed Items.
  3. Select the component, hook, or other indexed item you want the agent to use.
  4. Add your instruction and send the message.

Keep Context Graphs useful

Context Graphs are most valuable when they reflect the current source:

  • To refresh a graph, select Rebuild on its card. Kombai recreates the graph from the latest version of the source.
  • To delete a graph, open the actions menu from the Context Graphs page and select Remove.
  • To share the context graph with your teammates, open Settings → Tech Stack and turn on Sync with stack.json. Kombai stores the indexed graph’s type, path, and name in .kombai/stack.json. Push that file to the remote repository. When your teammates receive the file from remote, Kombai will auto detect the configured Context Graphs.

Next steps

From here, you can add separate Context Graphs for other reusable sources. The agent can access all graphs available in the current project for a task.

  • Reusable source from an npm package: Choose Reusable source code → NPM Package, then provide a Git repository URL and branch or switch to Local Folder.
  • Storybook from a local folder: Choose Storybook → Local Folder, select the folder that contains your stories, and build the graph.
  • Storybook from a Git repository: Choose Storybook → GitHub repository, then provide the repository URL and branch.