MCPHub Lab
MCPHub LabRegistryonlook-dev/onlook
onlook-dev

onlook dev/onlook

Built by onlook-dev • 24,971 stars

Visit Repository

What is onlook dev/onlook?

A high-performance MCP server implementation for onlook-dev/onlook that bridges the gap between the Model Context Protocol and external services. It allows Large Language Models to interact with your data and tools with low latency and native support.

How to use onlook dev/onlook?

1. Ensure you have an MCP-compatible client (like Claude Desktop) installed. 2. Configure your server with: npx @modelcontextprotocol/onlook-dev/onlook 3. Restart your client and verify the new tools are available in the system catalog.
🛡️ Scoped (Restricted)
npx @modelcontextprotocol/onlook-dev-onlook --scope restricted
🔓 Unrestricted Access
npx @modelcontextprotocol/onlook-dev-onlook

Key Features

Native MCP Protocol Support
High-performance Data Streaming
Type-safe Tool Definitions
Seamless Environment Integration

Optimized Use Cases

Connecting external databases to AI workflows
Automating workflow tasks via natural language
Augmenting developer productivity with specialized tools

onlook dev/onlook FAQ

Q

What is an MCP server?

MCP is an open standard that enables developers to build secure, two-way integrations between AI models and local or remote data sources.

Q

Is this server ready for production?

Yes, this server follows standard MCP security patterns and tool-restricted access.

Official Documentation

View on GitHub
<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --> <div align="center"> <img width="800" alt="header image" src="assets/web-preview.png"> <h3 align="center">Onlook</h3> <p align="center"> <strong>The design tool for AI-native designers — now in early access.</strong> <br /> Onlook makes designing on top of your codebase effortless. Craft exceptional experiences with AI in code. <br /> <br /> <a href="https://www.onlook.com/waitlist?utm_source=github&utm_medium=readme&utm_campaign=waitlist-2026"><strong>→ Join the waitlist</strong></a> </p> <p align="center"> 👨‍💻👩‍💻👨‍💻 <a href="https://www.ycombinator.com/companies/onlook/jobs/e4gHv1n-founding-engineer-fullstack">We're hiring engineers in SF!</a> 👩‍💻👨‍💻👩‍💻 </p> <br /> <a href="https://youtu.be/RSX_3EaO5eU?feature=shared">View Demo</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=bug&template=bug-report---.md">Report Bug</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a> </p> <!-- PROJECT SHIELDS --> <!-- *** I'm using markdown "reference style" links for readability. *** Reference links are enclosed in brackets [ ] instead of parentheses ( ). *** See the bottom of this document for the declaration of the reference variables *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. *** https://www.markdownguide.org/basic-syntax/#reference-style-links --> <!-- [![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![Apache License][license-shield]][license-url] -->

Discord LinkedIn Twitter

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

</div>

This is the open-source visual editor that started Onlook (Next.js + Tailwind). The hosted product we're building next, for AI-native designers, is in early access via the waitlist above.

An Open-Source, Visual-First Code Editor

Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

What you can do with Onlook:

  • Create Next.js app in seconds
    • Start from text or image
    • Use prebuilt templates
  • Visually edit your app
    • Use Figma-like UI
    • Preview your app in real-time
    • Manage brand assets and tokens
    • Create and navigate to Pages
    • Browse layers
    • Manage project Images
    • Detect and use Components – Previously in Onlook Desktop
    • Drag-and-drop Components Panel
    • Use Branching to experiment with designs
  • Development Tools
    • Real-time code editor
    • Save and restore from checkpoints
    • Run commands via CLI
    • Connect with app marketplace
  • Deploy your app in seconds
    • Generate sharable links
    • Link your custom domain
  • Collaborate with your team
    • Real-time editing
    • Leave comments
  • Advanced AI capabilities
    • Queue multiple messages at once
    • Use Images as references and as assets in a project
    • Setup and use MCPs in projects
    • Allow Onlook to use itself as a toolcall for branch creation and iteration
  • Advanced project support
    • Support non-NextJS projects
    • Support non-Tailwind projects

Onlook-GitHub-Example

Getting Started

Use our hosted app or run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.

<img width="600" alt="image" src="https://github.com/user-attachments/assets/4ad9f411-b172-4430-81ef-650f4f314666" /> <br>

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

<img width="600" alt="image" src="assets/insert-div.png"> <br>

Preview the code side-by-side with your site design.

<img width="600" alt="image" src="assets/code-connect.png"> <br>

Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.

<img width="600" alt="image" src="assets/text-styling.png" />

Documentation

For full documentation, visit docs.onlook.com

To see how to Contribute, visit Contributing to Onlook in our docs.

How it works

<img width="676" alt="architecture" src="assets/architecture.png">
  1. When you create an app, we load the code into a web container
  2. The container runs and serves the code
  3. Our editor receives the preview link and displays it in an iFrame
  4. Our editor reads and indexes the code from the container
  5. We instrument the code in order to map elements to their place in code
  6. When the element is edited, we edit the element in our iFrame, then in code
  7. Our AI chat also has code access and tools to understand and edit the code

This architecture can theoretically scale to any language or framework that displays DOM elements declaratively (e.g. jsx/tsx/html). We are focused on making it work well with Next.js and TailwindCSS for now.

For a full walkthrough, check out our Architecture Docs.

Our Tech Stack

Front-end

Database

AI

Sandbox and hosting

Runtime

  • Bun - Monorepo, runtime, bundler
  • Docker - Container management

Contributing

image

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.

See the CONTRIBUTING.md for instructions and code of conduct.

Contributors

<a href="https://github.com/onlook-dev/onlook/graphs/contributors"> <img src="https://contrib.rocks/image?repo=onlook-dev/onlook" /> </a>

Contact

image

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.

<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

Global Ranking

7.7
Trust ScoreMCPHub Index

Based on codebase health & activity.

Manual Config

{ "mcpServers": { "onlook-dev-onlook": { "command": "npx", "args": ["onlook-dev-onlook"] } } }