ReactLM - Browser-Native AI Coding Assistant

reactlm is bringing AI-powered development to the browser. we are a group of engineers building tools that let developers chat with their react components, make live code changes, and explore any website's architecture.

key features

⊹

visual component selectionclick any component to inspect its structure, props, and state. powered by bippy react fiber traversal.

⊹

multi-model LLM supportchoose from openai, anthropic claude, google gemini, and more via openrouter's unified api.

⊹

live code editingmake changes through ai chat and see them instantly via hot module replacement in development.

⊹

zero configurationsingle script tag integration. works on any website—development or production.

⊹

browser-native storagesqlite wasm with opfs persistence. all data stays local and private.

⊹

component library managementsave interesting patterns from any website. build your own component collection.

installation

script tag

<!-- Add to any HTML page -->
<script src="https://unpkg.com/reactlm/dist/reactlm.js"></script>
<script>
  ReactLM.init({
    providers: {
      openrouter: 'sk-or-...' // Recommended: access to all models
      // Or use individual providers:
      // openai: 'sk-...',
      // anthropic: 'sk-ant-...',
    },
    mode: 'production' // or 'development' for file editing
  });
</script>

npm package

npm install reactlm
# or
pnpm add reactlm

// React component usage
import { ReactLMProvider } from 'reactlm';

function App() {
  return (
    <ReactLMProvider 
      config={{ 
        providers: { /* your API keys */ },
        theme: 'dark',
        position: 'bottom-right'
      }}
    >
      {/* Your app */}
    </ReactLMProvider>
  );
}

development server plugin

// vite.config.js or webpack.config.js
import { reactLMPlugin } from 'reactlm/plugin';

export default {
  plugins: [
    reactLMPlugin({
      enableHotReload: true,
      fileAccess: true,
      sourceMaps: true
    })
  ]
};