frontext

The frontend coding agent for production codebases

[!IMPORTANT]

🚀 A 10x Faster Frontend Agent is Coming. The frontext agent.

We're building a native frontend agent that integrates seamlessly with frontext - delivering 10x faster UI development with unprecedented accuracy.

Get Early Access to the frontext agent →

About the project

Welcome to frontext — The frontend coding agent for production codebases

• 💬 Tell the agent what you want to change
• 🧠 Click on element(s) to let the agent know where a change should happen
• 💡 Let frontext do the magic!

Perfect for devs tired of pasting element information and folder paths into prompts. frontext uses real-time, browser-powered context.

Features

• ⚡ Works out of the box
• 🧩 Customize and extend functionality with Plugins
• 📖 Open source
• ⛓️ Compatible with all kinds of frameworks
• 🧠 Use our dedicated frontend agent - or any other compatible through our open agent interface!

📖 Quickstart

1. 🧩 Install the extension

Install the extension from the extension store of your code editor:

• Cursor: cursor:extension/frontext.frontext-vscode-extension
• VS Code: vscode:extension/frontext.frontext-vscode-extension
• Trae: trae:extension/frontext.frontext-vscode-extension
• Windsurf: windsurf:extension/frontext.frontext-vscode-extension

2. 👨🏽‍💻 Install and inject the toolbar (the extension will guide you)

[!TIP] 🪄 AI-Assisted Setup (recommended):

1. In Cursor, Press CMD + Shift + P
2. Enter setupToolbar
3. Execute the command and the toolbar will init automatically 🦄

Or follow the Manual Setup:

Install @frontext/toolbar:

pnpm i -D @frontext/toolbar

Inject the toolbar into your app dev-mode:

// 1. Import the toolbar
import { initToolbar } from '@frontext/toolbar';

// 2. Define your toolbar configuration
const frontextConfig = {
  plugins: [],
};

// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise() {
  // Only initialize once and only in development mode
  if (process.env.NODE_ENV === 'development') {
    initToolbar(frontextConfig);
  }
}

// Call the setup function when appropriate for your framework
setupStagewise();

⚡️ The toolbar will automatically connect to the extension!

3. Setup your frontext account

🪄 Auto-Install the toolbar (AI-guided):

1. In your IDE, Press ⌘ + Shift + P
2. Enter Login to frontext
3. Execute the command and follow the guide
4. You're good to go!

⚡️ The toolbar will automatically connect to the extension when opening up the dev mode of your app

4. 🎉 Start dev mode and begin coding!

The toolbar should appear in the bottom right corner of your web app. If not, please reach out via Discord.

Framework-specific integration examples

For easier integration, we provide framework-specific NPM packages that come with dedicated toolbar components (e.g., <StagewiseToolbar>). You can usually import these from @frontext/toolbar-[framework-name].

We provide the @frontext/toolbar-react package for React projects. Initialize the toolbar in your main entry file (e.g., src/main.tsx) by creating a separate React root for it. This ensures it doesn't interfere with your main application tree.

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { StagewiseToolbar } from '@frontext/toolbar-react';
import './index.css';

// Render the main app
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// Initialize toolbar separately
const toolbarConfig = {
  plugins: [], // Add your custom plugins here
};

document.addEventListener('DOMContentLoaded', () => {
  const toolbarRoot = document.createElement('div');
  toolbarRoot.id = 'frontext-toolbar-root'; // Ensure a unique ID
  document.body.appendChild(toolbarRoot);

  createRoot(toolbarRoot).render(
    <StrictMode>
      <StagewiseToolbar config={toolbarConfig} />
    </StrictMode>
  );
});

Use the @frontext/toolbar-next package for Next.js applications. Include the <StagewiseToolbar> component in your root layout file (src/app/layout.tsx).

// src/app/layout.tsx
import { StagewiseToolbar } from '@frontext/toolbar-next';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <StagewiseToolbar
          config={{
            plugins: [], // Add your custom plugins here
          }}
        />
        {children}
      </body>
    </html>
  );
}

For Nuxt.js projects, you can use the @frontext/toolbar-vue package. Place the <StagewiseToolbar> component in your app.vue or a relevant layout file.

// app.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@frontext/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <ClientOnly>
      <StagewiseToolbar :config="config" />
    </ClientOnly>
    <NuxtWelcome />
  </div>
</template>

Use the @frontext/toolbar-vue package for Vue.js projects. Add the <StagewiseToolbar> component to your main App component (e.g., App.vue).

// src/App.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@frontext/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <StagewiseToolbar :config="config" />
  <div>
    <!-- Your app content -->
  </div>
</template>

For SvelteKit, you can integrate the toolbar using @frontext/toolbar and Svelte's lifecycle functions, or look for a dedicated @frontext/toolbar-svelte package if available. Create a component that conditionally renders/initializes the toolbar on the client side (e.g., src/lib/components/StagewiseToolbarLoader.svelte or directly in src/routes/+layout.svelte).

Using onMount in +layout.svelte (with @frontext/toolbar):

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import { initToolbar, type ToolbarConfig } from '@frontext/toolbar'; // Adjust path if needed

  onMount(() => {
    if (browser) {
      const frontextConfig: ToolbarConfig = {
        plugins: [
          // Add your Svelte-specific plugins or configurations here
        ],
      };
      initToolbar(frontextConfig);
    }
  });
</script>

<slot />

Using a loader component (example from repository): The example repository uses a ToolbarLoader.svelte which wraps ToolbarWrapper.svelte. ToolbarWrapper.svelte would then call initToolbar from @frontext/toolbar.

<!-- examples/svelte-kit-example/src/lib/components/frontext/ToolbarLoader.svelte -->
<script lang="ts">
import type { ToolbarConfig } from '@frontext/toolbar';
// ToolbarWrapper.svelte is a custom component that would call initToolbar
import ToolbarWrapper from './ToolbarWrapper.svelte'; 
import { browser } from '$app/environment';

const frontextConfig: ToolbarConfig = {
  plugins: [
    // ... your svelte plugin config
  ],
};
</script>

{#if browser}
  <ToolbarWrapper config={frontextConfig} />
{/if}

You would then use StagewiseToolbarLoader in your src/routes/+layout.svelte.

🤖 Agent support

| Agent | Supported | | -------------- | -------------- | | frontext agent| ✅⭐️ | | Cursor | ✅ | | GitHub Copilot | ✅ | | Windsurf | ✅ | | Cline | ✅ | | Roo Code | ✅ | | Kilo Code | ✅ | | Trae | ✅ |

🛣️ Roadmap

Check out our project roadmap for upcoming features, bug fixes, and progress.

📜 License

frontext is developed by tiq UG (haftungsbeschränkt) and offered under the AGPLv3 license.

For more information on the license model, visit the FAQ about the GNU Licenses.

For use cases that fall outside the scope permitted by the AGPLv3 license, feel free to 📬 Contact Us.

🤝 Contributing

We're just getting started and love contributions! Check out our CONTRIBUTING.md guide to get involved. For bugs and fresh ideas, please Open an issue!

💻 Test frontext locally

1. git clone https://github.com/frontext-io/frontext && cd frontext
2. pnpm i && pnpm dev
3. Open the frontext project in your IDE
4. Uninstall/ Disable the official frontext extension
5. Press F5 (a new IDE window with the local extension-version installed will open up)
6. Visit http://localhost:3002

You will see a next.js example application with the frontext-toolbar already set up. It will be connected to the local vscode-extension in apps/vscode-extension and reflect all the extension-changes you apply locally.

💬 Community & Support

• 👾 Join our Discord
• 📖 Open an issue on GitHub for dev support.

📬 Contact Us

Got questions or want to license frontext for commercial or enterprise use?

📧 [email protected]